Js原型链constructor prototype proto属性实例详解

更新时间：2023年10月20日 09:15:08 作者：油墨香^_^

这篇文章主要介绍了Js原型链constructor prototype __proto__属性实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

导读

__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上的属性和方法。

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属性，而这个prototype的constructor属性会指向这个函数。

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
//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原型链constructor prototype __proto__属性实例详解的详细内容，更多关于Js 原型链属性的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

threeJs实现波纹扩散及光标浮动效果详解
这篇文章主要为大家介绍了threeJs实现波纹扩散及光标浮动效果详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
JavaScript文档对象模型DOM
这篇文章主要介绍了JavaScript文档对象模型DOM，当网页被加载时，浏览器会创建页面的文档对象模型，通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。下面来看看文章得详细内容,需要的朋友可以参考一下
2021-11-11
Thinkphp5微信小程序获取用户信息接口的实例详解
这篇文章主要介绍了Thinkphp5微信小程序获取用户信息接口的实例详解的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下
2017-09-09
微信小程序封装http访问网络库实例代码
这篇文章主要介绍了微信小程序封装http访问网络库实例代码的相关资料,需要的朋友可以参考下
2017-05-05
微信小程序参数传递详解
这篇文章主要介绍了微信小程序参数传递详解的相关资料,需要的朋友可以参考下
2016-10-10
ECharts的三维可视化及在微信小程序中使用示例
这篇文章主要为大家介绍了ECharts的三维可视化及在微信小程序中使用示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
微信小程序教程之wxapp视图容器 swiper
这篇文章主要介绍了微信小程序教程之wxapp视图容器 swiper的相关资料,需要的朋友可以参考下
2016-10-10
jscpd统计项目中的代码重复度使用详解
这篇文章主要为大家介绍了jscpd统计项目中的代码重复度使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
15个值得收藏的JavaScript函数
在开发一个JavaScript项目时，经常会用到以前开发过的一些工具函数，收集这些函数，当你需要它们的时候，将节省你大量的开发时间，本文将给大家带来15个常用的工具函数，需要的小伙伴可以参考下
2021-09-09
JS前端可视化GraphQL使用详解
这篇文章主要为大家介绍了JS前端可视化GraphQL使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08