JavaScript prototype 疑惑

Half 發(fā)布于2019-08-21 17:25 / 2392人閱讀

摘要：看了高級(jí)程序設(shè)計(jì)中關(guān)于對(duì)象的介紹，記錄一下對(duì)于其中有些地方的疑惑。

看了《JavaScript高級(jí)程序設(shè)計(jì)》中關(guān)于對(duì)象的介紹，記錄一下對(duì)于其中有些地方的疑惑。

使用構(gòu)造函數(shù)創(chuàng)建對(duì)象時(shí)，prototype中如果定義一個(gè)屬性指向函數(shù)，在函數(shù)中引用this，為什么this是指向構(gòu)造函數(shù)而不是prototype對(duì)象？

試驗(yàn)：

function SuperType() {
    this.property = "value in SuperType"
    this.obj = {
        testThis: function() {
            console.log(this)
            console.log(this.testValue)
            console.log(this.property)
        },
        testValue: "value in SuperType.obj",
    }
}

SuperType.prototype.getSuperValue = function() {
    console.log(this)
    return this.property
}

const test = new SuperType()

test.obj.testThis()
// output:
// { testThis: [Function: testThis], testValue: "test" }
// value in SuperType.obj
// undefined

r = test.getSuperValue()
console.log(r)
// output:
// SuperType {
//  property: true,
//  obj: { testThis: [Function: testThis], testValue: "value in SuperType.obj" }
// }
// value in SuperType

按照書(shū)上的講解，test實(shí)例的結(jié)構(gòu)應(yīng)該是如下的（偽代碼）：

person = {
    __proto__: {
        constructor: SuperType,
        getSuperValue: function() { ... },
    },
    obj: {
        testThis: function() { ... },
        testValue: "value in SuperType.obj",
    },
    property: "value in SuperType",
}

__proto__既然和obj同一層級(jí)的，那getSuperValue應(yīng)該就和testValue是有同樣的表現(xiàn)才對(duì)呀，為什么getSuperValue可以讀取到property的值呢？

GPU云服務(wù)器云服務(wù)器 javascript_prototype PROTOTYPING Prototypal Prototypes

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

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

相關(guān)文章

JavaScript之原型解析（上）

摘要：前言原型這個(gè)概念在這門(mén)語(yǔ)言中是一個(gè)核心關(guān)鍵的知識(shí)點(diǎn)，但是你是否真的已經(jīng)完全理解透徹了呢可能我個(gè)人的理解能力較差，因此經(jīng)過(guò)多次翻閱書(shū)籍和實(shí)踐我才真正了解原型，所以記錄下來(lái)以加深理解，也以便日后深入探討。前言原型這個(gè)概念在JavaScript這門(mén)語(yǔ)言中是一個(gè)核心關(guān)鍵的知識(shí)點(diǎn)，但是你是否真的已經(jīng)完全理解透徹了呢?可能我個(gè)人的理解能力較差，因此經(jīng)過(guò)多次翻閱書(shū)籍和實(shí)踐我才真正了解原型，所以記...

lushan 2019-08-21 17:03 評(píng)論0 收藏0
JavaScript this 從此不再疑惑

摘要：是的，始終指向調(diào)用對(duì)象，調(diào)用對(duì)象，這個(gè)很重要，的靜態(tài)成員是沒(méi)有的概念的。所以和，的區(qū)別是返回一個(gè)明確的新函數(shù)，和立即執(zhí)行了。 1. 問(wèn)題引入 function A() {} A.prototype.fna = function() { console.log(this); } 我的問(wèn)題是 fna 的 this 是指向哪里的？ var a = new A(); a.fna(); ...

Barrior 2019-08-20 17:52 評(píng)論0 收藏0
JavaScript 原型中的哲學(xué)思想

摘要：而作為構(gòu)造函數(shù)，需要有個(gè)屬性用來(lái)作為以該構(gòu)造函數(shù)創(chuàng)造的實(shí)例的繼承。歡迎來(lái)我的博客閱讀：「JavaScript 原型中的哲學(xué)思想」記得當(dāng)年初試前端的時(shí)候，學(xué)習(xí)JavaScript過(guò)程中，原型問(wèn)題一直讓我疑惑許久，那時(shí)候捧著那本著名的紅皮書(shū)，看到有關(guān)原型的講解時(shí)，總是心存疑慮。當(dāng)在JavaScript世界中走過(guò)不少旅程之后，再次萌發(fā)起研究這部分知識(shí)的欲望，翻閱了不少書(shū)籍和資料，才搞懂...

sugarmo 2019-08-19 18:38 評(píng)論0 收藏0
JavaScript設(shè)計(jì)模式（一）

摘要：聲明設(shè)計(jì)模式系列是來(lái)自設(shè)計(jì)模式與開(kāi)發(fā)這本書(shū)的讀書(shū)筆記，會(huì)結(jié)合自身的理解和一些項(xiàng)目經(jīng)驗(yàn)做筆記，原書(shū)作者曾探前言什么是設(shè)計(jì)模式，設(shè)計(jì)模式就是在某種場(chǎng)合下對(duì)某個(gè)問(wèn)題的一種解決方案。聲明：【JavaScript設(shè)計(jì)模式】系列是來(lái)自《JavaScript設(shè)計(jì)模式與開(kāi)發(fā)》這本書(shū)的讀書(shū)筆記，會(huì)結(jié)合自身的理解和一些項(xiàng)目經(jīng)驗(yàn)做筆記，原書(shū)作者曾探前言什么是設(shè)計(jì)模式，設(shè)計(jì)模式就是在某種場(chǎng)合下對(duì)...

dreamtecher 2019-08-21 16:47 評(píng)論0 收藏0
聽(tīng)飛狐聊JavaScript設(shè)計(jì)模式系列07

摘要：本回內(nèi)容介紹上一回聊到單例模式，做了一道題，內(nèi)容不多，比較容易理解。這里其實(shí)還可以進(jìn)一步優(yōu)化，達(dá)到高聚類低耦合，這里工廠模式就告一段落了。本回內(nèi)容介紹上一回聊到JS單例模式(singleton)，做了一道題，內(nèi)容不多，比較容易理解。介一回嘞，聊聊工廠模式，之前聊到過(guò)工廠模式，這回聊深入點(diǎn)兒，可能會(huì)比較抽象，不過(guò)好在實(shí)際開(kāi)發(fā)中使用還算廣泛，理解起來(lái)會(huì)比較容易，開(kāi)始咯： 1. 簡(jiǎn)單工廠...

BetaRabbit 2019-08-21 10:46 評(píng)論0 收藏0