es6-對象擴展

在es6中經過多種方式來增強對象的使用,經過簡單的語法擴展,來提供更多操做對象及與對象交互的方法。css

字面量語法擴展

當對象屬性名和變量名相同時,賦值的時候能夠省略變量名:es6

function getObj(name, age) {
  return {
    name,
    age
  }
}
複製代碼

對象方法定義的簡寫。省略 function 關鍵字和冒號:post

var person = {
  name: 'wozien',
  sayName() {
    console.log(this.name);
  }
};

console.log(person.name); // wozien
複製代碼

在es5中,若是想要經過計算獲得屬性名,只能經過對象加方括號的方式在定義變量屬性,不能用點:ui

const lastName = 'last name';
const person = {
  'first name': 'wozien'
};
person[lastName] = 'zhang';
複製代碼

在es6中,容許在對象字面量時用方括號來定義可計算的屬性,擴展內容許任意的js表達式:this

const lastName = 'last';
const person = {
  'first name': 'wozien',
  [lastName + ' name']: 'zhang'
};

console.log(person);
複製代碼

新增對象方法

利用 Object.is 判斷兩個值是否全相等:es5

console.log(Object.is(5, '5')); // false
console.log(Object.is(5, 5));  // true
複製代碼

該方法基本和全等 === 相同,可是判斷正負0和NaN有所區別:spa

console.log(+0 === -0); // true
console.log(Object.is(+0, -0)); // false

console.log(NaN === NaN);  // false
console.log(Object.is(NaN, NaN));  // true
複製代碼

利用 Object.assign 合併對象:code

const receiver = {};

Object.assign(
  receiver,
  {
    type: 'js',
    name: 'file.js'
  },
  {
    type: 'css'
  }
);

console.log(receiver); // { type: 'css', name: 'file.js' }
複製代碼

該方法會合並後面的對象到第一個對象,重複的屬性值以最後一個對象爲準。該方法爲淺拷貝,若是屬性值爲對象,拷貝的是對象的引用。對象

增量對象的原型

利用Object.setPrototype() 方法修改對象的原型:get

let person = {
  say() {
    console.log('person');
  }
};

let dog = {
  say() {
    console.log('dog');
  }
};

let friend = Object.create(person);
console.log(friend.say()); // person
Object.setPrototypeOf(friend, dog);
console.log(friend.say());  // dog
複製代碼

利用 super 調用原型對象方法:

let person = {
  name: 'person',
  say() {
    console.log(this.name);
  }
};

let friend = {
  name: 'friend',
  say() {
    super.say();
  }
};

Object.setPrototypeOf(friend, person);
console.log(friend.say()); // friend
複製代碼

上面friend對象的原型設置爲person,在friend的say方法中利用 super.say 調用了person的say方法。可是輸出的結果卻不是'person'。這是利用 super 調用原型方法的時候,會把方法的 this 對象指向super 調用環境的 this 對象。上面代碼至關於:

// ...
let friend = {
  name: 'friend',
  say() {
    Object.getPrototypeOf(friend).say.call(this);
  }
};
複製代碼

>>>原文地址

相關文章
相關標籤/搜索