JavaScript prototype 疑惑

Half 发布于2019-08-21 17:25 / 2385人阅读

摘要：看了高级程序设计中关于对象的介绍，记录一下对于其中有些地方的疑惑。

看了《JavaScript高级程序设计》中关于对象的介绍，记录一下对于其中有些地方的疑惑。

使用构造函数创建对象时，prototype中如果定义一个属性指向函数，在函数中引用this，为什么this是指向构造函数而不是prototype对象？

试验：

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

按照书上的讲解，test实例的结构应该是如下的（伪代码）：

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

__proto__既然和obj同一层级的，那getSuperValue应该就和testValue是有同样的表现才对呀，为什么getSuperValue可以读取到property的值呢？

云服务器 GPU云服务器 javascript_prototype PROTOTYPING Prototypal Prototypes

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89488.html

JavaScript之原型解析（上）

摘要：前言原型这个概念在这门语言中是一个核心关键的知识点，但是你是否真的已经完全理解透彻了呢可能我个人的理解能力较差，因此经过多次翻阅书籍和实践我才真正了解原型，所以记录下来以加深理解，也以便日后深入探讨。前言原型这个概念在JavaScript这门语言中是一个核心关键的知识点，但是你是否真的已经完全理解透彻了呢?可能我个人的理解能力较差，因此经过多次翻阅书籍和实践我才真正了解原型，所以记...

lushan 2019-08-21 17:03 评论0 收藏0
JavaScript this 从此不再疑惑

摘要：是的，始终指向调用对象，调用对象，这个很重要，的静态成员是没有的概念的。所以和，的区别是返回一个明确的新函数，和立即执行了。 1. 问题引入 function A() {} A.prototype.fna = function() { console.log(this); } 我的问题是 fna 的 this 是指向哪里的？ var a = new A(); a.fna(); ...

Barrior 2019-08-20 17:52 评论0 收藏0
JavaScript 原型中的哲学思想

摘要：而作为构造函数，需要有个属性用来作为以该构造函数创造的实例的继承。欢迎来我的博客阅读：「JavaScript 原型中的哲学思想」记得当年初试前端的时候，学习JavaScript过程中，原型问题一直让我疑惑许久，那时候捧着那本著名的红皮书，看到有关原型的讲解时，总是心存疑虑。当在JavaScript世界中走过不少旅程之后，再次萌发起研究这部分知识的欲望，翻阅了不少书籍和资料，才搞懂...

sugarmo 2019-08-19 18:38 评论0 收藏0
JavaScript设计模式（一）

摘要：声明设计模式系列是来自设计模式与开发这本书的读书笔记，会结合自身的理解和一些项目经验做笔记，原书作者曾探前言什么是设计模式，设计模式就是在某种场合下对某个问题的一种解决方案。声明：【JavaScript设计模式】系列是来自《JavaScript设计模式与开发》这本书的读书笔记，会结合自身的理解和一些项目经验做笔记，原书作者曾探前言什么是设计模式，设计模式就是在某种场合下对...

dreamtecher 2019-08-21 16:47 评论0 收藏0
听飞狐聊JavaScript设计模式系列07

摘要：本回内容介绍上一回聊到单例模式，做了一道题，内容不多，比较容易理解。这里其实还可以进一步优化，达到高聚类低耦合，这里工厂模式就告一段落了。本回内容介绍上一回聊到JS单例模式(singleton)，做了一道题，内容不多，比较容易理解。介一回嘞，聊聊工厂模式，之前聊到过工厂模式，这回聊深入点儿，可能会比较抽象，不过好在实际开发中使用还算广泛，理解起来会比较容易，开始咯： 1. 简单工厂...

BetaRabbit 2019-08-21 10:46 评论0 收藏0