Js中constructor, prototype, __proto__ 詳解

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(){}        //接下來通過構(gòu)造函數(shù)創(chuàng)建instance    function A(){}    var a=new A();    console.log(a.constructor); //輸出 function A(){}

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創(chuàng)建的instance會(huì)繼承prototype上的屬性和方法

constructor屬性和prototype屬性

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={        sayName:function(){            console.log(this.name);        }    }        console.log(person.constructor==Person); //輸出 false (這里為什么會(huì)輸出false后面會(huì)講)    console.log(Person.constructor==Person); //輸出 false        console.log(Person.prototype.constructor);// 輸出 function Object(){}      //這里為什么會(huì)輸出function Object(){}    //還記得之前說過constructor屬性始終指向創(chuàng)建這個(gè)對(duì)象的構(gòu)造函數(shù)嗎？        Person.prototype={        sayName:function(){            console.log(this.name);        }    }    //這里實(shí)際上是對(duì)原型對(duì)象的重寫：    Person.prototype=new Object(){        sayName:function(){            console.log(this.name);        }    }    //看到了吧?，F(xiàn)在Person.prototype.constructor屬性實(shí)際上是指向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       //大家可能會(huì)對(duì)這個(gè)地方產(chǎn)生疑惑？為何會(huì)第二個(gè)會(huì)輸出false,personTwo不也是由Person創(chuàng)建的嗎？這個(gè)地方應(yīng)該要輸出true??？    //這里就涉及到了js里面的原型繼承    //這個(gè)地方是因?yàn)閜erson實(shí)例繼承了Person.prototype原型對(duì)象的所有的方法和屬性，包括constructor屬性。當(dāng)Person.prototype的constructor發(fā)生變化的時(shí)候，相應(yīng)的person實(shí)例上的constructor屬性也會(huì)發(fā)生變化。所以第二個(gè)會(huì)輸出false;    //當(dāng)然第一個(gè)是輸出true，因?yàn)楦淖儤?gòu)造函數(shù)的prototype屬性是在personOne被創(chuàng)建出來之后。

__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

為什么會(huì)繼承原型對(duì)象的方法？

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{}
本文完~