亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

JS對(duì)象繼承與原型鏈

QLQ / 2743人閱讀

摘要：此用來定義通過構(gòu)造器構(gòu)造出來的對(duì)象的原型，構(gòu)造器內(nèi)部的代碼用來給對(duì)象初始化。

對(duì)象繼承 VS 類繼承

在 class-based 的面向?qū)ο蟮氖澜缋?，要出現(xiàn)對(duì)象，必須先有類。類之間可以繼承，類再使用 new 操作創(chuàng)建出實(shí)體，父子對(duì)象之間的繼承體現(xiàn)在父類和子類上。你不能說 對(duì)象 a 繼承了對(duì)象 b，只能說 class A 繼承了 class B，然后他們各自有一個(gè)實(shí)例a、b。

JS中實(shí)現(xiàn)的是原型繼承。在 prototype-based 的面向?qū)ο蟮氖澜缋?，繼承是對(duì)象之間的事情，就像現(xiàn)實(shí)世界里，兒子繼承父親，沒必要非得整出父親類、兒子類。你有一個(gè)對(duì)象 a，通過 b = Object.create(a) (或者用類似的polyfill)創(chuàng)建出一個(gè)繼承了 a 對(duì)象的實(shí)體 b。a 對(duì)象的屬性和方法甚至后期對(duì) a 的屬性和方法修改，b 對(duì)象都直接繼承過來。這里，我們說，a對(duì)象是b對(duì)象的原型。我們發(fā)現(xiàn)，這樣的繼承方式不需要類，繼承完全在對(duì)象間完成。

原型繼承的工作機(jī)制

在對(duì)象屬性查找時(shí)，如果對(duì)象本身存在這個(gè)屬性，會(huì)優(yōu)先使用它自己的(也就是概念 ownProperty)；如果沒有，就會(huì)查找對(duì)象的原型上有沒有這個(gè)屬性；如果原型對(duì)象也有自己的原型，遞歸查找，直到原型的根部，沒有原型了停止查找，如果還是不存在，則返回 undefined。這就是傳說中的 原型鏈，這也是 JS 中對(duì)象繼承的體現(xiàn)方式，原型存在的意思。

這里順帶說一下如何獲取一個(gè)對(duì)象的原型。ES5 提供了 Object.getPrototypeOf(obj) 方法來獲取一個(gè)對(duì)象的原型，在 Chrome 中也可以使用非標(biāo)準(zhǔn)的 obj.__proto__。

JS 在 prototype-based 的面向?qū)ο蟮幕A(chǔ)上，引入了 構(gòu)造器 來模擬 class-based 的模式， 配合 new 操作符使用。 構(gòu)造器和 已有的 prototype 概念如何配合工作呢？

我們知道，JS 中的構(gòu)造器就是一個(gè)普通函數(shù)，但是這個(gè)函數(shù)有一個(gè)特殊的屬性(函數(shù)也是對(duì)象，所以也有屬性) ———— prototype。此 prototype 用來定義通過構(gòu)造器構(gòu)造出來的對(duì)象的原型，構(gòu)造器內(nèi)部的代碼用來給對(duì)象初始化。

function Ctor() {}
console.dir(Ctor.prototype);
// 構(gòu)造器的 prototype 屬性，默認(rèn)值是
// { constructor: Ctor    }

Ctor.prototype.method = function() {
    console.log(1)
}

instance = new Ctor();

instance.constructor // Ctor
instance.method() // console.log(1)

instance 是如何獲得 Ctor 的 prototype 屬性上的數(shù)據(jù)的呢？好，還記得 JS 中的繼承都是對(duì)象之間的繼承嗎？我們翻譯一下 new 操作符到底干了什么。

instance = new Ctor() // 等價(jià)于
instance = Object.create(Ctor.prototype) // 用 Ctor 的 prototype 作為原型來創(chuàng)建一個(gè)新對(duì)象
Ctor.apply(instance) // 執(zhí)行構(gòu)造器用來初始化，構(gòu)造器中的 this 指向 instance

