你不知道的JS(上卷)笔记——原型总结(属性设置和屏蔽)
2020-03-03 本文已影响0人
李牧敲代码
原书中这里讲得比较零散,关于原型和原型链可以参考我之前的一篇文章
本文基于原书这方面内容总结2个东西:
属性设置和屏蔽
属性设置:
- 直接赋值
var obj = {
a: 11,
b: 22,
'3': 33
}
- 通过Object.defineproperties(或者Object.defineproperty)
let obj = {};
Object.defineProperties(obj, {
a: {
writable:true,
value: 12
}
})
属性屏蔽:
- 在查找时发生的属性屏蔽:
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
- 属性设置时的屏蔽
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'}