這篇文章給大家分享的是有關Javascript模擬實現new原理的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創新互聯主營雞東網站建設的網絡公司,主營網站建設方案,app軟件定制開發,雞東h5小程序定制開發搭建,雞東網站營銷推廣歡迎雞東等地區企業咨詢

new是JS中的一個關鍵字，用來將構造函數實例化的一個運算符。例子：

function Animal(name) {
  this.name = name;
}
Animal.prototype.sayName = function() {
  console.log("I'm " + this.name);
}
var cat = new Animal('Tom');
console.log(cat.name); // Tom
console.log(cat.__proto__ === Animal.prototype); // true
cat.sayName(); // I'm Tom

從上面的例子可以得出兩點結論：

• new操作符實例化了一個對象；

• 這個對象可以訪問構造函數的屬性；

• 這個對象可以訪問構造函數原型上的屬性；

• 對象的**__proto__**屬性指向了構造函數的原型；

由于new是關鍵字，我們只能去聲明一個函數去實現new的功能，首先實現上面的三個特性，第一版代碼如下：

附：對原型原型鏈不熟悉的可以先看理解Javascript的原型和原型鏈。

// construct: 構造函數
function newFunction() {
 var res = {};
 // 排除第一個構造函數參數
 var construct = Array.prototype.shift.call(arguments);
 res.__proto__ = construct.prototype;
 // 使用apply執行構造函數，將構造函數的屬性掛載在res上面
 construct.apply(res, arguments);
 return res;
}

我們測試下：

function newFunction() {
 var res = {};
 var construct = Array.prototype.shift.call(arguments);
 res.__proto__ = construct.prototype;
 construct.apply(res, arguments);
 return res;
}
function Animal(name) {
  this.name = name;
}
Animal.prototype.sayName = function() {
  console.log("I'm " + this.name);
}
var cat = newFunction(Animal, 'Tom');
console.log(cat.name); // Tom
console.log(cat.__proto__ === Animal.prototype); // true
cat.sayName(); // I'm Tom

一切正常。new的特性實現已經80%，但new還有一個特性：

function Animal(name) {
  this.name = name;
  return {
    prop: 'test'
  };
}
var cat = new Animal('Tom');
console.log(cat.prop); // test
console.log(cat.name); // undefined
console.log(cat.__proto__ === Object.prototype); // true
console.log(cat.__proto__ === Animal.prototype); // false

如上，如果構造函數return了一個對象，那么new操作后返回的是構造函數return的對象。讓我們來實現下這個特性，最終版代碼如下：

// construct: 構造函數
function newFunction() {
 var res = {};
 // 排除第一個構造函數參數
 var construct = Array.prototype.shift.call(arguments);
 res.__proto__ = construct.prototype;
 // 使用apply執行構造函數，將構造函數的屬性掛載在res上面
 var conRes = construct.apply(res, arguments);
 // 判斷返回類型
 return conRes instanceof Object ? conRes : res;
}

測試下：

function Animal(name) {
  this.name = name;
 return {
  prop: 'test'
  };
}
var cat = newFunction(Animal, 'Tom');
console.log(cat.prop); // test
console.log(cat.name); // undefined
console.log(cat.__proto__ === Object.prototype); // true
console.log(cat.__proto__ === Animal.prototype); // false

以上代碼就是我們最終對new操作符的模擬實現。我們再來看下官方對new的解釋

引用MDN對new運算符的定義：

new 運算符創建一個用戶定義的對象類型的實例或具有構造函數的內置對象的實例。

new操作符會干下面這些事：

• 創建一個空的簡單JavaScript對象（即{}）；

• 鏈接該對象（即設置該對象的構造函數）到另一個對象 ；

• 將步驟1新創建的對象作為this的上下文 ；

• 如果該函數沒有返回對象，則返回this。

4條都已經實現。還有一個更好的實現，就是通過Object.create去創建一個空的對象:

// construct: 構造函數
function newFunction() {
 // 通過Object.create創建一個空對象；
 var res = Object.create(null);
 // 排除第一個構造函數參數
 var construct = Array.prototype.shift.call(arguments);
 res.__proto__ = construct.prototype;
 // 使用apply執行構造函數，將構造函數的屬性掛載在res上面
 var conRes = construct.apply(res, arguments);
 // 判斷返回類型
 return conRes instanceof Object ? conRes : res;
}

JavaScript的作用是什么

1、能夠嵌入動態文本于HTML頁面。2、對瀏覽器事件做出響應。3、讀寫HTML元素。4、在數據被提交到服務器之前驗證數據。5、檢測訪客的瀏覽器信息。6、控制cookies，包括創建和修改等。7、基于Node.js技術進行服務器端編程。

感謝各位的閱讀！關于“Javascript模擬實現new原理的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

另外有需要云服務器可以了解下創新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

文章標題：Javascript模擬實現new原理的示例分析-創新互聯
標題來源：http://vcdvsql.cn/article22/hogcc.html

成都網站建設公司_創新互聯，為您提供網頁設計公司、網站制作、品牌網站建設、外貿網站建設、面包屑導航、網站設計公司

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