我們稱， instance 的原型是 Ctor.prototype, instance 是 Ctor 構(gòu)造出來的 （new 出來的）.

為了讓 instance.constructor 能正確指向 instance 的構(gòu)造器，一個(gè)構(gòu)造器默認(rèn)的 prototype 上已經(jīng)存在 constructor 屬性，并且指向構(gòu)造器本身了。在我們覆蓋構(gòu)造器的 prototype 屬性時(shí)，記得要把 prototype.constructor 屬性定義了，讓它指回到構(gòu)造器，否則構(gòu)造出來的 instance 的 constructor 屬性就出問題了。所以我們可以看出，instance.constructor 其實(shí)是不是 instance 自己的屬性，是原型鏈上定義的。

這里千萬不要把 Ctor.prototype 誤理解為是 Ctor 的原型。Ctor 的原型是 Object.getPrototypeOf(Ctor)（非標(biāo)準(zhǔn)寫法：Ctor.__proto__），它是 Function.prototype， 因?yàn)?Ctor 是一個(gè)函數(shù)對(duì)象，所有函數(shù)都構(gòu)造自 Function，原型是 Function.prototype。Ctor.prototype 是 Ctor 構(gòu)造出來的實(shí)例的原型，不是 Ctor 的原型。

Object & Function 雞生蛋蛋生雞

有代碼如下：

Object instanceof Function // true
Function instanceof Object // true
// what???

我們來挖掘一下 instanceof 操作符底層邏輯：

instance instanceof Ctor // 等價(jià)于

function instanceOf(instance, prototype) {
    var proto = Object.getPrototype(instance); // 取對(duì)象原型
    if( proto === null) return false; // 空
    if( proto === prototype) return true; // 原型匹配
    return instanceOf(proto, prototype); // 遞歸檢查原型的原型
}

instance(instance, Ctor.prototype);

JS 中的繼承終歸是原型的繼承，所以 class-based 中的 instanceof 概念最終也需要映射到 prototype 上。但是 JS 中的構(gòu)造器名稱有一個(gè)特殊之處，這個(gè)名稱既表示了構(gòu)造器這個(gè)函數(shù)，又表示了 class-based 概念中的 類 的概念, 而函數(shù)本身又是一種特殊的對(duì)象。

Object instanceof Function 之所以為 true，我們是把 Object 當(dāng)做構(gòu)造器看待，它是一個(gè)函數(shù)，它是 Function 的實(shí)例，所以同時(shí)這里我們把 Function 當(dāng)作類型來看待，它是所有 function 的類。

Function instanceof Object 之所以為 true，我們是把 Function 當(dāng)作對(duì)象看待，它雖然是一個(gè)構(gòu)造函數(shù)，但是它也是對(duì)象，它是 Object 的實(shí)例，所以同時(shí)我們又把 Object 當(dāng)作類型來看待，它是所有對(duì)象的類。

從原型角度：

// Object 是一個(gè)構(gòu)造函數(shù)，它的原型是 Function.prototype
// Function.prototype 是所有函數(shù)的原型，call, apply 就掛在這里
Object.getPrototypeOf(Object) === Function.prototype 

// Function 也是一個(gè)構(gòu)造函數(shù)
Object.getPrototypeOf(Function) === Function.prototype
// Function.prototype 本身是一個(gè)對(duì)象，所有對(duì)象的原型根部都是 Object.prototype
Object.getPrototypeOf(Function.prototype) === Object.prototype

這也印證了 JS 中函數(shù)是對(duì)象的概念。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/91836.html

相關(guān)文章

  • 理解js的原型與繼承

    摘要：相當(dāng)于在用原型繼承編寫復(fù)雜代碼前理解原型繼承模型十分重要。同時(shí)，還要清楚代碼中原型鏈的長度，并在必要時(shí)結(jié)束原型鏈，以避免可能存在的性能問題。 js是一門動(dòng)態(tài)語言,js沒有類的概念,ES6 新增了class 關(guān)鍵字，但只是語法糖，JavaScript 仍舊是基于原型。 至于繼承,js的繼承與java這種傳統(tǒng)的繼承不一樣.js是基于原型鏈的繼承. 在javascript里面,每個(gè)對(duì)象都有一...

    wthee 評(píng)論0 收藏0

  • 你是否理解js的Object與Function與原型鏈

    摘要：原型對(duì)象是由創(chuàng)建的，因此原型對(duì)象的構(gòu)造函數(shù)是構(gòu)造函數(shù)也可以是稱為對(duì)象，原型對(duì)象也就繼承了其生父構(gòu)造函數(shù)中的數(shù)據(jù)，也同時(shí)繼承了原型對(duì)象的數(shù)據(jù)。當(dāng)然這條原型鏈中的數(shù)據(jù)，會(huì)被還是還是這類構(gòu)造函數(shù)繼承，但是不會(huì)被這些繼承，他們不處于同一個(gè)鏈條上。 js中，F(xiàn)unction的本質(zhì)是什么？Object的本質(zhì)又是什么？js中有幾條原型鏈？ showImg(https://segmentfault.c...

    itvincent 評(píng)論0 收藏0

  • JS學(xué)習(xí)筆記（第6章）（面向對(duì)象之繼承——JS繼承的六大方式）

    摘要：除此之外，在超類型的原型中定義的方法，對(duì)子類型而言也是不可兼得，結(jié)果所有類型都只能用構(gòu)造函數(shù)模式。創(chuàng)建對(duì)象增強(qiáng)對(duì)象指定對(duì)象繼承屬性這個(gè)例子的高效率體現(xiàn)在它只調(diào)用了一次構(gòu)造函數(shù)。 1、原型鏈 原型鏈的基本思想是利用原型讓一個(gè)引用類型繼承另一個(gè)引用類型的屬性和方法。構(gòu)造函數(shù)、原型和實(shí)例的關(guān)系：每個(gè)構(gòu)造函數(shù)都有一個(gè)原型對(duì)象；原型對(duì)象都包含著一個(gè)指向構(gòu)造函數(shù)的指針；實(shí)例都包含一個(gè)指向原型對(duì)象的...

    lscho 評(píng)論0 收藏0

  • 深入理解 js 之繼承與原型鏈

    摘要：原型鏈與繼承當(dāng)談到繼承時(shí)，只有一種結(jié)構(gòu)對(duì)象。如果對(duì)該圖不怎么理解，不要著急，繼續(xù)往下看基于原型鏈的繼承對(duì)象是動(dòng)態(tài)的屬性包指其自己的屬性。當(dāng)使用操作符來作用這個(gè)函數(shù)時(shí)，它就可以被稱為構(gòu)造方法構(gòu)造函數(shù)。 原型鏈與繼承 當(dāng)談到繼承時(shí)，JavaScript 只有一種結(jié)構(gòu)：對(duì)象。每個(gè)實(shí)例對(duì)象（object ）都有一個(gè)私有屬性（稱之為proto）指向它的原型對(duì)象（prototype）。該原型對(duì)象也...

    xingqiba 評(píng)論0 收藏0

  • 進(jìn)擊JavaScript之（四）原型與原型鏈

    摘要：每一個(gè)由構(gòu)造函數(shù)創(chuàng)建的對(duì)象都會(huì)默認(rèn)的連接到該神秘對(duì)象上。在構(gòu)造方法中也具有類似的功能，因此也稱其為類實(shí)例與對(duì)象實(shí)例一般是指某一個(gè)構(gòu)造函數(shù)創(chuàng)建出來的對(duì)象，我們稱為構(gòu)造函數(shù)的實(shí)例實(shí)例就是對(duì)象。表示該原型是與什么構(gòu)造函數(shù)聯(lián)系起來的。 本文您將看到以下內(nèi)容： 傳統(tǒng)構(gòu)造函數(shù)的問題 一些相關(guān)概念 認(rèn)識(shí)原型 構(gòu)造、原型、實(shí)例三角結(jié)構(gòu)圖 對(duì)象的原型鏈 函數(shù)的構(gòu)造函數(shù)Function 一句話說明什么...

    XBaron 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<