JavaScript中new操作符和Object.create()的原理

singerye 發(fā)布于2019-08-23 12:08 / 3525人閱讀

摘要：主要過程如下創(chuàng)建一個空對象將該空對象的原型設置為構造函數(shù)的原型，即以該對象為上下文執(zhí)行構造函數(shù)，即返回該對象，即。

new

new func()主要過程如下：

創(chuàng)建一個空對象obj；

將該空對象的原型設置為構造函數(shù)的原型，即obj.__proto__ = func.prototype；

以該對象為上下文執(zhí)行構造函數(shù)，即func.call(obj)；

返回該對象，即return obj。

對于第3、4步還有個小細節(jié)，如果第3步func有返回值且返回值為對象，則第4步會返回func的返回值，反之則默認返回obj。

模仿new原理的代碼如下：

function new2(func) { // func為某個構造函數(shù)
  var createObject = Object.create(func.prototype); // 以構造函數(shù)的原型對象為原型，創(chuàng)建一個空對象，即創(chuàng)建一個{ __proto__: func.prototype }
  var returnObject = func.call(createObject); // 使用剛創(chuàng)建的空對象作為上下文(this)執(zhí)行構造函數(shù)
  if (typeof returnObject === "object") { // 若構造函數(shù)有返回對象，則返回該對象
    return returnObject;
  } else { // 若構造函數(shù)未返回對象，則返回Object.create創(chuàng)建的對象
    return createObject;
  }
};

Object.create()

在模仿new原理的代碼中用到了Object.create()，它的作用是以入參為原型創(chuàng)建一個空對象，即

Object.create = function (obj) {
  return { "__proto__": obj};
};

或

Object.create = function (obj) {
  function F() {}
  F.prototype = obj;
  return new F();
};

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/97986.html

前端進擊的巨人（七）：走進面向對象，原型與原型鏈，繼承方式

摘要：除了以上介紹的幾種對象創(chuàng)建方式，此外還有寄生構造函數(shù)模式穩(wěn)妥構造函數(shù)模式。 showImg(https://segmentfault.com/img/remote/1460000018196128); 面向對象是以對象為中心的編程思想，它的思維方式是構造。面向對象編程的三大特點：封裝、繼承、多態(tài)：封裝：屬性方法的抽象繼承：一個類繼承（復制）另一個類的屬性/方法多態(tài)：方...

wums 2019-08-23 15:18 評論0 收藏0
深入 JavaScript 原型繼承原理——babel 編譯碼解讀

摘要：目錄無繼承簡單的字段聲明無繼承簡單的方法聲明簡單繼承一層繼承字段覆蓋無繼承靜態(tài)函數(shù)無繼承靜態(tài)變量神秘的類無繼承簡單的字段聲明先來看個最簡單的例子，我們僅僅使用了關鍵字并定義了一個變量最后編譯出來的代碼如下。無繼承靜態(tài)變量還有個小例子。在[上一篇文章][]中，我們提到 ES6 的 class 語法糖是個近乎完美的方案，并且講解了實現(xiàn)繼承的許多內部機制，如 prototype/__pro...

stdying 2019-08-23 12:35 評論0 收藏0
JavaScript常用的繼承方式

摘要：常用繼承方式主要分為種原型鏈繼承構造函數(shù)繼承組合繼承原型式繼承寄生式繼承寄生組合繼承以及繼承多個對象。所以說，構造函數(shù)基礎只能繼承父類的實例屬性和方法，不能繼承原型鏈上的屬性和方法。 JavaScript常用繼承方式主要分為(7種)：原型鏈繼承、構造函數(shù)繼承、組合繼承、原型式繼承、寄生式繼承、寄生組合繼承以及繼承多個對象。 1：原型鏈繼承(核心：將父類的實例作為子類的原型) 基本概念：...

zhangfaliang 2019-08-26 10:15 評論0 收藏0
面向對象的小九九

摘要：由構造函數(shù)返回的對象就是表達式的結果。如果構造函數(shù)沒有顯式返回一個對象，則使用步驟創(chuàng)建的對象。運算符返回一個布爾值，表示對象是否為某個構造函數(shù)的實例。面向對象本人能力有限，有誤請斧正本文旨在復習面向對象(不包含es6) 本文學習思維創(chuàng)建對象的方式，獲取對象屬性構造函數(shù),構造函數(shù)的new 做了什么原型與原型對象原型鏈繼承(借用構造繼承、原型繼承、組合繼承、寄生組合繼承)...

時飛 2019-08-22 18:16 評論0 收藏0
[譯] 為什么原型繼承很重要

摘要：使用構造函數(shù)的原型繼承相比使用原型的原型繼承更加復雜，我們先看看使用原型的原型繼承上面的代碼很容易理解。相反的，使用構造函數(shù)的原型繼承像下面這樣當然，構造函數(shù)的方式更簡單。五天之前我寫了一個關于ES6標準中Class的文章。在里面我介紹了如何用現(xiàn)有的Javascript來模擬類并且介紹了ES6中類的用法，其實它只是一個語法糖。感謝Om Shakar以及Javascript Room中...

xiao7cn 2019-08-21 10:27 評論0 收藏0