摘要:接下解釋和屬性同樣拿上面的代碼來解釋輸出首先給構(gòu)造函數(shù)的原型對象賦給方法,由構(gòu)造函數(shù)創(chuàng)建的實例會繼承原型對象上的方法。
本文為了解決以下問題:
__proto__(實際原型)和prototype(原型屬性)不一樣!??!
constructor屬性(原型對象中包含這個屬性,實例當中也同樣會繼承這個屬性)
prototype屬性(constructor.prototype原型對象)
__proto__屬性(實例指向原型對象的指針)
首先弄清楚幾個概念:
什么是對象若干屬性的集合
什么是原型?原型是一個對象,其他對象可以通過它實現(xiàn)繼承。
哪些對象有原型?所有的對象在默認情況下都有一個原型,因為原型本身也是對象,所以每個原型自身又有一個原型(只有一種例外,默認的對象原型在原型鏈的頂端)
任何一個對象都可以成為原型接下來就是最核心的內(nèi)容:
constructor 屬性constructor屬性始終指向創(chuàng)建當前對象的構(gòu)造函數(shù)。
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(){}
以上部分即解釋了任何一個對象都有constructor屬性,指向創(chuàng)建這個對象的構(gòu)造函數(shù)
prototype屬性注意:prototype是每個函數(shù)對象都具有的屬性,被稱為原型對象,而__proto__屬性才是每個對象才有的屬性。一旦原型對象被賦予屬性和方法,那么由相應的構(gòu)造函數(shù)創(chuàng)建的實例會繼承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會繼承prototype上的屬性和方法constructor屬性和prototype屬性
每個函數(shù)都有prototype屬性,而這個prototype的constructor屬性會指向這個函數(shù)。
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屬性的指向就會發(fā)生改變了。
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屬性始終指向創(chuàng)建這個對象的構(gòu)造函數(shù)嗎? Person.prototype={ sayName:function(){ console.log(this.name); } } //這里實際上是對原型對象的重寫: Person.prototype=new Object(){ sayName:function(){ console.log(this.name); } } //看到了吧?,F(xiàn)在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 //大家可能會對這個地方產(chǎn)生疑惑?為何會第二個會輸出false,personTwo不也是由Person創(chuàng)建的嗎?這個地方應該要輸出true啊? //這里就涉及到了JS里面的原型繼承 //這個地方是因為person實例繼承了Person.prototype原型對象的所有的方法和屬性,包括constructor屬性。當Person.prototype的constructor發(fā)生變化的時候,相應的person實例上的constructor屬性也會發(fā)生變化。所以第二個會輸出false; //當然第一個是輸出true,因為改變構(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
首先給構(gòu)造函數(shù)的原型對象Person.prototype賦給sayName方法,由構(gòu)造函數(shù)Person創(chuàng)建的實例person會繼承原型對象上的sayName方法。
為什么會繼承原型對象的方法?因為ECMAscript的發(fā)明者為了簡化這門語言,同時又保持繼承性,采用了鏈式繼承的方法。
由constructor創(chuàng)建的每個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探秘:構(gòu)造函數(shù)
文章版權歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/85836.html
摘要:使用操作符,創(chuàng)建一個對象,并且執(zhí)行構(gòu)造函數(shù)方法。使用可以返回一個字典型對象對象原型每一個對象都有一個內(nèi)置的屬性指向構(gòu)造它的函數(shù)屬性而構(gòu)造函數(shù)的則指向構(gòu)造函數(shù)本生。 對象概念 在 javascript 中, 一切引用類型均為對象。 如 function Foo () {} 中,F(xiàn)oo本身就是一個對象的引用。 創(chuàng)建對象方式 字面量方式 new 構(gòu)造函數(shù) 函數(shù)聲明 Object.creat...
摘要:二構(gòu)造函數(shù)我們先復習一下構(gòu)造函數(shù)的知識上面的例子中和都是的實例。這兩個實例都有一個構(gòu)造函數(shù)屬性,該屬性是一個指針指向。原型鏈其中是對象的實例。 一. 普通對象與函數(shù)對象 JavaScript 中,萬物皆對象!但對象也是有區(qū)別的。分為普通對象和函數(shù)對象,Object 、Function 是 JS 自帶的函數(shù)對象。下面舉例說明 var o1 = {}; var o2 =new Objec...
摘要:原型對象內(nèi)部也有一個指針屬性指向構(gòu)造函數(shù)實例可以訪問原型對象上定義的屬性和方法。在創(chuàng)建子類型的實例時,不能向超類型的構(gòu)造函數(shù)中傳遞參數(shù)。 贊助我以寫出更好的文章,give me a cup of coffee? 2017最新最全前端面試題 私有變量和函數(shù) 在函數(shù)內(nèi)部定義的變量和函數(shù),如果不對外提供接口,外部是無法訪問到的,也就是該函數(shù)的私有的變量和函數(shù)。 function ...
摘要:歡迎關注前端小謳的,閱讀更多原創(chuàng)技術文章用構(gòu)造函數(shù),生成對象實例使用構(gòu)造函數(shù),并且構(gòu)造函數(shù)后臺會隱式執(zhí)行創(chuàng)建對象將構(gòu)造函數(shù)的作用域給新對象,即創(chuàng)建出的對象,函數(shù)體內(nèi)的代表出來的對象執(zhí)行構(gòu)造函數(shù)的代碼返回新對象后臺直接返回用改寫上述代碼通過關 歡迎關注前端小謳的github,閱讀更多原創(chuàng)技術文章 用構(gòu)造函數(shù),生成對象實例: 使用構(gòu)造函數(shù),并且new 構(gòu)造函數(shù)(), 后臺會隱式執(zhí)行ne...
摘要:執(zhí)行行代碼,我們可以看到控制臺打印出來的結(jié)果如下結(jié)果印證了我們上面講的內(nèi)容指向的構(gòu)造函數(shù)指向的原型對象原型對象中指向構(gòu)造函數(shù)。 在javascript中原型和原型鏈機制是最難懂的部分(沒有之一),同時也是最重要的部分,在學習的過程中你可能認認真真的看了一遍但還是完全不懂書上說的什么,的確是這樣的,我在學習的時候可是反復看了4、5遍才初步理解了。 下面我把我的理解總結(jié)了一下希望對你們有...
閱讀 1890·2021-11-25 09:43
閱讀 3180·2021-11-15 11:38
閱讀 2723·2019-08-30 13:04
閱讀 497·2019-08-29 11:07
閱讀 1510·2019-08-26 18:37
閱讀 2748·2019-08-26 14:07
閱讀 598·2019-08-26 13:52
閱讀 2295·2019-08-26 12:09