Javascript學習筆記2 繼承 原型鏈

2021-08-16 20:36:13 字數 2665 閱讀 6870

使某個原型物件成為另乙個型別的例項,該原型物件將包含乙個指向另乙個原型的指標,如此層層遞進,就構成了例項與原型的鏈條

function

supertype

()supertype.prototype.getsupervalue = function

();function

subtype

()//繼承

subtype.prototype = new supertype();

subtype.prototype.getsubvalue = function

();var instance = new subtype();

alert(instance.getsupervalue()); //true

關係如下:所有引用型別都預設繼承了oject物件,因此所有預設原型的__proto__屬性都會指向object.prototype。關於__proto__、prototype、constructor的關係,以及js中所有物件都繼承於object這點可以用這張圖說明

更詳細的講解,請參考這篇部落格,這張圖也是引用他的

為解決原型鏈中引用值型別共享及引數傳遞問題,在子型別的建構函式的內部呼叫超型別的建構函式

function

supertype(name)

function

subtype

()var instance = new subtype();

alert(instance.name) //"zjw"

alert(instance.age) //28

原型鏈和借用建構函式組合到一塊,使用原型鏈實現對原型屬性和方法的繼承,而建構函式實現對例項屬性的繼承

function

supertype(name)

supertype.prototype.sayname = function

();function

subtype

(name,age)

subtype.prototype = new supertype(); //繼承超類

subtype.prototype.constructor = subtype;

subtype.prototype.sayage = function

();var instance1 = new subtype("zjw",29); //建立子型別

instance1.colors.push("black");

alert(instance1.colors); //"red","blue","green","black"

instance1.sayname(); //"zjw"

instance1.sayage(); //29

var instance2 = new subtype("bob",27);

alert(instance1.colors); //"red","blue","green"

instance1.sayname(); //"bob"

instance1.sayage(); //27

基於已有物件建立新物件(淺複製,引用型別屬性仍然共享)直接使用object.create()方法,接受兩個引數:要複製的物件和新添屬性的物件

var anotherperson = object.create(person,

});

建立乙個僅用於封裝繼承過程的函式,該函式在內部以某種方式來增強物件,最後返回物件,與工廠模式類似

function

createanother

(o) return

clone; //返回新物件

}var person = ;

var anotherperson = createanother(person);

anotherperson.sayhi(); //hi

解決傳統的組合繼承呼叫兩次超型別建構函式問題,該方法用寄生式繼承來繼承超型別的原型,然後再將結果指定給子型別的原型

function

inheritproperty

(subtype,supertype)

function

supertype(name)

supertype.prototype.sayname = function

();function

subtype

(name,age)

inheritproperty(subtype,supertype); //呼叫自定義的繼承函式

subtype.prototype.sayage = function

();

Javascript 學習筆記

如果在生成的html裡面有事件需要傳遞帶特殊字元的引數,處理如下 singletext 輸入 1.singletext value.escapehtml 為 將html編碼 2.singletext value.escapehtml inspect 為 3.在 jsdebugtext innerht...

javascript學習筆記

視窗操作 1改變視窗的位置 window.location 2視窗的歷史操作 previous 3建立新的視窗 window.open url 視窗名稱 視窗特徵字元 細節 不能換行寫 視窗特徵 width,height,yes,no munubar,status,scrollbars,resiza...

javaScript學習筆記

2018 12 26 標題 var num1 10 var num2 0 var result num1 num2 console.log result infinity 表示超出了js的數值範圍 類似高數里的整數除以無窮小的數,得到無窮大的結果。var num1 a var num2 3 或其它n...