js 理解new的運行機制

標籤：分析   文章   執行個體化   做了   man   構造   this   繼承   ons   

先上段代碼：

 1     function People(name) { 2       this.name = name; 3     } 4  5     People.prototype.sayName = function () { 6       console.log(this.name); 7     } 8  9     var man1 = new People(‘xiaos‘);10     console.log(man1.name)11     man1.sayName();

接下來我們分析下上述代碼：

1. 1-3行我們建立了一個People的函數，應為將來要用作建構函式來執行個體化對象，所以首字母大寫(這是好的習慣，也是一種預設的都會遵守的規定吧)

2. 5-7在People的原型對象上添加了sayName方法，什麼是原型對象呢？會有另外一篇文章來單獨介紹，後續補充~~

3. 第9行，使用new運算子執行個體化了一個man1對象。這是我們這篇要研究的問題，下面會詳細闡述~

4. 第10行列印輸出man1的name，第11行調用man1的sayName方法

 

那麼問題來了，分析4中為什麼能取到name屬性和sayName方法呢？？其實，這關鍵在於第3步，new的作用。

那麼new究竟做了什麼呢？大致分三步，我們用程式碼分析下過程吧：

1 var obj = {}; // 首先建立一個空的對象2 3 obj.__proto__ = People.prototype; // 將Null 物件的__proto__指向建構函式的原型對象，也就是這句導致上面執行個體化的對象man1擁有了sayName方法，其實這裡是繼承了原型對象上的sayName方法4 People.call(obj, ‘xiaos‘); // 調用People的構造方法，也就是這句導致man1擁有了name屬性，有關call用法，本篇暫不介紹了，後續補充；這裡簡單理解就是People中的this變成了obj5 6 return obj; // 返回對象，此刻man1來接收，所以就同時擁有了People的建構函式中的屬性還有原型上的方法

 

js 理解new的運行機制