歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
Linux教程網 >> Linux編程 >> Linux編程 >> 深入理解JavaScript new的機制

深入理解JavaScript new的機制

日期:2017/3/1 9:28:52   编辑:Linux編程

我們在使用JavaScript對象的時候,除了一些浏覽器內置的單體對象可以直接使用外,都會new一個出來使用。

1.最簡單的莫過於如下獲取一個Object對象實例

var obj = new Object();

說明:此時的new關鍵字干了最有用的一件事就是,繼承了所有Object.prototype上的方法,這個可以去查看一下es5的參考資料中Object.prototype的方法列表。也就是說此時的obj對象可以使用所有繼承而來的方法了!

2.然而是構造函數模式讓我們對new有了一個深入的了解!

function Person(name,age){
this.name = name;
this.age = age;
this.sayName = function(){
console.log(this.name);
}
}
var person1 = new Person("wang",23);
var person2 = new Person("jiang",24);
var person3 = new Person;//當不傳參數的時候

我們很容易知道構造函數使得每個實例都獨自獲取了一份屬性和方法。但是這是怎麼實現出來的呢?

new過程中發生了什麼?

1).創建一個對象。

2).將構造函數的作用域賦給新對象(因此this就指向了新對象)

3).執行構造函數中的代碼(為新對象添加屬性)

4).返回新對象

值得注意的是它們的繼承關系是:person1/person2/person3繼承於Person,而Person繼承於Object(一切對象皆繼承於Object)

如果理解了上面的東西,在一些簡單編程中遇到new,基本也夠了。

下面繼續繼續介紹一些有關new的話題

3.模塊模式(Moudle模式),下面講解一個最簡單的模塊模式例子

var Calculator = function (eq) {
//這裡可以聲明私有成員
var name = 2;
var eqCtl = document.getElementById(eq);

return {
// 暴露公開的成員
name : name,
add: function (x, y) {
var val = x + y;
eqCtl.innerHTML = val;
}
};
};
var c1 = new Calculator('eq');
var c2 = new Calculator('la');
c1.name = 3;//c1的name屬性改變了卻不會影響c2的name屬性
console.log(c1);
console.log(c2);
c1.add(2, 2);


值得注意的是,在Calculator這個構造函數中返回了一個對象!

說明:如果構造函數中返回了一個對象,(第4步)那麼new出來的對象將會被返回的對象覆蓋。模塊模式的結果是c1和c2都從返回的對象copy了一份屬性和方法,它們之間互不影響。

繼承關系也變了,c1和c2都直接繼承於Object

JavaScript高級程序設計(第3版)高清完整PDF中文+英文+源碼 http://www.linuxidc.com/Linux/2014-09/107426.htm

如何使用JavaScript書寫遞歸函數 http://www.linuxidc.com/Linux/2015-01/112000.htm

JavaScript核心概念及實踐 高清PDF掃描版 (邱俊濤) http://www.linuxidc.com/Linux/2014-10/108083.htm

理解JavaScript中的事件流 http://www.linuxidc.com/Linux/2014-10/108104.htm

Copyright © Linux教程網 All Rights Reserved