摘要:屬性初始值的簡寫當(dāng)對象字面量只有一個屬性的名稱時,引擎會在可訪問作用域中查找其同名變量如果找到則該變量的值被賦給對象字面量里的同名屬性對象方法的簡寫可計算屬性名在中如果屬性名中包含空格或者是動態(tài)的字符串變量作為屬性名,則需要用方括號來訪問,
屬性初始值的簡寫
當(dāng)對象字面量只有一個屬性的名稱時,JS引擎會在可訪問作用域中查找其同名變量;如果找到則該變量的值被賦給對象字面量里的同名屬性
function createPerson(name, age) { return { name, age } }對象方法的簡寫
var person = { name: "angela", sayName() { console.log(this.name) } }可計算屬性名
在ES5中如果屬性名中包含空格或者是動態(tài)的字符串變量作為屬性名,則需要用[]方括號來訪問,如下所示
var person = {}, lastName = "last name"; person["first name"] = "Li" person[lastName] = "yun hua"
這種方式適用于屬性名提前已經(jīng)或可被字符串字面量表示的情況,如果屬性名“first name”被包含在一個變量中或者需要通過計算才得到該變量的值
ES6支持了可計算屬性名
比方說上面的代碼ES6可簡化寫成如下:
let lastName = "last name"; var person = { "first name": "Li", [lastName]: "yun hua" }
甚至方括號中內(nèi)容同樣可以使用表達式作為屬性的可計算名稱
var suffix = "name" var person = { ["first " + suffix]: "Li", ["last " + suffix]: "yun hua" }
也就是說任何可用于對象實例括號記法的屬性名同樣可以作為對象字面量中計算屬性名
Object.is由于全等===有一些特例:1、+0和-0相等 2、NaN和NaN不完全相等
故ES6引用了Object.is方法來彌補全等運算符的不準備運算
對Object.is方法來說,其運算結(jié)果大部分情況與===運算符相同,唯一區(qū)別在于+0和-0被識別為不相等,NaN和NaN被識別為相等
Object.assign方法接受任意數(shù)量的源對象,并按指定的順序?qū)傩詮?fù)制到接收對象中,所以如果多個源對象具有同名屬性,則排位靠后的源對象會覆蓋排位靠前的
有一個需要特別注意的點是Object.assign方法不能將提供者的訪問器屬性復(fù)制到接收對象中,由于Object.assign執(zhí)行了賦值操作,因此提供者的訪問器屬性最終會被轉(zhuǎn)變?yōu)榻邮諏ο笾械囊粋€數(shù)據(jù)屬性
var receiver = {}, supplier = { get name() { return "file.js" } } Object.assign(receiver, supplier) var desc = Object.getOwnPropertyDescriptor(receiver, "name") console.log(desc.value)//file.js console.log(desc.get)//undefined重復(fù)的對象字面量屬性
在ES5嚴格模式下,對于對象字面量重復(fù)屬性則會拋出錯誤
但在ES6嚴格模式下,不會報錯,取值會選取最后一個
"use strict" var person = { name: "lisa", name: "angela" } console.log(person.name)//angela自有屬性的枚舉順序
所有數(shù)字鍵按升序排序
所有字符串按照它們被加入對象的順序排序
所有symbol鍵按照它們被加入對象的順序排序
var obj = { a: 1, 0: 1, c: 1, 2: 1, b: 1, 1: 1 } obj.d = 1 console.log(Object.getOwnPropertyNames(obj).join(""))//012acbd改變對象的原型
ES5中可以通過Object.getPrototypeOf來返回任意指定對象的原型
ES6中添加了Object.setPrototypeOf來改變?nèi)我庵付▽ο蟮脑?/p>
var person = { getGreeting() { return "hello" } } var dog = { getGreeting() { return "woof" } } 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簡化了原型訪問的Super引用
在ES5中如果要調(diào)用父類的方法,則一般是通過如果這種方式,也就是獲得原型對象再通過call來調(diào)用
Object.getPrototypeOf(this).getGreeting.call(this)
var person = { getGreeting() { return "hello" } } var dog = { getGreeting() { return "woof" } } var friend = { getGreeting() { return Object.getPrototypeOf(this).getGreeting.call(this) + ",hi!"; } } 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 = { getGreeting() { return "hello" } } var friend = { getGreeting() { return Object.getPrototypeOf(this).getGreeting.call(this) + ",hi!"; } } 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關(guān)鍵字可輕松解決問題
var person = { getGreeting() { return "hello" } } var friend = { getGreeting() { return super.getGreeting.call(this) + ",hi!"; } } 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是怎么做到知道真正的調(diào)用對象是哪個
這其實是因為ES6中正式將方法定義為一個函數(shù),它會有一個內(nèi)部的[[HomeObject]]屬性來容納這個方法從屬的對象
var person = { // 是方法 getGreeting() { return "hello" } } function shareGreeting(params) { return "Hi!" }
person.getGreeting方法的[[HomeObject]]屬性為person,而shareGreeting函數(shù)未將其賦值給一個對象,因而沒有明確定義其[[HomeObject]]屬性
super的所有引用都通過[[HomeObject]]屬性來確定后續(xù)的運行過程
在[[HomeObject]]屬性上調(diào)用Object.getPrototypeOf方法來檢索原型的引用
搜索原型找以同名函數(shù)
設(shè)置this綁定并調(diào)用相應(yīng)的方法
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/87386.html
摘要:屬性初始值的簡寫當(dāng)對象字面量只有一個屬性的名稱時,引擎會在可訪問作用域中查找其同名變量如果找到則該變量的值被賦給對象字面量里的同名屬性對象方法的簡寫可計算屬性名在中如果屬性名中包含空格或者是動態(tài)的字符串變量作為屬性名,則需要用方括號來訪問, 屬性初始值的簡寫 當(dāng)對象字面量只有一個屬性的名稱時,JS引擎會在可訪問作用域中查找其同名變量;如果找到則該變量的值被賦給對象字面量里的同名屬性 f...
摘要:導(dǎo)入模塊的代碼執(zhí)行后,實例化過的模塊被保存在內(nèi)存中,只要另一個語句引用它就可以重復(fù)使用它和的一個重要的限制是它們必須在其它語句和函數(shù)之外使用,也就是說不允許出現(xiàn)在語句中,不能有條件導(dǎo)出或以任何方式動態(tài)導(dǎo)出。 什么是模塊 模塊是自動運行在嚴格模式下并且沒有辦法退出運行的Javascript代碼 在模塊的頂部this的值是undefined 其模塊不支持html風(fēng)格的代碼注釋除非用def...
摘要:導(dǎo)入模塊的代碼執(zhí)行后,實例化過的模塊被保存在內(nèi)存中,只要另一個語句引用它就可以重復(fù)使用它和的一個重要的限制是它們必須在其它語句和函數(shù)之外使用,也就是說不允許出現(xiàn)在語句中,不能有條件導(dǎo)出或以任何方式動態(tài)導(dǎo)出。 什么是模塊 模塊是自動運行在嚴格模式下并且沒有辦法退出運行的Javascript代碼 在模塊的頂部this的值是undefined 其模塊不支持html風(fēng)格的代碼注釋除非用def...
閱讀 2978·2021-11-23 09:51
閱讀 3609·2021-10-13 09:39
閱讀 2493·2021-09-22 15:06
閱讀 881·2019-08-30 15:55
閱讀 3147·2019-08-30 15:44
閱讀 1778·2019-08-30 14:05
閱讀 3434·2019-08-29 15:24
閱讀 2362·2019-08-29 12:44