你不知道的JS(上卷)笔记——原型总结(属性设置和屏蔽)

2020-03-03  本文已影响0人  李牧敲代码

原书中这里讲得比较零散,关于原型和原型链可以参考我之前的一篇文章
本文基于原书这方面内容总结2个东西:

属性设置和屏蔽

属性设置:

  1. 直接赋值
var obj = {
   a: 11,
   b: 22,
   '3': 33
}
  1. 通过Object.defineproperties(或者Object.defineproperty)
let obj = {};
Object.defineProperties(obj, {
    a: {
        writable:true,
        value: 12
    }
})

属性屏蔽:

  1. 在查找时发生的属性屏蔽:
    1.1在整个原型链中,前面的属性会屏蔽之后的属性
let obj1 = {
    a: 1
}

let obj2 = {
    a: 2,
    b: 3
}

obj1.__proto__ = obj2;


console.log(obj1.a)//1
console.log(obj2.b)//3
  1. 属性设置时的屏蔽
    2.1 如果当前对像中有目标属性时,则只会根据当前对象的属性进行设置,原型链中其他同名属性不会受到影响。
let obj1 = {
    a: 1
}

let obj2 = {
    a: 2,
    b: 3
}

obj1.__proto__ = obj2;
obj1.a = 4

console.log(obj1.a)//4
console.log(obj2.a)//2

2.2 如果当前对象中没有目标属性:
2.2.1 后面的原型链中最近的同名属性如果是不可写的,那么什么都不会发生。
2.2.2 如果后面的属性如果有[Setter]]则根据[Setter]r的规则来。
2.2.3 如果没有[Setter]则会在当前对象中产生目标属性,并发生属性屏蔽,原型链中的同名属性不会发生影响。

let obj1 = {

}

let obj2 = {
    default: 'defalut'
}

obj1.__proto__ = obj2;


Object.defineProperties(obj2, {
    a: {
        value: 1,
        writable: false,
        enumerable: true
    },
    b: {
        value: 2,
        writable: true,
        enumerable: true
    },
    c: {
        get() {
            return 3
        },
        set() {
            this.default = 'change'
        },
        enumerable: true
    }
})
obj1.a = 4
obj1.b = 4
obj1.c = 4

console.log(obj1.a)//1
console.log(obj2.a)//1
console.log('----------------')

console.log(obj1.b)//4
console.log(obj2.b)//2
console.log('----------------')

console.log(obj1.c)//3
console.log(obj2.c)//3
console.log(obj1.default)//change
console.log(obj2.default)//default


console.log(obj1)//{b:4, default: 'change'}
console.log(obj2)//{a: 1, b:2, c: [Getter/Setter], default: 'default'}

上一篇下一篇

猜你喜欢

热点阅读