深入理解ES6之《擴充套件物件》

2022-08-05 17:15:17 字數 3804 閱讀 3026

當物件字面量只有一個屬性的名稱時,js引擎會在可訪問作用域中查詢其同名變數;如果找到則該變數的值被賦給物件字面量裡的同名屬性

function createperson(name, age) 

}

var person = 

}

在es5中如果屬性名中包含空格或者是動態的字串變數作為屬性名,則需要用方括號來訪問,如下所示

var person = {},

lastname = 'last name';

person["first name"] = 'li'

person[lastname] = 'yun hua'

這種方式適用於屬性名提前已經或可被字串字面量表示的情況,如果屬性名“first name”被包含在一個變數中或者需要通過計算才得到該變數的值

es6支援了可計算屬性名

比方說上面的**es6可簡化寫成如下:

let lastname = 'last name';

var person =

甚至方括號中內容同樣可以使用表示式作為屬性的可計算名稱

var suffix = 'name'

var person =

也就是說任何可用於物件例項括號記法的屬性名同樣可以作為物件字面量中計算屬性名

由於全等===有一些特例:1、+0和-0相等 2、nan和nan不完全相等

故es6引用了object.is方法來彌補全等運算子的不準備運算

對object.is方法來說,其運算結果大部分情況與===運算子相同,唯一區別在於+0和-0被識別為不相等,nan和nan被識別為相等

object.assign方法接受任意數量的源物件,並按指定的順序將屬性複製到接收物件中,所以如果多個源物件具有同名屬性,則排位靠後的源物件會覆蓋排位靠前的

有一個需要特別注意的點是object.assign方法不能將提供者的訪問器屬性複製到接收物件中,由於object.assign執行了賦值操作,因此提供者的訪問器屬性最終會被轉變為接收物件中的一個資料屬性

var receiver = {},

supplier =

}object.assign(receiver, supplier)

var desc = object.getownpropertydescriptor(receiver, "name")

console.log(desc.value)

console.log(desc.get)//undefined

在es5嚴格模式下,對於物件字面量重複屬性則會丟擲錯誤

但在es6嚴格模式下,不會報錯,取值會選取最後一個

'use strict'

var person =

console.log(person.name)//angela

所有數字鍵按升序排序

所有字串按照它們被加入物件的順序排序

所有symbol鍵按照它們被加入物件的順序排序

var obj = 

obj.d = 1

console.log(object.getownpropertynames(obj).join(''))//012acbd

es5中可以通過object.getprototypeof來返回任意指定物件的原型

es6中新增了object.setprototypeof來改變任意指定物件的原型

var person = 

}var dog =

}let friend = object.create(person)

console.log(friend.getgreeting())//hello

console.log(object.getprototypeof(friend) === person)//true

object.setprototypeof(friend, dog)

console.log(friend.getgreeting())//woof

console.log(object.getprototypeof(friend) === dog)//true

在es5中如果要呼叫父類的方法,則一般是通過如果這種方式,也就是獲得原型物件再通過call來呼叫

object.getprototypeof(this).getgreeting.call(this)

var person = 

}var dog =

}var friend =

}object.setprototypeof(friend, person)

console.log(friend.getgreeting())//hello,hi!

console.log(object.getprototypeof(friend) === person)//true

object.setprototypeof(friend,dog)

console.log(friend.getgreeting())//woof,hi!

console.log(object.getprototypeof(friend) === dog)//true

但是在多重繼承的情況下,上述方法則會出錯,舉例來說

var person = 

}var friend =

}object.setprototypeof(friend, person)

var relative = object.create(friend)

console.log(person.getgreeting())//hello

console.log(friend.getgreeting())//hello,hi!

console.log(relative.getgreeting())// 報錯 uncaught rangeerror: maximum call stack size exceeded

es6中通過super關鍵字可輕鬆解決問題

var person = 

}var friend =

}object.setprototypeof(friend, person)

var relative = object.create(friend)

console.log(person.getgreeting())//hello

console.log(friend.getgreeting())//hello,hi!

console.log(relative.getgreeting())// hello,hi

大家可能會疑惑super是怎麼做到知道真正的呼叫物件是哪個

這其實是因為es6中正式將方法定義為一個函式,它會有一個內部的[[homeobject]]屬性來容納這個方法從屬的物件

var person = 

}function sharegreeting(params)

person.getgreeting方法的[[homeobject]]屬性為person,而sharegreeting函式未將其賦值給一個物件,因而沒有明確定義其[[homeobject]]屬性

super的所有引用都通過[[homeobject]]屬性來確定後續的執行過程

在[[homeobject]]屬性上呼叫object.getprototypeof方法來檢索原型的引用

搜尋原型找以同名函式

設定this繫結並呼叫相應的方法

《深入理解ES6》筆記(2)

如果要對不同字元進行排序或者比較操作,會存在一種可能,它們是等效的。在對比字串之前,一定先把它們標準化為同一種形式。 let firstnormalized first normalize 當一個正規表示式新增了u修飾符時,它就從編碼單元操作模式切換為字元模式。 console log u tes...

深入理解ES6箭頭函式中的this

簡要介紹 箭頭函式中的this,指向與一般function定義的函式不同,比較容易繞暈,箭頭函式this的定義 箭頭函式中的this是在定義...

《深入理解ES6》之擴充套件物件的功能性

當一個物件的屬性與本地變數同名時,不必再寫冒號和值,簡單地只寫屬性名即可。 function createperson name age 相當於function createperson name age es6中對物件字面量定義方法的語法進行了改進,消除了冒號和function關鍵字。 var p...