Object 的静态方法之 defineProperties 以及数据劫持效果

再提一下什么是静态方法：

　　静态方法：在类身上的方法，　　动态方法:在实例身上的方法

Object.defineProperties(obj, props)

obj：被添加属性的对象props：添加或更新的属性对象

给对象定义属性，如果存在该属性，则用新定义的属性更新已存在的属性，如果不存在该属性，则添加该属性。

如果是新添加的属性，一定要设置是否可枚举，不然为false    enumerable(是否可枚举):默认为false    writable(是否可写):默认为false    configurable:是否可删除delete

Object.defineProperty()    在对象上定义新属性，或修改对象现有属性，并返回该对象。

    Object.defineProperty(obj, 属性名字, {设置属性})

例子1：

 1      let obj = {
 2          name:'xx',
 3          num:0
 4      };
 5      Object.defineProperties(obj,{
 6          name:{
 7              value:'yy',
 8              writable: false,//是否可重新赋值
 9              enumerable: false,//是否可遍历（枚举）
10              configurable:false//是否可（配置）删除
11          },
12          age:{
13              value:20,
14              enumerable: true
15          }
16      });
17
18      obj.age = 30;
19      console.log(obj.age);//默认不可写，所以此处依然是  20
20      delete obj.name;//此处删了一个不可删除的属性
21      console.log(obj.name);//当然能显示 yy

例子2：数据劫持效果

 1      let obj = {
 2          num:4
 3      };
 4      let n = 2;
 5      Object.defineProperty(obj,'num',{
 6          get:function(){   //取 obj.num 属性时会触发 get 方法
 7              /*数据劫持*/
 8              //当你获取这个属性的时候，会调用
 9              n += 2;
10              return n;
11          },　　　　　　　set(val){   //给 obj.num 赋值时会触发 set 方法　　　　　　　　　//val 是给 obj.num 赋值时的那个值 　　　　　　　}12      });
13      console.log(obj.num < 5 && obj.num > 5);//true
14  /*num即小于5，又大于，就是应为，第一次判断obj.num时num=（n+=2）=4，符合了第一个条件，此时的n=4。
15 读到第二个判断的时候，再次触发函数，此时n+=之后为6，又符合了第二个判断条件，所以出现了true*/

转载于:https://www.cnblogs.com/MrZhujl/p/9938505.html

Object 的静态方法之 defineProperties 以及数据劫持效果相关推荐

第二十七章数据劫持
一.现在的开发方式 1.现实中的开发,很少使用原声JS,不是因为JS不强大,主要是因为操作比较繁琐,几乎所有的公司都在使用框架,比如vue.react 2.特点:数据驱动视图.也就是数据发生变化以后, ...
前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)
前端面试题 HTML5 相关面试题 CSS3 相关面试题盒子模型盒子水平垂直居中的方案经典布局方案圣杯布局双飞翼布局 flex布局定位方式布局 css实现三角形 JS 相关面试题 8种数据 ...
vue 数据劫持详解
2019独角兽企业重金招聘Python工程师标准>>> 首先 Object.defineProperty(obj,prop,descriptor) 用法介绍: 参数 obj:目标对象 ...
Vue2 MVVM 双向绑定(数据劫持+发布者-订阅者模式)
参考文献:https://www.cnblogs.com/libin-1/p/6893712.html https://juejin.im/post/5b2f0769e51d45589f46949e ...
javascript --- [有趣的条件]双等号的隐式调用和数据劫持
1 双等号的隐式调用和数据劫持求下面条件,在a为什么样时,等号成立 if(a == 1 && a == 2 && a == 3){console.log('等号成立' ...
vue中数据劫持代理
1.vue中的数据劫持代理指的是开发者调用或修改组件data里的某个属性时可以直接使用this.属性名,而不用写成this.data.属性名 2.实现原理主要就是用到了Object.definePro ...
实现简易版vue2（数据劫持，观察者，发布订阅）
仅笔记使用,如果想要下面代码的视频,关注公众号"程序江",回复001 html使用下面js文件的例子 <!DOCTYPE html> <html lang=&qu ...
【Vue知识点】——Vue2和Vue3的数据劫持
文章目录数据劫持为什么在data中定义的数据会自动携带get.set属性方法呢? 数据劫持 data与_data Object.DefineProperty Object.DefineProper ...
MVVM理解 ——（2）数据劫持
数据劫持 – 在使用或者设置某的对象的属性的时候,通过一系列的代码拦截此次的此次的行为.即可以在赋值过程中添加一些操作或者修改返回的结果. 例如: 对象设置一个 a = {name: 1}; 在进行赋 ...

Object 的静态方法之 defineProperties 以及数据劫持效果

Object 的静态方法之 defineProperties 以及数据劫持效果相关推荐

最新文章

热门文章