关于Object.defineProperty的几个坑

坑1

let obj={};
let o = Object.defineProperty(obj,'key',{configurable: true,enumerable: true,get: function () {return this.key || 0;},set: function (n) {obj.key = n;}
})
console.log(o.key);
//报Uncaught RangeError: Maximum call stack size exceeded

以上代码会报 Uncaught RangeError: Maximum call stack size exceeded
原因在于,get函数中,return this.key会再一次触发get函数导致死循环
坑2

let obj={};
let val='';
let o = Object.defineProperty(obj,'key',{configurable: true,enumerable: true,get: function () {return val || 0;},set: function (n) {val = n;}
})
console.log(o.key);
//返回0
val=2;
console.log(o.key);
//返回2

以上代码,虽然成功的实现了Object.defineProperty但是,o.val会受外部变量val的影响
坑3

let obj={};
let o = Object.defineProperty(obj,'key',{configurable: true,enumerable: true,get: function () {return this.val || 0;},set: function (n) {this.val= n;}
})
console.log(o.key);
//返回0
obj.val=2;
console.log(o.key);
//返回2

以上代码,虽然成功的实现了Object.defineProperty但是,o.val会受obj.val的影响

最后解决方案,利用闭包返回一个新的对象,

function getObj(){let obj={};
let val=''; //此处val是安全的,外部是无法修改的
let o = Object.defineProperty(obj,'key',{configurable: true,enumerable: true,get: function () {return val || 0;},set: function (n) {val = n;}
})
return o; //每个对象都是新的
}
let aa = getObj();
console.log(aa.key); //返回0

总结一下Object.defineProperty使用时,如果需要设置get,set,那么要包一层函数,最后返回的是生成的object,把get,set操作的值放在函数内部,防止外部污染

关于Object.defineProperty的几个坑相关推荐

IE浏览器兼容Object.assign踩过的坑
IE浏览器兼容Object.assign踩过的坑 1.背景: 使用Object.assign,又在IE浏览器上访问时,会报该方法不存在~ ERROR:对象不支持"assign"属性 ...
Object.defineProperty()
let obj = {}; let song = '发如雪'; obj.singer = '周杰伦'; Object.defineProperty(obj, 'music', { // 1. valu ...
Vue、angular等框架实现双向绑定的原理，核心机制是使用了Object.defineProperty
<div id="name"></div> var obj = {};Object.defineProperty(obj, "name" ...
对javscript中Object.defineProperty的理解
自己在使用vue的过程中经常会用到听到数据双向绑定这个词,而且我们还可以直接通过调用this.msg(this表示vue实例),来获取data上的数据,以前一直不太明白为什么可以这样获取,直到有一 ...
vue 数据绑定实现的核心 Object.defineProperty()
vue深入响应式原理现在是时候深入一下了!Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是普通的 JavaScript 对象.而当你修改它们时,视图会进行更新.这使得状态管理非常简 ...
Object.defineProperty的理解
一.Object.defineProperty:给一个对象定义一个新的属性或修改一个对象现有的属性,并且返回这个对象 1.语法:Object.defineProperty(参数1,参数2,参数3) 参 ...
vue中实现双向数据绑定原理,使用了Object.defineproperty()方法,方法简单
在vue中双向数据绑定原理,我们一般都是用v-model来实现的 ,但一般在面试话会问到其实现的原理, 方法比较简单,就是利用了es5中的一个方法.Object.defineproperty(),它有 ...
Object.defineProperty()方法的用法详解
Object.defineProperty()函数是给对象设置属性的. Object.defineProperty(object, propertyname, descriptor); 一共有三个参数 ...
Object.defineProperty与双向绑定、数据监听
一.对象赋值的两种方式一是"="赋值,一是Object.defineProperty方法,而当下流行框架中广泛应用的双向绑定和数据监听等,就是利用的第二种方式,关于此方法不多讲, ...

关于Object.defineProperty的几个坑

关于Object.defineProperty的几个坑相关推荐

最新文章

热门文章