你说不知道的对象赋值-CSDN博客

首先先看一段代码

var a = {};
a.foo = 456;

这句代码大家都很属性，就是为a对象添加一个foo属性。

不过实际上执行的步骤没有这么简单，

首先会查找对象a原型是否有foo这个属性，在向自身查找，如果没有会继续在原型链上查找，
如果查找到顶层还没找到就会返回undefined，因为原型链上没有foo属性，这里会为a对象本身添加foo这个属性。

在这里纠正一个错误的观点，为属性添加属性就是简单的更新添加属性值。一个很有意思的现象，如果a的原型链上也有foo这个属性，我们为a添加foo属性会读取到那个呢？

首先先看第一个例子

var b = {foo: 456};
var a = Object.create(b);
a.foo = 123;
console.log(a.foo); //123

这里返回的是123，原因很简单，如果变量内部的属性存在就不会向原型链进行查找。

在看第二个例子，

如果a的原型链上有foo这个属性，且原型链上的foo属性不可修改（writable）会怎么样呢？

var b = {foo: 456};
Object.defineProperty(b, 'foo', {
    writable: false
});
var a = Object.create(b);
a.foo = 123;
console.log(a.foo); //456

这里结果出乎所料，如果我们在第一行添加严格模式，还会报错，为什么会出现这种现象？

首先在a向原型链查找发现了foo属性，foo属性不可修改（writable）会导致a.foo = 123，这句代码被忽略掉；

可以简单理解为原型属性的属性描述对象会影响到a对象。

在看第三个例子，

如果a的原型上定义了foo的set（存值）方法

var b = {foo: 456};
Object.defineProperty(b, 'foo', {
    set: function(value) {
        console.log('被调用');
    }
});
var a = Object.create(b);
a.foo = 123;
console.log(a.foo); //undefined

当a为foo修改值时，会向原型链查找，会导致b对象下的foo属性的set方法被调用，因为没有返回值默认返回undefined。

解决方法：

如果发生上述的第二个例子或者第三个例子的情况，我们依然可以使用Object.defineProperty来定义自身的属性。

var b = {foo: 456};
Object.defineProperty(b, 'foo', {
        set: function(value) {
    }
});
var a = Object.create(b);
Object.defineProperty(a, 'foo', {
    value: 456
});
console.log(a.foo); //456

如果你看完了上面内容，最后看一个例子。

var b = {foo: 456};
var a = Object.create(b);
a.foo++;
console.log(b.foo, a.foo);
//456 457

因为a.foo本身没有，所以获取的是b.foo，b.foo+1就是457，这也是为什么a.foo的输出结果为457的原因，如果想要改变b.foo的大小，那么只能显式的b.foo++

转载于:https://www.cnblogs.com/boses/p/9585942.html