成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

深入理解ES6之《擴(kuò)展對(duì)象》

fireflow / 454人閱讀

摘要:屬性初始值的簡(jiǎn)寫當(dāng)對(duì)象字面量只有一個(gè)屬性的名稱時(shí),引擎會(huì)在可訪問作用域中查找其同名變量如果找到則該變量的值被賦給對(duì)象字面量里的同名屬性對(duì)象方法的簡(jiǎn)寫可計(jì)算屬性名在中如果屬性名中包含空格或者是動(dòng)態(tài)的字符串變量作為屬性名,則需要用方括號(hào)來(lái)訪問,

屬性初始值的簡(jiǎn)寫

當(dāng)對(duì)象字面量只有一個(gè)屬性的名稱時(shí),JS引擎會(huì)在可訪問作用域中查找其同名變量;如果找到則該變量的值被賦給對(duì)象字面量里的同名屬性

function createPerson(name, age) {
  return {
    name,
    age
  }
}
對(duì)象方法的簡(jiǎn)寫
var person = {
  name: "angela",
  sayName() {
    console.log(this.name)
  }
}
可計(jì)算屬性名

在ES5中如果屬性名中包含空格或者是動(dòng)態(tài)的字符串變量作為屬性名,則需要用[]方括號(hào)來(lái)訪問,如下所示

var person = {},
  lastName = "last name";
person["first name"] = "Li"
person[lastName] = "yun hua"

這種方式適用于屬性名提前已經(jīng)或可被字符串字面量表示的情況,如果屬性名“first name”被包含在一個(gè)變量中或者需要通過計(jì)算才得到該變量的值
ES6支持了可計(jì)算屬性名
比方說上面的代碼ES6可簡(jiǎn)化寫成如下:

let lastName = "last name";
var person = {
  "first name": "Li",
  [lastName]: "yun hua"
}

甚至方括號(hào)中內(nèi)容同樣可以使用表達(dá)式作為屬性的可計(jì)算名稱

var suffix = "name"
var person = {
  ["first " + suffix]: "Li",
  ["last " + suffix]: "yun hua"
}

也就是說任何可用于對(duì)象實(shí)例括號(hào)記法的屬性名同樣可以作為對(duì)象字面量中計(jì)算屬性名

Object.is

由于全等===有一些特例:1、+0和-0相等 2、NaN和NaN不完全相等
故ES6引用了Object.is方法來(lái)彌補(bǔ)全等運(yùn)算符的不準(zhǔn)備運(yùn)算
對(duì)Object.is方法來(lái)說,其運(yùn)算結(jié)果大部分情況與===運(yùn)算符相同,唯一區(qū)別在于+0和-0被識(shí)別為不相等,NaN和NaN被識(shí)別為相等

Object.assign

Object.assign方法接受任意數(shù)量的源對(duì)象,并按指定的順序?qū)傩詮?fù)制到接收對(duì)象中,所以如果多個(gè)源對(duì)象具有同名屬性,則排位靠后的源對(duì)象會(huì)覆蓋排位靠前的
有一個(gè)需要特別注意的點(diǎn)是Object.assign方法不能將提供者的訪問器屬性復(fù)制到接收對(duì)象中,由于Object.assign執(zhí)行了賦值操作,因此提供者的訪問器屬性最終會(huì)被轉(zhuǎn)變?yōu)榻邮諏?duì)象中的一個(gè)數(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ù)的對(duì)象字面量屬性

在ES5嚴(yán)格模式下,對(duì)于對(duì)象字面量重復(fù)屬性則會(huì)拋出錯(cuò)誤
但在ES6嚴(yán)格模式下,不會(huì)報(bào)錯(cuò),取值會(huì)選取最后一個(gè)

"use strict"
var person = {
  name: "lisa",
  name: "angela"
}
console.log(person.name)//angela
自有屬性的枚舉順序

所有數(shù)字鍵按升序排序

所有字符串按照它們被加入對(duì)象的順序排序

所有symbol鍵按照它們被加入對(duì)象的順序排序

var obj = {
  a: 1,
  0: 1,
  c: 1,
  2: 1,
  b: 1,
  1: 1
}
obj.d = 1
console.log(Object.getOwnPropertyNames(obj).join(""))//012acbd
改變對(duì)象的原型

