Object.defineProperty方法（详解）

OK，这一篇主要想说一下Object.defineProperty这个方法。

这个方法也是Vue数据双向绑定原理的常见面试题
所以也是有必要好好掌握的哦

首先我们知道JS中是支持面向对象编程的，也是有着对象和类这样的概念。
我们常见创建对象的方法应该是这样：

var p1 ={name:"lisi",
}

那我们Object.defineProperty这个方法有什么用呢?

这个方法接收三个参数:

1.属性所在的对象
2.属性的名字
3.一个描述符对象

这个描述符对象是个什么东西呢？
他可以是数据属性：

1.configurable:表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性，默认值为false。

2.enumerable：表示能否通过for in循环访问属性，默认值为false

3.writable：表示能否修改属性的值。默认值为false。

4.value：包含这个属性的数据值。默认值为undefined。

现在我们就对p1这个对象，用这个方法来玩一下

Object.defineProperty(p1,"name",{configurable : false,
})
console.log(p1); //{ name: 'lisi' }
delete p1.name;
console.log(p1); //{ name: 'lisi' }

通过这个方法设置好configurable 这个属性，delete就不能把name属性给删除掉了。

Object.defineProperty(p1,"age",{writable :false,value : 15,
})
console.log(p1.age); //15
p1.age = 20;
console.log(p1.age); //15

然后我们给p1这个对象新加了一个age属性，并且设置成只读的。
这样我们就无法修改这个age属性了。

Object.defineProperty(p1,"age",{enumerable:false
})
for(var i in p1){console.log(p1[i]);
} // lisi

在通过这个方法给enumerable设置为false，这样对象就不能通过迭代器遍历出age这个属性的值了。

通过这几个例子，我们基本那就了解Object.defineProperty这个方法的使用以及数据属性是做什么的了。
那该方法的第三个参数除了可以是数据属性，也可以是访问器属性。

1.get：在读取属性时调用的函数，默认值是undefined 2..set：在写入属性的时候调用的函数，默认值是undefined

现在我们来用这两个方法来实践一下：

var book = {_year : 2004,edition : 1
}Object.defineProperty(book,"year",{get: function(){return this._year},set: function(newYear){if(newYear > 2004){this._year = newYear;this.edition += newYear - 2004}}
})book.year = 2005;
console.log(book.edition); // 2
console.log(book._year); //2005

由于get方法返回_year的值，set方法通过计算来确定正确的版本。
因此把year的值设置为2005会导致edition的值变为2.

OK，关于Object.defineProperty方法的第三个参数的两种属性也就说完了。

最后我们再说一下如何进行定义多个属性

var student = {};
Object.defineProperties(student,{name:{writable:false,value:"lisi"},age : {writable:true,value : 16,},sex:{get(){return '男';},set(v){p1.sex = v}}
})p1.sex = "男";
console.log(student.name + ":" + student.age);
console.log(p1.sex); // 男
student.sex = "女";
console.log(student.sex); //男
console.log(p1.sex); // 女

OK，关于写法应该也没有什么难点。

最后我在附上一个模拟Vue中v-module数据双向绑定原理的代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><metaname="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><style>#myInput {width: 400px;height: 50px;font-size: 40px;color: red;}#contain {margin-top: 20px;width: 400px;height: 200px;border: 1px solid salmon;}</style></head><body><input id="myInput" type="text" /><div id="contain"></div><script>var text;window.data = {};var oIn = document.getElementById("myInput");var oDiv = document.getElementById("contain");oIn.addEventListener("input", function (e) {text = e.target.value;console.log(text);window.data.value = text;});Object.defineProperty(window.data, "value", {get() {return "";},set(v) {oDiv.innerHTML = v;},});</script></body>
</html>

效果图是这样的：

那关于这一部分的知识也就整理完啦！

Object.defineProperty方法（详解）相关推荐

JavaScript Object.defineProperty()方法详解
Object.defineProperty() 方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性,并返回这个对象.因此,又称为属性拦截器.在前端中,webpack以及vue的原理都应用了 ...
Object.keys方法详解
Object.keys方法详解一.语法 Object.keys(obj) 参数:要返回的对象返回值:所有可枚举属性的字符串二.对象处理,返回枚举属性数组 let obj = { name:&qu ...
php object keys_原生js中Object.keys方法详解
实际开发中,有时需要知道对象的所有属性,原生js提供了一个方法Object.keys(). Object.keys(obj)返回的是一个数组,该数组的所有元素都是字符串.这些元素是来自于给定的obj可 ...
object类中的equals与自定义equals方法详解
object类中的equals与自定义equal方法详解 1.this怎么理解?this == obj表示什么? this就是当前你new出来的对象,这里指谁调用equal方法this指的就是谁,ob ...
Spring JdbcTemplate方法详解
2019独角兽企业重金招聘Python工程师标准>>> Spring JdbcTemplate方法详解标签: springhsqldbjava存储数据库相关sql 2012-07- ...
java多线程中的join方法详解
java多线程中的join方法详解方法Join是干啥用的? 简单回答,同步,如何同步? 怎么实现的? 下面将逐个回答. 自从接触Java多线程,一直对Join理解不了.JDK是这样说的:join p ...
vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
python中的class怎么用_对python 中class与变量的使用方法详解
python中的变量定义是很灵活的,很容易搞混淆,特别是对于class的变量的定义,如何定义使用类里的变量是我们维护代码和保证代码稳定性的关键. #!/usr/bin/python #encoding ...
python的装饰器迭代器与生成器_python3 装饰器、列表生成器、迭代器、内置方法详解等（第四周）...
前言: 为什么要学习python3? 原因: 1.学习一门语言能力 2.通过该语言能力完成测试自动化以及独立完成自测框架知识那么我要做什么呢? 1.每天花十个小时完成python3的学习要在什么地 ...

Object.defineProperty方法（详解）

Object.defineProperty方法（详解）相关推荐

最新文章

热门文章