资讯专栏INFORMATION COLUMN

constructor, prototype, __proto__ 详解

lifesimple / 488人阅读

摘要:接下解释和属性同样拿上面的代码来解释输出首先给构造函数的原型对象赋给方法,由构造函数创建的实例会继承原型对象上的方法。

本文为了解决以下问题:

__proto__(实际原型)和prototype(原型属性)不一样!!!

constructor属性(原型对象中包含这个属性,实例当中也同样会继承这个属性)

prototype属性(constructor.prototype原型对象)

__proto__属性(实例指向原型对象的指针)

首先弄清楚几个概念:

什么是对象

若干属性的集合

什么是原型?

原型是一个对象,其他对象可以通过它实现继承。

哪些对象有原型?

所有的对象在默认情况下都有一个原型,因为原型本身也是对象,所以每个原型自身又有一个原型(只有一种例外,默认的对象原型在原型链的顶端)

任何一个对象都可以成为原型

接下来就是最核心的内容:

constructor 属性

constructor属性始终指向创建当前对象的构造函数。

    var arr=[1,2,3];
    console.log(arr.constructor); //输出 function Array(){}
    var a={};
    console.log(arr.constructor);//输出 function Object(){}
    var bool=false;
    console.log(bool.constructor);//输出 function Boolean(){}
    var name="hello";
    console.log(name.constructor);//输出 function String(){}
    var sayName=function(){}
    console.log(sayName.constrctor)// 输出 function Function(){}
    
    //接下来通过构造函数创建instance
    function A(){}
    var a=new A();
    console.log(a.constructor); //输出 function A(){}

以上部分即解释了任何一个对象都有constructor属性,指向创建这个对象的构造函数

prototype属性

注意:prototype是每个函数对象都具有的属性,被称为原型对象,而__proto__属性才是每个对象才有的属性。一旦原型对象被赋予属性和方法,那么由相应的构造函数创建的实例会继承prototype上的属性和方法

    //constructor : A
    //instance : a
    function A(){}
    var a=new A();

    A.prototype.name="xl";
    A.prototype.sayName=function(){
        console.log(this.name);
    }
    
    console.log(a.name);// "xl"
    a.sayName();// "xl"
    
    //那么由constructor创建的instance会继承prototype上的属性和方法
constructor属性和prototype属性

每个函数都有prototype属性,而这个prototypeconstructor属性会指向这个函数。

    function Person(name){
        this.name=name;
    }
    Person.prototype.sayName=function(){
        console.log(this.name);
    }
    
    var person=new Person("xl");
    
    console.log(person.constructor); //输出 function Person(){}
    console.log(Person.prototype.constructor);//输出 function Person(){}
    console.log(Person.constructor); //输出 function Function(){}

如果我们重写(重新定义)这个Person.prototype属性,那么constructor属性的指向就会发生改变了。

    Person.prototype={
        sayName:function(){
            console.log(this.name);
        }
    }
    
    console.log(person.constructor==Person); //输出 false (这里为什么会输出false后面会讲)
    console.log(Person.constructor==Person); //输出 false
    
    console.log(Person.prototype.constructor);// 输出 function Object(){}  
    //这里为什么会输出function Object(){}
    //还记得之前说过constructor属性始终指向创建这个对象的构造函数吗?
    
    Person.prototype={
        sayName:function(){
            console.log(this.name);
        }
    }
    //这里实际上是对原型对象的重写:
    Person.prototype=new Object(){
        sayName:function(){
            console.log(this.name);
        }
    }
    //看到了吧。现在Person.prototype.constructor属性实际上是指向Object的。
    
    //那么我如何能将constructor属性再次指向Person呢?
    Person.prototype.constructor=Person;

接下来解释为什么,看下面的例子

    function Person(name){
        this.name = name;
    }
    
    var personOne=new Person("xl");
    
    Person.prototype = {
        sayName: function(){
            console.log(this.name);
        }
    };
    
    var personTwo = new Person("XL");
    
    console.log(personOne.constructor == Person); //输出true
    console.log(personTwo.constructor == Person); //输出false   
    //大家可能会对这个地方产生疑惑?为何会第二个会输出false,personTwo不也是由Person创建的吗?这个地方应该要输出true啊?
    //这里就涉及到了JS里面的原型继承
    //这个地方是因为person实例继承了Person.prototype原型对象的所有的方法和属性,包括constructor属性。当Person.prototype的constructor发生变化的时候,相应的person实例上的constructor属性也会发生变化。所以第二个会输出false;
    //当然第一个是输出true,因为改变构造函数的prototype属性是在personOne被创建出来之后。

