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

一、函数名

（1）name

var f = function (){}
console.log(f.name); //es5 输出"" es6输出f

（2）anonymous

console.log(new Function().name);
console.log((new Function).name);
//输出anonymous

（3）bound foo

call/apply就不行,因为会执行

function foo(){}
console.log(foo.bind({}).name); //输出bound foo

二、对象拓展

（1）属性简写

变量和属性相同可简写

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

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

（2）方法简写

const person = {
	age: '12',
	say(){console.log(this.age);}
}
person.say(); //12

let age = '12';
const person = {
	age,
	say(){console.log(this.age);}
}
person.say(); //12

（3）属性拼接

let obj = {};
obj.foo = true;
obj['f'+'o'+'o'] = false;
console.log(obj)//{ foo: false }
 
let a = 'hello';
let b = 'world';
let obj = {
    [a+b]:true, 
    ['hello'+b]:123, 
    ['hello'+'world']: undefined
}
console.log(obj) //{helloworld:undefined}

（4）属性是非字符串

会有相应的包装，转化为字符串

var myObject = {};
myObject[true] = 'foo';
myObject[3] = 'bar';
myObject[myObject] = 'baz';
log(myObject['true']); //输出foo
log(myObject['3']); //输出bar
log(myObject[myObject]); //输出baz  
log(myObject["[object Object]"]); //输出baz  

const a = {a:1};
const b = {b:2};
const obj = {
    [a]: 'valueA',
    [b]: 'valueB'
}
console.log(obj) //会经过包装类 输出{[object Object]:"valueB"}

对象属性会隐式转换成字符串，即调用toString，对象toString后是[object Object]

（5）获取方法名

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

三、描述符

（1）getOwnPropertyDescriptor

获取该属性的属性描述符

let obj = {a: 2};
console.log(Object.getOwnPropertyDescriptor(obj,'a')); //参数：对象、属性（字符串）
// 下面输出的就是描述配符置对象、里面的就是描述符：
// {
//     configurable: true, //可配置(包括删除)
//     enumerable: true, //可遍历
//     value: 2, //属性值
//     writable: true //可写
// } 

（2）defineProperty

定义属性，并可配置该属性的属性描述符

let obj = {};
Object.defineProperty(obj, 'a', { //参数：对象、属性（字符串）、属性描述配置
    value: 2,
    enumerable: true,
    writable: true,
    configurable: true
})
console.log(obj.a); //2
console.log(Object.getOwnPropertyDescriptor(obj, 'a')); //注意这是Object构造器上的方法，无法通过原型链继承
// 输出 { value: 2, writable: true, enumerable: true, configurable: true }

（3）静默失败

操作不生效，但是不报错

严格模式下会报错，普通模式下不报错

"use strict"
let obj = {};
Object.defineProperty(obj, 'a', {
    value: 2,
    enumerable: true,
    writable: false,
    configurable: true
})
obj.a = 3; //不能修改
console.log(obj.a); //2

delete obj.a; //但是可以删，需要配置configurable: false才可以阻止删除
console.log(obj); //{}

四、getter和setter

（1）默认操作

默认操作分为 [[Get]] 和 [[Set]]

1. [[Get]]默认操作就是在获取属性时默认会执行的操作
2. [[Set]]默认操作就是在修改属性时默认会执行的操作

获取属性和修属性的底层原理

let obj = {a: 1};
obj.a; //获取属性[[Get]]（默认操作），查找当前属性如果没有，查找原型
obj.a = 3; //赋值操作[[Put]]（默认操作）
// 步骤：
// 1. getter/setter
// 2. writable: false, 不让你改
// 3. 赋值

如果定义了getter和setter操作，就会覆盖原本的 [[Get]] 和 [[Set]] 操作

（2）GET

作用

可以重写[[Get]]默认操作，访问属性时调用

基本形式

var obj = {
    log:['example','test'],
    get latest(){ // 用get方式定义了一个获取属性的默认操作
        if(this.log.length === 0)return undefined;
        return this.log[this.log.length-1]
    }
}
console.log(obj.latest);//test

伪属性：用get方式重写的获取属性的默认操作叫做伪属性

属性描述配置在有get情况下：

1. value和writable是不可用的（功能重复）
2. configuable和enumerable是可以用的

var myObject = {
    get a() {
        return 2;
    }
}
Object.defineProperty(myObject, 'b', {
    get: function() {
        return this.a * 2;
    },
    enumerable: true,
    // value: 6, 
    // writable: ture  // value和writable开启会报错
});

console.log(myObject.a); // 2
console.log(myObject.b); // 4

（2）set

作用

可以重写[[Put]]默认操作，修改属性时调用

基本形式

var language = {
    set current(name){ //这里必要要给参数
        this.log.push(name)
    },
    log:[]
}
language.current = 'EN'; //这里值就是set的参数
language.current = 'FA';
console.log(language.log); //[EN,FA];

get与set一般情况下都是成对出现

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