JavaScriptES6对象之属性简洁表达式及属性名表达式

ES6中对象的字面量是发生了翻天覆地的变化，变得非常简便

目录

属性简洁表达式

属性名表达式

方法的name属性

---

属性简洁表达式

ES6中允许使用变量来作为属性和方法，书写更简便。

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

这种方法的简写，对于函数返回值返回对象非常的方便

function getpoint() {
     const x = 1;
     const y = 10;
     return {
         x,
         y,
     }
}
console.log(getpoint());        //{x : 1,y : 10}

除了属性可以简写，方法也是可以简写的

const obj = {
     method(){
         return "Hello!";
     }
}
console.log(obj.method());  //Hello
//等同于
const obj = {
     method : function(){
         return "Hello!"
     }
}

属性的赋值器和取值器事实上也是采用这种写法。

const cart = {
     _wheels : 4,
     get wheels() {
         return this._wheels;
     },
     set wheels(value) {
         value < this._wheels ? console.log("数值太小了") : this._wheels = value;
     }
}
console.log(cart.wheels = 5);
console.log(cart);

注意：简洁书写属性和方法的属性名和方法名总是字符串，所以不会出现关键字和保留字出错的现象。

const obj = {
     class() {
        console.log("class");
    }
}
console.log(obj.class());
//等同于
const obj = {
     "class" : function(){
         //.
     }
}

如果一个方法是一个Generator函数，那么前面要加上星号。

const obj = {
     *m() {
         yield "hello world";
     }
}
console.log(obj.m());

属性名表达式

ES5的时候访问一个属性或方法有两种形式，一是obj.prop；而是obj[prop]。ES5是不可以用第二种属性名表达式直接定义在对象字面量里的属性名和方法名的，ES6采用了这种方法，对象字面量里的属性名和方法名可以用属性名表达式的方式。

 let propKey = 'foo';
let obj = {
    [propKey] : true,
    ["a" + "bc"] : 123,
 }
console.log(obj);       //{foo : true , abc : 123}
console.log(obj.foo);   //true
console.log(obj['foo']) //true
console.log(obj[propKey])   //true

表达式还可以定义方法名 使用表达式定义方法属性。注意：表达式值修改的话，方法名和属性名不会修改。

let funName = "fun";
const obj = {
     [funName]() {
         console.log(true);
    }
}
console.log(obj.fun());    //true
console.log(obj[funName]());    //true
funName = "func";
console.log(obj.fun());        //true
console.log(obj.func());    //报错  func is not default
console.log(obj[funName]());    //报错  func is not default

注意属性名表达式和简洁表达式不能同时使用，否则会报错。

const foo = 'bar';
const bar = 'abc';
const obj = {
     [foo]           //error
};
console.log(obj);

方法的name属性

函数的name属性，返回函数名，对象方法也是函数，因此也有name属性。

const person = {
     sayName() {
         console.log("Hello");
     }
}
console.log(person.sayName.name);    //sayName

如果对象的方法使用了存取器，则name属性不是在该方法上面，而是在该方法的属性的描述对象的get和set属性上面，返回值是方法名前加上get和set。

const obj = {
     // _foo : 4,
     get foo(){
         return this._foo;
    },
    set foo(value){
        this._foo = value;
    }
}
// console.log(obj.foo.name);
const descriptor = Object.getOwnPropertyDescriptor(obj,"foo");              //属性的描述对象
console.log(descriptor.get.name)
console.log(descriptor.set.name);

有两种特殊情况，bind方法创造的函数，name属性返回bound加上原函数的名字。Function构造函数创造的函数，那么属性返回anonymous。、

console.log((new Function()).name);     anonymous
function fun(){
    console.log(1);
}
console.log(fun.bind().name);           //bound fun

如果对象的方法是一个Symbol值，那么name属性返回的是这个Symbol值的描述。

const key1 = Symbol('description');
const key2 = Symbol();
let obj  = {
    [key1](){
     },
    [key2](){
    }
}
console.log(obj[key1].name);    //description
console.log(obj[key2].name)     //""

主页传送门