文中關(guān)于一些概念說了可能三到四邊求豫,或者更多熄云,希望是加深大家的印象膨更,希望理解,重要的概念說三遍缴允,只要你能理解荚守,我啰嗦五次都愿意。
構(gòu)造函數(shù)創(chuàng)建對象
==========咱們先來一個栗子=======
function Person(name){ //構(gòu)造函數(shù) this.name=name; } Person.prototype.printName=function( ){ //原型對象 alert(this.name); } var person1=new Person('ming'); //實例化對象 console.log(person1.__proto__); //這里自己打印一下练般,印象更深刻 console.log(person1.constructor);// console.log(Person.prototype);//var person2=new Person('Frank');
(注意這里的大小寫)Person的實例person1中包含了name屬性矗漾,同時也自動生成一個__proto__屬性,該屬性指向Person的prototype薄料,可以訪問到prototype內(nèi)定義的printName方法敞贡,大概就 是這個樣子的:每個JavaScript函數(shù)都有prototype屬性,這個屬性引用了一個對象摄职,這個對象就是**原型對象**誊役。**原型對象初始化的時候是空的**,我們可以在里面自定義任何屬性和方法谷市,這些方法和屬性都將被該**構(gòu)造函數(shù)**所創(chuàng)建的對象**繼承**势木。(下一篇我會更詳細的介紹原型,很暴力的)
實例是通過構(gòu)造函數(shù)創(chuàng)建的歌懒。實例一創(chuàng)造出來就具有constructor屬性(指向構(gòu)造函數(shù))和proto屬性(指向原型對象),
構(gòu)造函數(shù)中有一個prototype屬性溯壶,這個屬性是一個指針及皂,指向它的原型對象甫男。
原型對象內(nèi)部也有一個指針(constructor屬性)指向構(gòu)造函數(shù):Person.prototype.constructor = Person;
實例可以訪問原型對象上定義的屬性和方法。
在這里person1和person2就是實例验烧,prototype是他們的原型對象板驳。
//========再來一個栗子===========
function Animal(name){ //構(gòu)造函數(shù)
this.name = name; //設(shè)置對象屬性
}
Animal.prototype.behavior = function() {
console.log("this is a "+this.name);
}
var Dog = new Animal("dog");
var Cat = new Animal("cat");
Dog.behavior();//通過Dog對象直接調(diào)用behavior方法
Cat.behavior(); //"this is a cat"
console.log(Dog.behavior==Cat.behavior);// true;
//總結(jié):構(gòu)造函數(shù)的prototype上定義的方法確實可以通過對象直接調(diào)用到,而且代碼是共享的碍拆。prototype屬性指向Animal對象若治。
================= 開始正題 ==================
-1-Prototype:
每個函數(shù)都有一個prototype屬性,也只有函數(shù)有該屬性感混。
function Person(){ }
Person.prototype.name = 'name';
var person1 = new Person();
var person2 = new Person();
console.log(person1.name) // name
console.log(person2.name) //name
問:那這個函數(shù)的prototype屬性到底指向的是什么呢端幼?是這個函數(shù)的原型嗎?
| |
| |
總結(jié):函數(shù)的prototype屬性指向了一個對象弧满,這個對象正是調(diào)用該構(gòu)造函數(shù)而創(chuàng)建的實例的原型,也就是這個例子中的person1和person2的原型婆跑。
問:什么是原型?每一個JavaScript對象(null除外)在創(chuàng)建的時候就會與之關(guān)聯(lián)另一個對象庭呜,這個對象就是我們所說的原型滑进,每一個對象都會從原型”繼承”屬性。
-2-proto:
怎么表示實例與實例原型募谎,也就是person和Person.prototype之間的關(guān)系呢扶关,這時候我們就要講到第二個屬性:
proto。每一個JavaScript對象(除了null)都具有的一個屬性数冬,叫proto节槐,這個屬性會指向該對象的原型。
function Person( ){
}
var person = new Person();
console.log(person.proto === Person.prototype); //true
問:既然實例對象和構(gòu)造函數(shù)都可以指向原型吉执,那么原型是否有屬性指向構(gòu)造函數(shù)或者實例呢疯淫?
-3- constructor
沒有指向?qū)嵗模驗橐粋€構(gòu)造函數(shù)可以生成多個實例戳玫,但是原型指向構(gòu)造函數(shù)是有的熙掺,這就要講到第三個屬性:construcotr,每個原型都有一個constructor屬性指向關(guān)聯(lián)的構(gòu)造函數(shù)
為了驗證這一點咕宿,我們可以嘗試:
function Person() {
}
console.log(Person === Person.prototype.constructor); //true
精華----綜上總結(jié):(看清大下寫)
function Person() { //構(gòu)造函數(shù)
}
var person = new Person(); //實例對象
console.log(person.proto == Person.prototype) //true
console.log(Person.prototype.constructor == Person) // true// 順便學(xué)習(xí)一個ES5的方法,可以獲得對象的原型console.log(Object.getPrototypeOf(person) === Person.prototype) //true
實例與原型
當讀取實例的屬性時币绩,如果找不到,就會查找與對象關(guān)聯(lián)的原型中的屬性府阀,如果還查不到缆镣,就去找原型的原型,一直找到最頂層為止试浙。
======舉個例子:=========
function Person() {
}
Person.prototype.name = 'name';
var person = new Person();
person.name = 'name of this person';
console.log(person.name) // name of this person
delete person.name;
console.log(person.name) // name
我設(shè)置了person的name屬性董瞻,所以我可以讀取到為’name of this person’,當我刪除了person的name屬性時,讀取person.name钠糊,從person中找不到就會從person的原型也就是person.proto == Person.prototype中查找挟秤,幸運的是我們找到了為’name’,但是萬一還沒有找到呢抄伍?哪原型的原型又是什么呢艘刚?
在前面,我說過原型也是一個對象截珍,既然是對象攀甚,我就可以用最原始的方式創(chuàng)建它,那就是
var obj = new Object();//字面兩創(chuàng)建對象new一個
obj.name = 'name'岗喉;
console.log(obj.name) // name
所以原型對象是通過Object構(gòu)造函數(shù)生成的秋度,結(jié)合之前所講,實例的proto指向構(gòu)造函數(shù)的prototype,
原型鏈
問:Object.prototype的原型是什么?
null沈堡,嗯静陈,對就是null,所以查到Object.prototype就可以停止查找了
補充,最后,補充和糾正本文中一些不嚴謹?shù)牡胤剑?/strong>
首先是constructor,
function Person() {
}
var person = new Person();
console.log(person.constructor === Person); // true
當獲取person.constructor時诞丽,其實person中并沒有constructor屬性,當不能讀取到constructor屬性時鲸拥,會先從person的原型也就是Person.prototype中讀取,正好原型中有該屬性僧免,所以
person.constructor === Person.prototype.constructor