【深入淺出ES6】物件

Eric_zhang發表於2019-03-04
物件

【深入淺出ES6】物件

對Object的擴充套件

物件的類別

  1. 普通物件
  2. 奇異物件
  3. 標準物件
  4. 內建物件

物件字面量語法的擴充套件

  1. 屬性初始化器的簡寫語法(和物件key同名的變數名可以省略)
let time = 500, name = 'Tom'
let obj = {
    name,
    time
}
複製程式碼
  1. 屬性方法的簡寫語法
var person = {
    name: 'Tom',
    sayHello(){
        console.log('hello world')
    }
}
複製程式碼
  1. 使用[]包含計算屬性變數名，特別用於遍歷陣列建立物件時屬性名是未知的情況
var arr = ['name','age','weight']
var value = ['Tome','18','130']
var person = Object.create(null)
for(let key in arr){
    person = Object.assign(person, {
        [arr[key]]: value[key]
    })
    
}
console.log(person) // {name: "Tome", age: "18", weight: "130"}
複製程式碼

新增的Object方法

  1. Object.is() 用於比較嚴格相等，修復了'==='部分怪異行為
    console.log(+0 === -0) //true
console.log(Object.is(+0, -0)) //false

console.log(NaN === NaN) //false
console.log(Object.is(NaN, NaN)) //true
複製程式碼
  2. Object.assign()
    • 混入(Mixin),第一個引數為屬性接受者物件，將後面多個供應者物件的屬性與方法統一合併到接受者上，並且將接受者物件返回；
    • 命名相同的屬性，後者供應者物件的屬性會覆蓋前面的
    • 供應者的訪問器屬性會被轉換成接受者的資料屬性
     var o, d, obj={}

 o = { get foo() { return 17; } };
 Object.assign(obj, o)
 console.log(obj) // {foo: 17}

 d = Object.getOwnPropertyDescriptor(obj, "foo");
 console.log(d) // {value: 17, writable: true, enumerable: true, configurable: true}
複製程式碼
    使用Object.assign()後，o的get屬性被轉換成obj的資料屬性，也就是d.value = 17

更改物件的原型

ES5中新增了Object.getPrototypeOf()方法來獲取指定物件的原型 ES6中新增了修改指定物件原型的方法：Object.setPrototypeOf(指定物件, 目標原型)，這樣設定完後，指定物件就繼承了新的目標原型的方法和屬性

使用super引用訪問物件的原型

super是指向當前物件的原型的一個指標，實際上就是Object.getPrototypeOf(this)的值，使用super引用後，便可以訪問原型物件的任何屬性和方法 注意：super只能在ES6語法的簡寫屬性方法中使用，否則會報錯

// 在ES6簡寫方法語法中引用super可以正常訪問
var person= {
getName(){
	console.log('super',super.constructor())
}}
person.getName() 

// 使用傳統的屬性方法的語法，引用super會報錯
var person= {
getName: function(){
    // Uncaught SyntaxError: 'super' keyword unexpected here
	console.log('super',super.constructor())
}}
person.getName()
複製程式碼

相關文章