技術學習 js繼承

2022-07-07 06:15:11 字數 2371 閱讀 6862

js物件導向繼承分為兩大類,主要分為物件繼承和非物件繼承(拷貝繼承),這次主要談物件繼承。物件繼承主要有兩種:原型繼承和物件冒充繼承。

一、原型繼承,將子類的原型引用父類的例項,從而達到將子類的原型與父類的原型和父類的建構函式關聯起來的目的。

function

person(name)

person.prototype.sayname=function

()

function

student(age)

student.prototype=new person('zhangsan');//

子類建構函式指向父類例項

student.prototype.constructor=student;//

上一步指向父類例項時候,建構函式也指向父類,此處還原

var s=new student(20);

alert(s.age);

//20

s.sayname(); //

zhangsan

原型繼承可以有效的將父類的原型和父類的建構函式裡的方法均複製給子類,但是由於子類的建構函式必須指向父類例項,因此父類的成員變數無法通過子類進行例項化,如上述例子,name只能為zhangsan,無法進行子類初始化時候設定。因此我們使用第二種方法來解決此問題。

二、物件冒充法:

function

person(name)

person.prototype.sayname=function

()

function

student(name,age)

var s=new student('zhangsan',20);

alert(s.name)

//zhangsan

alert(s.age); //

20 s.sayname(); //

error 不是乙個方法

person.call(this,name)物件冒充,本質是使用執行s.person(name),將student作為執行環境,因此this.name將賦值給student的例項s,但是我們看到s.sayname()方法執行中報錯,因此此方式無法將原型賦值給子類。

三、混合繼承,結合了原型繼承和物件冒充繼承的優點,解決了兩者的不足。

function

person(name)

person.prototype.sayname=function

()

function

student(name,age)

//原型繼承

student.prototype=new person();//

子類建構函式指向父類例項,與直接原型繼承不同,此處不需要傳遞引數

student.prototype.constructor=student;//

上一步指向父類例項時候,建構函式也指向父類,此處還原

var s=new student('zhangsan',20);

alert(s.name)

//zhangsan 屬性成功繼承

alert(s.age); //

20 s.sayname(); //

zhangsan 原型成功繼承

混合繼承完美的解決了原型和屬性的繼承,但是我們發現繼承中父類的屬性在物件冒充和原型繼承中都會被引用,如果屬性很多會造成大量重複引用工作,因此參考extjs的原型設計,對繼承進行優化。 

四、優化,設計思想核心為:

1、在extend方法,建立中轉函式,將中轉函式的原型指向父類原型,此時中轉函式只有原型,無屬性,對中轉函式進行例項化,並賦值給子類,成功過濾掉父類的屬性。

2、將父類的原型進行保留,可以對子類定義中的父類進行解耦,也可以在子類覆蓋父類後通過引用再次呼叫父類方法

function

extend(sub,sup)

function

person(name,age)

person.prototype.id=10;

person.prototype.sayname=function

()

function

stu(name,age,no)

person();

extend(stu,person);

stu.prototype.sayname=function

()

var s=new stu('zhangsna',10,100);

stu.superclass.sayname.call(s);

通過深拷貝建立繼承關係為jquery的繼承實現方法,此次暫不討論。

JS學習 原型 繼承

原型鏈的理解 原型鏈就是 物件.proto proto 這種鏈式的呼叫。本質上是向js中公用屬性組成的物件的一種訪問。聖杯模式 function inherit target,origin f和origin公用乙個原型 f.prototype origin.prototype target去繼承f ...

js學習筆記 031 繼承

為了更好地理解這種繼承,必須更深入地了解屬性的訪問細節。假設要查詢物件o的屬性,如果o中不存在x,那麼將會繼續在o的原型物件中查詢屬性x。如果原型物件中也沒有x,但這個原型物件也有原型,那麼繼續在這個原型物件的原型上查詢,直到找到x或者找到乙個原型是null物件為止。可以看到,物件的原型屬性構成了乙...

JS學習之類的繼承

js繼承的實現方式 首先宣告乙個父類 function animal name animal.prototype.eat function food 1 建構函式的繼承 物件dog繼承了父類animal身上的屬性和方法,不過屬性相同,覆蓋了父類的屬性 特點 1 子類共享父類的屬性和方法 2 可以向父...