了解 object.defineProperty 的基本使用方法(数据双向绑定的底层原理)
Object.defineProperty
给一个对象定义一个新的属性或者在修改一个对象现有的属性,并返回这个对象 语法:
Object.defineProperty(参数1,参数2,参数3)
参数1:目标对象 参数2:要修改或者添加的属性名称 参数3:目标对象属性的一些特征 (是一个对象)
参数1:
value:属性值
参数2:
writable:对象属性值是否可以被修改 true允许 false不允许
参数3:
configurable:对象属性是否可以被删除 true允许 false不允许
参数4:
enumerable:对象属性是否可被枚举
参数5:
get():给一个属性提供getter方法,当访问这个对象的属性值得时候触发该方法
参数6:
set():给一个属性提供setter方法,当设置属性值得时候触发该方法
{
代码示列!
var obj = {sex:"男",nation:"汉"};
Object.defineProperty(obj,"name",{
value :"张三",
writable:false,//属性值不允许被修改
configurable:false,//属性不允许被删除
});
Object.defineProperty(obj,"age",{
value:24,
writable:true,//属性值允许被修改
configurable:true,//属性允许被删除
});
obj.name = "李四";//输出为张三;
delete obj.age;
onsole.log(obj.age);//输出为空
Object.defineProperty(obj,"sex",{
enumerable :false,//对象属性不可被枚举
})
Object.defineProperty(obj,"nation",{
enumerable :true,//对象属性可被枚举
})
console.log(object,keys(obj));//[name,age,nation]
}
//object.keys()和for in 的区别?
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype = {
sex :"男"
}
var man = new Person();
object.keys(man);//["name","age"];
for(var key in man){
console.log(key);// name,sge sex;
}
//区别:前者返回的是一个数组,数组值为对象自身的属性,不能遍历继承的原型属性;
// 后者遍历的是对象的可枚举的属性,包含自身的属性和可继承的原型属性
//get()和set();
var obj = {live: "打球"};
Object.defineProperty(obj,"live",{
get(){
console.log("被访问了");//被访问时触发get方法;
} ,
set(newLive){
console.log("被设置了"+"newLive");//被设置时触发set方法;
}
})
obj.live;//被访问;
obj.live = "健身" // 被设置
//注意 使用set 和get 方法时不能使用value 和 writable 这两个属性会报错!!
了解 object.defineProperty 的基本使用方法(数据双向绑定的底层原理)的更多相关文章
- vue中数据双向绑定的实现原理
vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...
- 【Vue】-- 数据双向绑定的原理 --Object.defineProperty()
Object.defineProperty()方法被许多现代前端框架(如Vue.js,React.js)用于数据双向绑定的实现,当我们在框架Model层设置data时,框架将会通过Object.def ...
- 深入理解 Object.defineProperty 及实现数据双向绑定
Object.defineProperty() 和 Proxy 对象,都可以用来对数据的劫持操作.何为数据劫持呢?就是在我们访问或者修改某个对象的某个属性的时候,通过一段代码进行拦截行为,然后进行额外 ...
- Vue的数据双向绑定和Object.defineProperty()
Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...
- Vue双向绑定的实现原理系列(一):Object.defineproperty
了解Object.defineProperty() github源码 Object.defineProperty()方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. ...
- vuejs数据双向绑定原理(get & set)
前端的数据双向绑定指的是view(视图)和model(数据)两者之间的关系:view层是页面上展示给用户看的信息,model层一般是指通过http请求从后台返回的数据.view到model的绑定都是通 ...
- Vue数据双向绑定原理及简单实现
嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...
- Vue源码学习(一)———数据双向绑定 Observer
从最简单的案例,来学习Vue.js源码. <body> <div id='app'> <input type="text" v-model=" ...
- 深入理解Proxy 及 使用Proxy实现vue数据双向绑定
阅读目录 1.什么是Proxy?它的作用是? 2.get(target, propKey, receiver) 3.set(target, propKey, value, receiver) 4.ha ...
随机推荐
- confluence中设置应用程序链接到jira
有时需要在confluence中选中文本直接生成issue或story到jira里. 在"一般配置“->“应用程序链接”中创建即可.
- [下载]Oracle LOB字段编辑工具
OraLobEditor 是Oracle LOB (CLOB, BLOB) 字段编辑工具. 查看.编辑LOB (CLOB, BLOB)字段(plain text, RTF, image, hex, h ...
- POJ 2002 Squares【值得摸索的一道二分+点旋转】
id=2002">Squares 很好的一道二分,事实上本来我是没有思路的,看了基神的题解之后才似乎明确了点. 题意:给出最多有1000个点,问这些点能够组成多少个正方形 分析:先想想 ...
- Android之——自己主动挂断电话的实现
转载请注明出处:http://blog.csdn.net/l1028386804/article/details/47072451 通过<Android之--AIDL小结>与<And ...
- python中获取当前路径【os模块】
本机windows,文件目录F:\python\ClStudyDemo\osTest.py os.path.realpath(_file_)——返回真实路径 os.path.split()——返回路径 ...
- oc10--练习
// // main.m // 练习 #import <Foundation/Foundation.h> @interface Car : NSObject { @public int w ...
- Linux 获取设备树源文件(DTS)里的资源【转】
本文转载自:http://blog.csdn.net/keleming1/article/details/51036000 http://www.cnblogs.com/dyllove98/archi ...
- bzoj4887: [Tjoi2017]可乐
一眼暴力宽搜(最近比赛想暴力想疯了... 很明显的矩乘,然后自爆可以看作走向向一个无出边的点 然后没啥难的了吧. #include<cstdio> #include<iostream ...
- 【POJ 2891】 Strange Way to Express Integers
[题目链接] http://poj.org/problem?id=2891 [算法] exgcd [代码] #include <algorithm> #include <bitset ...
- js重定向
在现行的网站应用中URL重定向的应用有很多: 404页面处理.网址改变(t.sina转到weibo.com).多个网站地址(如:http://www.google.com/ .www.g.cn )等: ...