ES6 對象的擴(kuò)展

1. 屬性的簡潔表示法

  • ES6允許直接寫入變量和函數(shù)作為對象的屬性和方法。
var foo = 'bar';
var baz = { foo };
baz // {f00:'bar'};

上面表明,ES6允許在對象中寫屬性名,不寫屬性值。

function f(x,y){
  return { x, y }
}
f(1, 2)  // { x:1, y: 2 }
  • 除了屬性可以簡寫,方法也可以簡寫。
var  o = {
   method(){
   return 'hello';
  }
}
//等同于
var  o = {
   method:function(){
   return 'hello';
   }
}

2. 屬性名表達(dá)式

我們知道js定義對象的屬性有兩種方法

var obj = {};
//方法一
obj.foo=  true;
//方法二
obj['foo'] = true;
  • 方法一是直接使用標(biāo)識符作為屬性名;
  • 方法二是使用表達(dá)式作為屬性名,這是要將表達(dá)式放在方括號內(nèi);

但是,如果要使用字面量方式定義對象(使用大括號),ES5只能用方法一(標(biāo)識符)定義屬性;

var obj = {
   foo : true
}

ES6允許字面量定義對象時(shí)使用方法二(表達(dá)式

var str = "foo";
var obj = {
   [str] : true
}
//方法也可以
var obj = {
   [str](){
    return 2;
 }
}

3. 方法的name屬性

函數(shù)的name屬性返回函數(shù)名。對象的方法也是函數(shù),也有name屬性。

var person = { 
  sayName(){
     console.log(this.firstName)
    },
get firstName(){
    return "yujia"
    }
  }
person.sayName.name // 'sayName'
person.firstName.name //'get firstName'

4. Object.is()

Object.is()用來比較兩個(gè)值是否嚴(yán)格相等,它和嚴(yán)格運(yùn)算符("===")的行為基本一致。

Object.is('foo', 'foo');//true
Object.is({}, {});//false

Object.is()嚴(yán)格運(yùn)算符差異有兩個(gè)

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

5. Object.assign()

Object.assign()方法用來將原對象的所有可枚舉屬性復(fù)制到目標(biāo)對象。
它至少需要兩個(gè)對象作為參數(shù),第一個(gè)是目標(biāo)對象,后面的參數(shù)是源對象。

var target  = { a: 1 };
var source1 = { b: 2 };
var source2 = { c: 3 };
Object.assign(target, source1, source2)//  
target  // { a:1 , b:2, c:3 };
  • 如果目標(biāo)對象和源對象有同名屬性,源對象的屬性將覆蓋目標(biāo)屬性。
  • Object.assign()不會復(fù)制不可枚舉屬性(enumerable=false)和繼承的屬性。

6. 對象的屬性遍歷

ES6一共有6種方法可以遍歷對象的屬性

1. for...in遍歷對象自身的和繼承的可枚舉屬性。
var obj = {a:1,b:2,c:3}
for(let i in obj){
    console.log(i)
}

遍歷繼承屬性

function person(){
  this.name = 'yujia';
  this.age = 26;
}
person.prototype.sayName = function(){ 
    console.log(this.name)
 } 
var person1 = new person();
for(let i in person1){ 
   console.log(i)
}
//name
//age 
//sayName
2. Object.keys(obj)遍歷自身可枚舉的屬性(不包含繼承屬性),返回屬性組成的數(shù)組。
var obj = {a:1,b:2,c:3};
obj.__proto__.d = 4;
Object.keys(obj);
///["a", "b", "c"]
3. Object.getOwnPropertyNames()遍歷自身所有屬性(包含不可枚舉屬性),返回屬性組成的數(shù)組。
var person = {name: "yujia", age: 26};
Object.defineProperty(person,'add',{
  value : 37,
  writable : true,
  enumerable : false,
  configurable : true
})
person.__proto__.sayName = ''
//for in  不可枚舉 add
for(let i in person){console.log(i)}
//name
//age
//sayName 
Object.getOwnPropertyNames(person)
// ["name", "age", "add"]
4. Reflect.ownKeys(obj),返回一個(gè)對象自身的所有屬性組成的數(shù)組(不包括繼承屬性)。
var person = {name: "yujia", age: 26};
person.__proto__.sayName = ''
Object.defineProperty(person,'add',{
  value : 37,
  writable : true,
  enumerable : false,
  configurable : true
})
person.__proto__.sayName = ''
Reflect.ownKeys(person) //["name", "age", "add"]

7. _proto_屬性,Object.setPrototypeOf()Object.getPrototypeOf();

_proto_屬性用來設(shè)置或讀取當(dāng)前對象的prototype(原型對象)

var obj = {
   method:function(){...}
}
obj._proto_ = someOtherObj;

但是不推薦使用,而是使用 Object.setPrototypeOf()(寫操作)、 Object.getPrototypeOf()(讀操作)、或 Object.create()(生成操作) 代替。

而現(xiàn)實(shí)上, _proto_調(diào)用的是Object.prototype._proto_,具體的實(shí)現(xiàn)如下;

Object.defineProperty(Object.prototype,"_proto_",{
   get(){
       let  _thisObj  = Object(this);
        return Object.getPrototypeOf(_thisObj);
       },
   set(){
        if(this === undefined||this === null){
              throw new TypeError();
        }
        if(!isObject(this)){
             return undefined;
        }
        if(!isObject(proto)){
             return undefined;
        }
       let status = Reflect.setPrototypeOf(this, proto);
     }
   })
function isObject(value){
  return  Object(value) == value;
  }
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。