ES5中可以通過Object.getPrototypeOf來(lái)返回任意指定對(duì)象的原型
ES6中添加了Object.setPrototypeOf來(lái)改變?nèi)我庵付▽?duì)象的原型

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
簡(jiǎn)化了原型訪問的Super引用

在ES5中如果要調(diào)用父類的方法,則一般是通過如果這種方式,也就是獲得原型對(duì)象再通過call來(lái)調(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

但是在多重繼承的情況下,上述方法則會(huì)出錯(cuò),舉例來(lái)說

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())// 報(bào)錯(cuò) 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

大家可能會(huì)疑惑super是怎么做到知道真正的調(diào)用對(duì)象是哪個(gè)
這其實(shí)是因?yàn)镋S6中正式將方法定義為一個(gè)函數(shù),它會(huì)有一個(gè)內(nèi)部的[[HomeObject]]屬性來(lái)容納這個(gè)方法從屬的對(duì)象

var person = {
  // 是方法
  getGreeting() {
    return "hello"
  }
}
function shareGreeting(params) {
  return "Hi!"
}

person.getGreeting方法的[[HomeObject]]屬性為person,而shareGreeting函數(shù)未將其賦值給一個(gè)對(duì)象,因而沒有明確定義其[[HomeObject]]屬性

super的所有引用都通過[[HomeObject]]屬性來(lái)確定后續(xù)的運(yùn)行過程

在[[HomeObject]]屬性上調(diào)用Object.getPrototypeOf方法來(lái)檢索原型的引用

搜索原型找以同名函數(shù)

設(shè)置this綁定并調(diào)用相應(yīng)的方法

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://m.hztianpu.com/yun/112446.html

相關(guān)文章

  • 深入理解ES6擴(kuò)展對(duì)象

    摘要:屬性初始值的簡(jiǎn)寫當(dāng)對(duì)象字面量只有一個(gè)屬性的名稱時(shí),引擎會(huì)在可訪問作用域中查找其同名變量如果找到則該變量的值被賦給對(duì)象字面量里的同名屬性對(duì)象方法的簡(jiǎn)寫可計(jì)算屬性名在中如果屬性名中包含空格或者是動(dòng)態(tài)的字符串變量作為屬性名,則需要用方括號(hào)來(lái)訪問, 屬性初始值的簡(jiǎn)寫 當(dāng)對(duì)象字面量只有一個(gè)屬性的名稱時(shí),JS引擎會(huì)在可訪問作用域中查找其同名變量;如果找到則該變量的值被賦給對(duì)象字面量里的同名屬性 f...

    marek 評(píng)論0 收藏0
  • 深入理解ES6《用模塊封裝代碼》

    摘要:導(dǎo)入模塊的代碼執(zhí)行后,實(shí)例化過的模塊被保存在內(nèi)存中,只要另一個(gè)語(yǔ)句引用它就可以重復(fù)使用它和的一個(gè)重要的限制是它們必須在其它語(yǔ)句和函數(shù)之外使用,也就是說不允許出現(xiàn)在語(yǔ)句中,不能有條件導(dǎo)出或以任何方式動(dòng)態(tài)導(dǎo)出。 什么是模塊 模塊是自動(dòng)運(yùn)行在嚴(yán)格模式下并且沒有辦法退出運(yùn)行的Javascript代碼 在模塊的頂部this的值是undefined 其模塊不支持html風(fēng)格的代碼注釋除非用def...

    BigTomato 評(píng)論0 收藏0
  • 深入理解ES6《用模塊封裝代碼》

    摘要:導(dǎo)入模塊的代碼執(zhí)行后,實(shí)例化過的模塊被保存在內(nèi)存中,只要另一個(gè)語(yǔ)句引用它就可以重復(fù)使用它和的一個(gè)重要的限制是它們必須在其它語(yǔ)句和函數(shù)之外使用,也就是說不允許出現(xiàn)在語(yǔ)句中,不能有條件導(dǎo)出或以任何方式動(dòng)態(tài)導(dǎo)出。 什么是模塊 模塊是自動(dòng)運(yùn)行在嚴(yán)格模式下并且沒有辦法退出運(yùn)行的Javascript代碼 在模塊的頂部this的值是undefined 其模塊不支持html風(fēng)格的代碼注釋除非用def...

    AbnerMing 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<