ES6-8【函数名-对象拓展-描述符-getter-setter】

一.函数名

.name

var f = function (){}
//es5 输出"" es6输出f

anonymous

log(new Function.name);

bound foo

call就不行,因为会执行

function foo(){}
log(foo.bind({}).name);

二.对象扩展

特殊写法

const foo = "bar";
const baz = {foo};
console.log(baz);//{foo: "bar"}

function foo(a, b){
    log({a,b})
}
foo(1, 2);//{a:1,b:2}

let obj = {};
//obj.foo = true;
//obj['f'+'o'+'o'] = false;
log(obj)//true false

let a = 'hello';
let b = 'world';
let obj = {
    [a+b]:true, //true
    ['hello'+b]:123, //123
    ['hello'+'world']: undefined //un
}
log(obj) {helloworld:undefined}

var myObject = {};
myObject[true] = 'foo';
myObject[3] = 'bar';
myObject[myObject] = 'baz';
log(myObject['true']); 输出foo 正常输出
log(myObject["[object Object]"]);输出baz  
解析
const a = {a:1};
const b = {b:2};
const obj = {
    [a]: 'valueA',
    [b]: 'valueB'
}
log(obj) 会经过包装类 输出{[object Object]:"valueB"}

三.描述符

访问Name

const person = {
    sayName(){
        log('hello')
    }
}
log(person.sayName.name)//sayName

Object.getOwnPropertyDescriptor(obj,'a')

获取当前对象下的属性的值，是否可配置，是否可遍历，是否可写

let obj = {a: 2};
log(Object.getOwnPropertyDescriptor(obj,'a'));
{
    configurable: true,
    enumerable: true,
    value: 2,
    writable: true
}

Object.defineProperty(obj,'a',{})

修改一个已有的属性，添加一个新的属性

let obj = {};
Object.defineProperty(obj,'a',{
    value: 2,
    enumberable:true,
    writable：true
    configurable: true
})
log(obj);//输出{a: 2}

把configturable变为false则无法继续配置第二次

静默失败，严格模式下会报错,普通模式下不报错

let obj = {}
Object.defineProperty(obj,'a',{
    value: 2,
    enumberable:true,
    writable：false,
    configurable: true
})
obj.a = 3
log(obj.a);//2

需要配置configurable: false才可以阻止删除

四.getter/setter

(1).GET

系统原理

let obj = {a: 1};
obj.a;//属性的获取, [[Get]]默认操作，查找当前属性如果没有，查找原型
obj.a = 3;
//[[Put]]操作

伪属性

var obj = {
    log:['example','test'],
    get latest(){
        if(this.log.length === 0)return undefined;
        return this.log[this.log.length-1]
    }
}
log(obj.latest)//test

重写了获取属性的. 这就叫做伪属性

var myObject = {
    get a(){
        return 2;
    }
}
Object.defineProperty(myObject,'b',{
    get: function(){
        return this.a*2
    }，
    enumerable: true
    
})
log(myObject.a) 2
log(myObject.b) 4

defineProperty与get冲突

var myObject ={
    get a(){
        return 2;
    }
}
Object.defineProperty(myObject,'b',{
    get: function(){
        return this.a *2;
    },
    enumerable:true,
    value: 6
})

上方代码报错

writable:true/false都会报错

也就是说value和writable在get情况下是不可用的 configuable和enumerable是可以用的

(2).SET

基本形式

var language = {
    set current(name){
        this.log.push(name)
    },
    log:[]
}
language.current = 'EN';
language.current = 'FA';
log(language.log); //[EN,FA];

问题

2 并不是3 所以不合理 所以get set一般是成对出现的

var obj = {
    get a(){
        return 2;
    }
}
obj.a = 3;
log(obj.a)//2

全部都写死，也不会改变

var obj = {
    get a(){
        return 2;
    },
    set a(val){
        return this.a*2
    }
}
obj.a = 3;
log(obj.a);//4

合理的

var obj = {
    get a(){
     return this._a;
    },
    set a(val){
     return   this._a = val *2
    }
}
obj.a = 3;
log(obj.a);//6

总结

getter setter操作，覆盖了原本的 [[get]],[[put]]