JavaScript原型继承中的 constructor

Steve_Wang_ 发布于2019-08-21 16:48 / 341人阅读

摘要：听起来确实有点懵逼书中示例大概就说明了是指向它的类的默认情况下好了，下面我们来看看下面的继承行留意下面这一句的作用注释掉后的结果会发现，去掉这句还是能调用类构造函数并能成功得出想要的结果。

转载请注明出处----在河东

    砖头书中有道: 在默认情况下，所有原型对象都会自动获得一个 Constructor (构造函数)属性，这个属性
是指向prototype 属性所在函数的指针。  （听起来确实有点懵逼）
    书中示例：

function    Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = functon(){
    console.log(this.name);
}

大概就说明了constructor是指向它的类的（默认情况下）

好了，下面我们来看看下面的继承：

    function SuperType(name){
        this.name = name;
        this.colors = ["red","blue","green"];
    }
    SuperType.prototype.sayName = function(){
        console.log(this.name);
    }
    function SubType(name , age){
        SuperType.call(this,name);
        this.age = age;
    }
    /**12行*/SubType.prototype = new SuperType();
    //留意下面这一句的作用
    SubType.prototype.constructor = SubType;
    SubType.prototype.sayAge = function(){
        console.log(this.age);
    }
    var instance1 = new SubType("HEDONGHUI",22);
    instance1.colors.push("black");
    console.log(instance1.colors);
    instance1.sayName();
    instance1.sayAge();

    var instance2 = new SubType("heod",23);
    console.log(instance2.colors);
    instance2.sayName();
    instance2.sayAge();

注释掉 SubType.prototype.constructor = SubType; 后的结果：

会发现，去掉这句instance1 , instance2 还是能调用Subtype类构造函数并能成功得出想要的结果。那么问题来了，这句话在原型继承中的作用是什么呢？

从前文我们知道，原型的constructor 默认指向原对应的类型。第12行执行完后，SubType原型（SubType.prototype）
指向了SuperType的实例对象，而SuperType的实例对象的构造器是构造函数SuperType，所以
SubType.prototype.constructor就是构造对象SuperType了（换句话说，SuperType构造了SubType的原型）。

这里实例instance1 ,SubType.prototype.constructor都为 SuperType。这就导致了
SubType.prototype === instance1.constructor.prototype 为false; 这样会令人产生费解，既然在一开始中
（前文）说到原型指向所在的类型，一般情况下，instance1.constructor为SubType 。 SubType.prototype ===
SubType.prototype的。由于第12行代码实现了，SubType 继承 SuperType导致了 SubType.prototype.constructor
指向了SuperType(),因此，这行代码的作用就是为了修正因为继承SuperType对象所有成员后，SubType的构造器也指向了SuperType.

那么，为什么注释掉也能正确调用SubType()构造函数去实例化instance1呢?

虽然instance1.constructor ===SuperType() 返回true, 但对于执行第12行来说，SubType.prototype实例化了
继承来的父类的方法和属性。在 instance1 = new SubType("heodnghui",22)中，instance1.__proto__由于
SubType.prototype指向了SuperType 而被修改为 SuperType。 因此也获得了父类继承来的属性和方法
（尽管constructor也指向了SuperType）

云服务器 GPU云服务器原型继承原型链继承 js原型链的继承 javascript原型

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

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

重新认识JavaScript面向对象: 从ES5到ES6

摘要：基于原型的面向对象在基于原型的语言中如并不存在这种区别它只有对象不论是构造函数，实例，原型本身都是对象。允许动态地向单个的对象或者整个对象集中添加或移除属性。为了解决以上两个问题，提供了构造函数创建对象的方式。 showImg(https://segmentfault.com/img/remote/1460000013229218); 一. 重新认识面向对象 1. JavaScript...

VishKozus 2019-08-30 13:56 评论0 收藏0
重新认识JavaScript面向对象: 从ES5到ES6

摘要：基于原型的面向对象在基于原型的语言中如并不存在这种区别它只有对象不论是构造函数，实例，原型本身都是对象。允许动态地向单个的对象或者整个对象集中添加或移除属性。为了解决以上两个问题，提供了构造函数创建对象的方式。 showImg(https://segmentfault.com/img/remote/1460000013229218); 一. 重新认识面向对象 1. JavaScript...

用户83 2019-08-26 11:38 评论0 收藏0
前端面试题 -- JavaScript (一)

摘要：前言前两天总结了一下方面的面试题传送门，今天翻看了一些面试中常见的几个问题只是一部分，会持续更新，分享给有需要的小伙伴，欢迎关注如果文章中有出现纰漏错误之处，还请看到的小伙伴留言指正，先行谢过以下有哪些数据类型种原始数据类型布尔表示一个逻辑前言前两天总结了一下HTML+CSS方面的面试题 (传送门)，今天翻看了一些 JavaScript 面试中常见的几个问题（只是一部分，会持续更新...

junnplus 2019-08-23 15:59 评论0 收藏0
JavaScript 原型中的哲学思想

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

sugarmo 2019-08-19 18:38 评论0 收藏0