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

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

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

new

new func()主要過程如下：

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

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

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

返回該對象，即return obj。

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

模仿new原理的代碼如下：

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

Object.create()

在模仿new原理的代碼中用到了Object.create()，它的作用是以入?yún)樵蛣?chuàng)建一個(gè)空對象，即

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

或

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

GPU云服務(wù)器云服務(wù)器 java中緩存的原理 webrtc中AGC模塊的原理 cdn的原理和架構(gòu) 關(guān)于JAVA中順序IO的基本操作

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/97986.html

相關(guān)文章

前端進(jìn)擊的巨人（七）：走進(jìn)面向?qū)ο螅团c原型鏈，繼承方式

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

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

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

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

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

zhangfaliang 2019-08-26 10:15 評論0 收藏0
面向?qū)ο?em>的小九九

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

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

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

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