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)     //""

主頁傳送門

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章