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

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

作者: 李牧敲代码 | 来源:发表于2020-03-03 13:11 被阅读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'}
    

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/jxcmhhtx.html