接下解释__proto__prototype属性
同样拿上面的代码来解释:

    function Person(name){
        this.name=name;
    }
    Person.prototype.sayName=function(){
        console.log(this.name);
    }
    var person=new Person("xl");
    person.sayName(); //输出 "xl"

    //constructor : Person
    //instance : person
    //prototype : Person.prototype

首先给构造函数的原型对象Person.prototype赋给sayName方法,由构造函数Person创建的实例person会继承原型对象上的sayName方法。

为什么会继承原型对象的方法?

因为ECMAscript的发明者为了简化这门语言,同时又保持继承性,采用了链式继承的方法。

constructor创建的每个instance都有个__proto__属性,它指向constructor.prototype。那么constrcutor.prototype上定义的属性和方法都会被instance所继承.

    function Person(name){
        this.name=name;
    }
    Person.prototype.sayName=function(){
        console.log(this.name);
    }
    
    var personOne=new Person("a");
    var personTwo=new Person("b");
    
    personOne.sayName(); // 输出  "a"
    personTwo.sayName(); //输出 "b"
    
    console.log(personOne.__proto__==Person.prototype); // true
    console.log(personTwo.__proto__==Person.prototype); // true
    
    console.log(personOne.constructor==Person); //true
    console.log(personTwo.constructor==Person); //true
    console.log(Person.prototype.constructor==Person); //true
    
    console.log(Person.constructor); //function Function(){}
    console.log(Person.__proto__.__proto__); // Object{} 

参考文章:

强大的原型和原型链

js原型链看图说明

理解javascript原型

javascript类和继承:constructor

javascript探秘:构造函数

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

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

相关文章

  • 【JS基础】Object 对象的原型概念详解

    摘要:使用操作符,创建一个对象,并且执行构造函数方法。使用可以返回一个字典型对象对象原型每一个对象都有一个内置的属性指向构造它的函数属性而构造函数的则指向构造函数本生。 对象概念 在 javascript 中, 一切引用类型均为对象。 如 function Foo () {} 中,Foo本身就是一个对象的引用。 创建对象方式 字面量方式 new 构造函数 函数声明 Object.creat...

    appetizerio 评论0 收藏0
  • 【前端基础进阶】JS原型、原型链、对象详解

    摘要:二构造函数我们先复习一下构造函数的知识上面的例子中和都是的实例。这两个实例都有一个构造函数属性,该属性是一个指针指向。原型链其中是对象的实例。 一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的。分为普通对象和函数对象,Object 、Function 是 JS 自带的函数对象。下面举例说明 var o1 = {}; var o2 =new Objec...

    explorer_ddf 评论0 收藏0
  • JavaScript学习总结(五)原型和原型链详解

    摘要:原型对象内部也有一个指针属性指向构造函数实例可以访问原型对象上定义的属性和方法。在创建子类型的实例时,不能向超类型的构造函数中传递参数。 赞助我以写出更好的文章,give me a cup of coffee? 2017最新最全前端面试题 私有变量和函数 在函数内部定义的变量和函数,如果不对外提供接口,外部是无法访问到的,也就是该函数的私有的变量和函数。 function ...

    EscapedDog 评论0 收藏0
  • 详解ES6中的class——基本概念

    摘要:欢迎关注前端小讴的,阅读更多原创技术文章用构造函数,生成对象实例使用构造函数,并且构造函数后台会隐式执行创建对象将构造函数的作用域给新对象,即创建出的对象,函数体内的代表出来的对象执行构造函数的代码返回新对象后台直接返回用改写上述代码通过关 欢迎关注前端小讴的github,阅读更多原创技术文章 用构造函数,生成对象实例: 使用构造函数,并且new 构造函数(), 后台会隐式执行ne...

    mengera88 评论0 收藏0
  • javaScript原型及原型链详解(一)

    摘要:执行行代码,我们可以看到控制台打印出来的结果如下结果印证了我们上面讲的内容指向的构造函数指向的原型对象原型对象中指向构造函数。 在javascript中原型和原型链机制是最难懂的部分(没有之一),同时也是最重要的部分,在学习的过程中你可能认认真真的看了一遍但还是完全不懂书上说的什么,的确是这样的,我在学习的时候可是反复看了4、5遍才初步理解了。 下面我把我的理解总结了一下希望对你们有...

    springDevBird 评论0 收藏0

发表评论

0条评论

lifesimple

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<