目標(biāo)
- 使用簡寫屬性名稱
- 使用簡寫方法名稱
- 使用計算屬性名稱
問題
哪些部分是冗余的?
const person={
name:name,
address:address,
sayHello:function(){/*......*/},
sayName:function(){/*......*/}
sayAddress:function(){/*......*/}
}
簡寫屬性名稱
//ES5
const message={text:text} //將屬性text賦給text變量
//ES6
const message={ text } //將屬性text分配給名為text的變量
與解構(gòu)結(jié)合使用
let {count} = stateManger.getState(); // 從轉(zhuǎn)態(tài)管理器中檢索出count
count+=amount;
stateManger.update({count}) //設(shè)置狀態(tài)管理器中的count
// 實(shí)際是{count:count} 第一行取出和第三行設(shè)置，這種對稱性很優(yōu)雅
簡寫方法名稱
簡寫方法會被視為匿名函數(shù)院仿，而不是命名函數(shù),這意味著不能通過函數(shù)內(nèi)部的名稱來引用函數(shù)
const fn={
foo(n){
if(n<=2) return 1;
return foo(n-1) + foo(n-2)
}
}
fn.foo(7) //報錯潦牛，foo未定義
上述問題只有在函數(shù)自引用的情況下版保，才會有關(guān)系拐揭，函數(shù)就像遞歸一樣引用了自己
const person={
sayHello:function sayHello(){
console.log(123);
}
}
person.sayHello(); //123
使用this解決這個問題
//this.foo在函數(shù)的上下文中調(diào)用娶吞，如果被獨(dú)立開玄窝，就沒用了
const fn={
foo(n){
if(n<=2) return 1;
return this.foo(n-1) + this.foo(n-2)
}
}
const {foo}=fn;
console.log(fn.foo(7)); //13
const fn2={foo};
console.log(fn2.foo(7)); //13
const fn3={f:foo};
console.log(fn3.f(7)); //this.foo is not a function
函數(shù)使用自我引用時牵寺，請不要使用簡寫方法名稱
計算屬性名稱
計算屬性允許在對象字面量上使用動態(tài)屬性名稱
const property='color';
const flower={
[property]:'red'
}
console.log(flower.property); //undefined
console.log(flower.color); //red
console.log(flower.color); //red
