通過(guò)上一章節(jié)<面向?qū)ο笕腴T>相信大家對(duì)于面向?qū)ο蠖加辛艘恍┖苤卑椎牧私?那么面向?qū)ο笾幸粋€(gè)很重要的概念"原型"又是個(gè)什么玩意呢?可以說(shuō),如果把"原型"給吃透了,那么你對(duì)于面向?qū)ο蟮闹R(shí)點(diǎn)以及掌握50%了(當(dāng)然,只是對(duì)于我們這些新手入門而已...).
我們知道,一切皆是對(duì)象,當(dāng)然函數(shù)也不例外.那么既然是個(gè)對(duì)象,就一定有它的屬性,只是很多隱藏的屬性我們以前不知道而已.這里我就先說(shuō)說(shuō)函數(shù)的第一個(gè)比較重要的屬性--prototype.
當(dāng)我們創(chuàng)建了一個(gè)函數(shù)A之后(也就是申明),這個(gè)函數(shù)A就有了它默認(rèn)的一個(gè)屬性prototype,這個(gè)屬性是內(nèi)置好了.這時(shí)瀏覽器就會(huì)在內(nèi)存中創(chuàng)建一個(gè)"對(duì)象B",而前面函數(shù)A的prototype的屬性的值指向的就是這個(gè)"對(duì)象B",此時(shí)我們就稱"對(duì)象B"為函數(shù)A的原型對(duì)象.他們之間的這種聯(lián)系并不是簡(jiǎn)單的prototype的值指向"對(duì)象B",其實(shí)在"對(duì)象B"中也有一個(gè)默認(rèn)的屬性constructor,它的值指向了這個(gè)函數(shù)A!(注:其實(shí)任意函數(shù)中都有prototype，只不過(guò)不是構(gòu)造函數(shù)的時(shí)候prototype我們不關(guān)注而已)
OK,說(shuō)到這里,小伙們可能有點(diǎn)繞,那么我直接上圖吧!(博主還是有一定美術(shù)功底的)
這是一張簡(jiǎn)易的原型解析圖,就先看最上面?zhèn)z個(gè)框吧.函數(shù)A創(chuàng)建完畢后,它的默認(rèn)屬性prototype指向的是瀏覽器自動(dòng)生成的對(duì)象B,而對(duì)象B的內(nèi)置屬性constructor指向的是這個(gè)函數(shù)A,此時(shí),對(duì)象B就是函數(shù)A的原型對(duì)象!
好的,相信大家在博主生動(dòng)形象的解析下對(duì)原型對(duì)象應(yīng)該有了一個(gè)基本概念,那么這個(gè)原型對(duì)象它有什么用嗎?誒,你們還別小看它,它的用處還真挺大的.
這里要小伙們回憶一下了,在上節(jié)中,我們知道了創(chuàng)建一個(gè)對(duì)象可以通過(guò)構(gòu)造函數(shù)的方式來(lái)進(jìn)行創(chuàng)建.當(dāng)我們用上面的函數(shù)A作為構(gòu)造函數(shù)來(lái)創(chuàng)建一個(gè)對(duì)象A1時(shí),也就是var A1 = new A(); new一個(gè)對(duì)象出來(lái).這時(shí),對(duì)象A1其實(shí)也會(huì)有一個(gè)默認(rèn)的屬性值[proto].就像上面描述的,構(gòu)造函數(shù)A它的默認(rèn)屬性prototype指向的是原型對(duì)象B,[[proto]]屬性指向的也是原型對(duì)象B. 同一個(gè)構(gòu)造函數(shù)能用于創(chuàng)建不同的對(duì)象,再次利用構(gòu)造函數(shù)A來(lái)創(chuàng)建一個(gè)對(duì)象A2,它的[[proto]]指向的當(dāng)然也是原型對(duì)象B.(現(xiàn)在大家可以回頭看看我的img1.png了)
下面還是來(lái)看一個(gè)例子吧.
例1:
function Person(name,age){
this.name = name;
this.age = age;
}
var person1 = new Person("王先生",22);
var person2 = new Person("張先生",23);
person1 和 person2都是通過(guò)構(gòu)造函數(shù)Person創(chuàng)建出的對(duì)象,所以他倆的proto指向的都是Person的對(duì)象原型.
hasOwnProperty( )方法
用于判斷一個(gè)對(duì)象中的屬性是否來(lái)自對(duì)象本身,也就是能判斷它的來(lái)源,它是來(lái)自對(duì)象本身,還是來(lái)自這個(gè)對(duì)象的[[proto]]屬性指向的原型.
若是來(lái)自于對(duì)象本身,則返回true, 來(lái)自于原型和不存在都返回fasle;
將例1稍微改動(dòng)一下,在Person的原型對(duì)象中添加一個(gè)eat函數(shù).
例2:
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.eat=function(){
console.log('a');
}
var person1 = new Person("王先生",22);
var person2 = new Person("張先生",23);
//給person1對(duì)象添加屬性sex
person1.sex = "男";
console.log(person1.hasOwnProperty('sex'));
console.log(person1.hasOwnProperty('eat'));
=>true
=>false
可以看到不管是name,age屬性還是eat函數(shù)都是在構(gòu)造函數(shù)時(shí)就寫(xiě)入了的,也就是都存在于Person的原型對(duì)象中,所以第二個(gè)console.log輸出的就是false,而sex這個(gè)屬性是我們?cè)趧?chuàng)建完對(duì)象person1之后添加的屬性,所以可以理解為是person1的私有屬性,是存在于person1對(duì)象本身,所以第一個(gè)console.log返回的就是true.
instanceof操作符和isPrototypeOf( )方法
倆個(gè)方法非常相似,都是用于檢測(cè)一個(gè)對(duì)象是否來(lái)自于一個(gè)構(gòu)造函數(shù)
//使用instanceof操作符
function A(){ }
var a1 = new A();
console.log(a1 instanceof A);
=>true
function A(){ }
var a1 = new A();
console.log(A.prototype.isPrototypeOf(a1));
=>true
isPrototypeOf()函數(shù)用于指示對(duì)象是否存在于另一個(gè)對(duì)象的原型鏈中班眯。如果存在旅急，返回true宿刮，否則返回false狰右。
可以簡(jiǎn)單理解為一個(gè)對(duì)象是否是通過(guò)這個(gè)構(gòu)造函數(shù)來(lái)創(chuàng)建的.
和instanceof相似,但instanceof是操作符,而isPrototypeOf( )是方法
使用組合模型和動(dòng)態(tài)模型
組合模型
簡(jiǎn)單來(lái)說(shuō),就是屬性在構(gòu)造函數(shù)中創(chuàng)建,而方法在構(gòu)造函數(shù)的原型中創(chuàng)建,如:
function Person(name,age){
this.name = name; //直接在構(gòu)造函數(shù)中封裝屬性;
this.age = age;
}
Person.prototype.eat=function(food){ //在構(gòu)造函數(shù)的原型(Person.prototype)中封裝方法;
alert(this.name+"like eat"+food);
}
Person.prototype.play=function(playName){
alert(this.name+"like play"+playName);
}
var p1 = new Person("王先生",22);
var p2 = new Person("張先生",23);
p1.eat("撥娜娜");
p2.play("皮革");
動(dòng)態(tài)模型
優(yōu)點(diǎn):封裝性好
function Person(name,age){
this.name = name;
this.age = age;
if(!Person.prototype.eat){ //判斷原型中是否有eat函數(shù)
Person.prototype.eat=function(food){ //若沒(méi)有的話則添加
console.log(this.name+"like eat"+food)
}
}
if(!Person.prototype.play){
Person.prototype.play=funciton(playName){
console.log(this.name+"like play"+playName)
}
}
}
//在此可以理解為每調(diào)用一次構(gòu)造函數(shù)就執(zhí)行構(gòu)造函數(shù),所以每執(zhí)行一次就會(huì)把原先在原型中的函數(shù)舍棄,更改為和它一樣的函數(shù),則造成了有廢棄的函數(shù)產(chǎn)生;
var p1 = new Person("王先生",22);
var p2 = new Person("張先生",23);
以上倆種模型都有其各自的優(yōu)點(diǎn)和缺點(diǎn),那么有沒(méi)有好點(diǎn)的模型來(lái)完善這倆種模型呢,下面來(lái)看看這個(gè)動(dòng)態(tài)組合模型:
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype = {
eat:function(food){
console.log(this.name+"like eat"+food)
}
play:funciton(playName){
console.log(this.name+"like play"+playName)
}
}
//在此可以理解為每調(diào)用一次構(gòu)造函數(shù)就執(zhí)行構(gòu)造函數(shù),所以每執(zhí)行一次就會(huì)把原先在原型中的函數(shù)舍棄,更改為和它一樣的函數(shù),則造成了有廢棄的函數(shù)產(chǎn)生;
var p1 = new Person("王先生",22);
var p2 = new Person("張先生",23);
終極動(dòng)態(tài)組合模型
function Person(ldy){
this._init(ldy);
}
Person.prototype = {
_init:function(ldy){
this.name = ldy.name;
this.age = ldy.age;
}
eat:function(food){
console.log(this.name+"like eat"+food)
}
play:funciton(playName){
console.log(this.name+"like play"+playName)
}
}
//通過(guò)向構(gòu)造函數(shù)中傳遞一個(gè)對(duì)象opt,這個(gè)對(duì)象中將要添加的屬性添加進(jìn)去
var p1 = new Person({
name:"王先生",
age:22,
})
最后這種終極動(dòng)態(tài)組合模型摒棄了以往我們對(duì)于構(gòu)造函數(shù)的看法,它在創(chuàng)建對(duì)象 p1的時(shí)候,傳入進(jìn)去的是一個(gè)對(duì)象,這樣就可以傳入不同數(shù)量的屬性.
并且將要獲取的屬性全部直接封裝到Person的原型對(duì)象中,這樣構(gòu)造函數(shù)Person中就只需要調(diào)用一下原型對(duì)象中的_init()函數(shù)就可以了(注:_init一般用于表示初始化),想要后續(xù)添加什么方法直接在Person的原型對(duì)象中添加.
