ES6 關於對象的擴展 頂 原 薦

今天來簡單說下ES6 中對象的擴展

首先回顧傳統的對象表示法

let person={
    'name':'zhang',
    'age':'20',
    'play':function(){
        alert('play!')
    }
}

再來看看ES6中寫法

var name='zhang';
var age=20;
var person={name,age};
console.log(person) // {name: "zhang", age: 20};

這是對象的屬性，那麼對象的方法呢

var person={
    play(){
        alert('ES6 中的play!');
    }
}

不難看出，ES6 在寫法上簡潔了很多。

字面量表達式

即用字面量定義一個對象的時候，可以用表達式作爲對象的屬性名或者方法名。

看例子

var m="my";
var n="name";
var p="play";

var person={
    [ m+n ]:'zhang',
    [ m+p ](){
        return "play";
    }
};
console.log(person.myname)// zhang

console.log(person.myplay)// play

上面person對象的定義，其中屬性名和方法名都是用中括號[]，裏面是字符串相加的表達式，

所以說用字面量(即大括號{})定義對象的時候，屬性名和方法名可以是一個表達式，表達式的運算結果就是屬性名或者方法名。

還有一些對象新增的函數

(1)Object.is()

函數的作用：比較倆個值是否嚴格相等，也可以說全等。

這裏再擴展下嚴格相等和抽象相等

代碼說話：

var str='20';
var age=20;

// 抽象相等
str == age  // true

// 嚴格相等

str === age // false

可以看出 == 和 === 的區別，嚴格情況下，不僅值相等，類型也必須相等，否則會返回 false

回到我們的函數，它的作用和嚴格一樣

var str='20';
var mine=20;
var her=20;

Object.is(str,mine) // false

Object.is(mine,her) // true

(2)Object.assign()

函數作用：將源對象的屬性賦值到目標對象上。

太官方，老樣子，看代碼

// 可看做目標對象
let target={'a':1};
// 可看做源對象
let origin={"b":2,"c":3};

Object.assign(target,origin);

console.log(target);// {a: 1, b: 2, c: 3}

可以看出target 對象已經被改變。

當然，Object.assign( )函數的參數還可以是多個

// 可看做目標對象
let target={'a':1};
// 可看做源對象
let origin1={"b":2,"c":3};
let origin2={"d":4,"e":5};
Object.assign(target,origin1,origin2);

console.log(target);// {a: 1, b: 2, c: 3, d: 4, e: 5}

這裏需要注意一下：

賦值過程中如果出現了相同的屬性名，那麼後面屬性值的就會覆蓋前面的。

小小總結下：利用Object.assign( )函數的功能，我們可以完成很多效果，比如：給對象添加屬性和方法，克隆對象，合併多個對象，合併參數，爲對象的屬性指定默認值。

此外，它還可以拷貝數組:

let arr=['z'.'h','a','n','g'];
let arr2=Object.assign([],arr);

arr2.push('end');

console.log(arr2); // ['z'.'h','a','n','g','end']

console.log(arr); //['z'.'h','a','n','g']

(3)Object.getPrototypeOf()

函數作用：獲取一個對象的prototype屬性。

話不多說：

    function Person(){ // 自定義一個Person類（函數）   
			
    }     
    Person.prototype = {  // 函數都有一個預屬性prototype對象         			      
    	say(){   // 給prototype對象添加一個say方法          
    		console.log('hello');     
    	}    
    };    		   
    let zhang = new Person(); // 實例化Person對象，賦值給變量zhang  		
    zhang.say(); //調用類的say方法       結果：hello    		
    Object.getPrototypeOf(zhang); // 獲取zhang對象的prototype屬性   
    // 結果：{say:function(){.....}}

有獲取就有設置，那麼：

(4)Object.setPrototypeOf()

function Person(){ // 自定義一個Person類（函數）   
			
}     
Person.prototype = {  // 函數都有一個預屬性prototype對象         			      
	say(){   // 給prototype對象添加一個say方法          
		console.log('hello');     
	}    
};    		   
let zhang = new Person(); // 實例化Person對象，賦值給變量zhang  		
zhang.say(); //調用類的say方法       結果：hello    				  
Object.setPrototypeOf(  //使用Object.setPrototypeOf    
	zhang,            
	{
		say(){console.log('hi')}  
	}
);
zhang.say();    //再次調用類的say方法    結果：hi

通過這個來修改對象prototype的內容。

可以看出修改之後我們再一次調用zhang.say( )；得到的結果是打印出hi，說明我們修改成功了。

對象的延伸就先到這兒...