傻傻分不清的proto与prototype

YancyYe 发布于2019-08-22 11:14 / 292人阅读

摘要：今天同事小英童鞋问了我一个问题小英童鞋认为的原型对象是，所以会继承的属性，调用相当于调用，但结果不是一个方法。构造函数创建对象实例函数有两个不同的内部方法和。如果不通过关键字调用函数，则执行函数，从而直接执行代码中的函数体。

今天同事小英童鞋问了我一个问题：

function Foo(firstName, lastName){
    this.firstName = firstName;
    this.lastName = lastName; 
}
Foo.prototype.logName = function(){
    Foo.combineName();
    console.log(this.fullName);
}
Foo.prototype.combineName = function(){
    this.fullName = `${this.firstName} ${this.lastName}`
}

var foo = new Foo("Sanfeng", "Zhang");
foo.logName(); // Uncaught TypeError: Foo.combineName is not a function

小英童鞋认为Foo的原型对象是Foo.prototype，所以Foo会继承Foo.prototype的属性，调用Foo.combineName()相当于调用Foo.prototype.combineName()，但结果Foo.combineName()不是一个方法。

会造成这个问题的原因一定是因为小英童鞋弄混了原型和继承的一些原理，下面我们来整理一下原型和继承的相关原理，找出问题的根本原因。

prototype

prototype是一个拥有 [[Construct]] 内部方法的对象才有的属性。

例如函数，对象的方法，ES6 中的类。注意 ES6 中的箭头函数没有 [[Construct]] 方法，因此没有prototype这个属性，除非你为它添加一个。

当创建函数时，JavaScript 会为这个函数自动添加prototype属性，这个属性指向的是一个原型对象Functionname.prototype。我们可以向这个原型对象添加属性或对象，甚至可以指向一个现有的对象。

__proto__

接下来我们说说继承，每个对象都有一个__proto__属性，这个属性是用来标识自己所继承的原型。

注意： JavaScript 中任意对象都有一个内置属性 [[Prototype]] ，在ES5之前没有标准的方法访问这个内置属性，但是大多数浏览器都支持通过__proto__来访问。以下统一使用__proto__来访问 [[Prototype]]，在实际开发中是不能这样访问的。

原型链

JavaScript 可以通过prototype和__proto__在两个对象之间创建一个关联，使得一个对象就可以通过委托访问另一个对象的属性和函数。

这样的一个关联就是原型链，一个由对象组成的有限对象链，用于实现继承和共享属性。

构造函数创建对象实例

JavaScript 函数有两个不同的内部方法：[[Call]] 和 [[Construct]] 。

如果不通过new关键字调用函数，则执行 [[Call]] 函数，从而直接执行代码中的函数体。

当通过new关键字调用函数时，执行的是 [[Construct]] 函数，它负责创建一个实例对象，把实例对象的__proto__属性指向构造函数的prototype来实现继承构造函数prototype的所有属性和方法，将this绑定到实例上，然后再执行函数体。

模拟一个构造函数：

function createObject(proto) {
    if (!(proto === null || typeof proto === "object" || typeof proto === "function"){
        throw TypeError("Argument must be an object, or null");
    }
    var obj = new Object();
    obj.__proto__ = proto;
    return obj;
}

var foo = createObject(Foo.prototype);

至此我们了解了prototype和__proto__的作用，也了解使用构造函数创建对象实例时这两个属性的指向，以下使用一张图来总结一下如何通过prototype和__proto__实现原型链。

从上图我们可以找出foo对象和Foo函数的原型链：

foo.__proto__ == Foo.prototype;
foo.__proto__.__proto__ == Foo.prototype.__proto__ == Object.prototype;
foo.__proto__.__proto__.__proto__ == Foo.prototype.__proto__.__proto__ == Object.prototype.__proto__ == null;

Foo.__proto__ == Function.prototype;
Foo.__proto__.__proto__ == Function.prototype.__proto__;
Foo.__proto__.__proto__.__proto__ == Function.prototype.__proto__.__proto__ == Object.prototype.__proto__ == null;

构造函数Foo的原型链上没有Foo.prototype，因此无法继承Foo.prototype上的属性和方法。而实例foo的原型链上有Foo.prototype，因此foo可以继承Foo.prototype上的属性和方法。

到这里，我们可以很简单的解答小英童鞋的问题了，在Foo的原型链上没有Foo.prototype，无法继承Foo.prototype上的combineName方法，因此会抛出Foo.combineName is not a function的异常。要想使用combineName方法，可以这样Foo.prototype.combineName.call(this)，或者这样this.combineName()（this指向实例对象）。

欢迎关注：Leechikit
原文链接：segmentfault.com

到此本文结束，欢迎提问和指正。
写原创文章不易，若本文对你有帮助，请点赞、推荐和关注作者支持。

服务器托管超融合服务器 prototype_proto __JS __gc __filename

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

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

傻傻分不清的Manifest

摘要：的英文含义是名单种技术的确都是把当做清单使用缓存清单清单打包资源路径清单打包清单只不过是在不同的场景中使用特定的清单来完成某些功能所以，学好英文是多么重要，这样才不会傻傻分不清到底是干啥的在前端，说到manifest，其实是有歧义的，就我了解的情况来说，manifest可以指代下列含义： html标签的manifest属性: 离线缓存（目前已被废弃） PWA: 将Web应用程序...

printempw 2019-08-23 17:58 评论0 收藏0
__proto__和prototype之区别和联系

摘要：当这步完成，这个对象就与构造函数再无联系，这个时候即使构造函数再加任何成员，都不再影响已经实例化的对象了。此时，对象具有了和属性，同时具有了构造函数的原型对象的所有成员，当然，此时该原型对象是没有成员的。学到原型的时候感觉头都大了/(ㄒoㄒ)/~~ 尤其是prototype和__proto__ 傻傻分不清，通过多番查找资料，根据自己的理解，记录下最近研究对象的一些心得，做一个记录与总...

paulli3 2019-08-23 11:55 评论0 收藏0
JavasScript重难点知识

摘要：忍者级别的函数操作对于什么是匿名函数，这里就不做过多介绍了。我们需要知道的是，对于而言，匿名函数是一个很重要且具有逻辑性的特性。通常，匿名函数的使用情况是创建一个供以后使用的函数。 JS 中的递归递归, 递归基础, 斐波那契数列, 使用递归方式深拷贝, 自定义事件添加这一次，彻底弄懂 JavaScript 执行机制本文的目的就是要保证你彻底弄懂javascript的执行机制，如果...

forsigner 2019-08-21 18:36 评论0 收藏0
js 原型链的那些事儿

摘要：原型链首先，的对象普通对象和函数对象都会有属性，指向创建它的构造函数的原型对象，比如上面的例子这就形成了原型链，会一直查找原型对象的属性，直到为。，保证原型链能够正常结束。前言一般谈到js中的继承的时候，一定会遇到原型，原型链的问题，原型里面又有prototype，__proto__，constructor属性，讲到这儿，很多同学是不是都一头雾水，傻傻分不清楚，因为工作中用到的地方...

fuyi501 2019-08-26 12:14 评论0 收藏0
JavaScript继承的几种方式

摘要：组合方式继承终极版工商建设开心能分清是孩子还是父辈二狗的构造函数已指向图示关键代码创建对象的方法就是用原型链来连接的。也让二狗有了确定的归属。一、继承原理原型链不知道什么是原型链？来读几个关键词：哥欧构构造函数构造函数构造函数实例实例实例原型对象原型对象原型对象 prototype prototype prototype __proto__ __pro...

SegmentFault 2019-08-22 18:02 评论0 收藏0