技術學習 js繼承

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繼承

JS學習原型繼承

js學習筆記 031 繼承

JS學習之類的繼承

技術學習 js繼承

JS學習 原型 繼承

js學習筆記 031 繼承

JS學習之類的繼承

相關推薦

JS學習原型繼承