DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 全面理解JavaScript中的繼承(必看)
全面理解JavaScript中的繼承(必看)
編輯:關於JavaScript     

JavaScript中我們可以借助原型實現繼承。

例如

function baz(){
this.oo="";
}

function foo(){

}
foo.prototype=new baz();
var myFoo=new foo();
myFoo.oo;

這樣我們就可以訪問到baz裡的屬性oo啦。在實際使用中這個樣不行滴,由於原型的共享特點(數據保存在了堆上),

所有實例都使用一個原型,一但baz的屬性有引用類型就悲劇了,一個實例修改了其他實例也都跟著變了...wuwuwu

自然就有了組合式繼承

function baz(){
this.oo="";
}
baz.prototype.xx=function(){

}

function foo(){
baz.call(this);//第二次調用
}
foo.prototype=new baz();//第一次調用
var myFoo=new foo();
myFoo.oo;
myFoo.xx;

這樣就會有一個問題,代碼裡也表明出來了,baz會被調用兩次,身為處女座的怎麼可以允許呢..

插一句,第二種方式就不用出現第一種方式的問題嗎?答案是不會的。

原因是屬性的查找是先從對象自身開始,沒找到才會去原型中去找,call時就把屬性給繼承了。

再插一句,那這樣只使用call繼承不就行了嗎?如果不使用原型這個是可行的,但是作為處女座怎麼能不使用原型呢,

在原型上方法是共享的,這樣性能就好了很多呀。

寄生組合式繼承

__extends=function (p,c){
function ctor(){
this.constructor=c;//賦值構造函數
}
ctor.prototype=p.prototype;
c.prototype=new ctor();
}

function baz(){
this.oo=[1];
}
baz.prototype.xx=function(){

}
__extends(baz,foo);
function foo(){
baz.call(this);
}
var myFoo=new foo();
myFoo.oo;
myFoo.xx;

這樣不但解決了兩次調用的問題,還解決了對象調用構造函數時調用的是真實的創建對象的函數而不是原型鏈上其他的構造函數。

代碼裡有表明。

構造函數是原型對象上的一個屬性,是對象的創建者。由於我們的原型屬性被從新賦值了所以構造函數時繼承來的。

這裡要說一下,對象是怎樣創建,也就是new都干了些什麼。

例如:

var a=new b();

其實是這樣的,a={};創建了一個給a,然後b.call(a);call裡初始化a,在call之前還有一步,就是a的內部原型對象

設置為b的原型屬性指向的原型對象。原型上有構造函數屬性,構造函數用來創建對象分配內存控件。

大概就這些...看看時間也不早了,碎吧,保持平和的心態切勿浮躁,努力去改變明天,希望一切都會慢慢變好。

以上就是小編為大家帶來的全面理解JavaScript中的繼承(必看)的全部內容了,希望大家多多支持腳步之家。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved