深入理解Javascript物件導向程式設計

發表於2015-12-23

一：理解建構函式原型(prototype)機制

prototype是javascript實現與管理繼承的一種機制，也是物件導向的設計思想.建構函式的原型儲存著引用物件的一個指標，該指標指向與一個原型物件，物件內部儲存著函式的原始屬性和方法；我們可以藉助prototype屬性，可以訪問原型內部的屬性和方法。

當建構函式被實列化後，所有的例項物件都可以訪問建構函式的原型成員，如果在原型中宣告一個成員，所有的實列方法都可以共享它，比如如下程式碼：

// 建構函式A 它的原型有一個getName方法
function A(name){
    this.name = name;
}
A.prototype.getName = function(){
    return this.name;
}
// 實列化2次後 該2個實列都有原型getName方法；如下程式碼
var instance1 = new A("longen1");
var instance2 = new A("longen2");
console.log(instance1.getName()); //longen1
console.log(instance2.getName()); // longen2

// 建構函式A 它的原型有一個getName方法

function A(name){

this.name = name;

}

A.prototype.getName = function(){

return this.name;

}

// 實列化2次後該2個實列都有原型getName方法；如下程式碼

var instance1 = new A("longen1");

var instance2 = new A("longen2");

console.log(instance1.getName()); //longen1

console.log(instance2.getName()); // longen2

原型具有普通物件結構，可以將任何普通物件設定為原型物件; 一般情況下，物件都繼承與Object,也可以理解Object是所有物件的超類,Object是沒有原型的，而建構函式擁有原型，因此實列化的物件也是Object的實列，如下程式碼：

// 實列化物件是建構函式的實列
console.log(instance1 instanceof A); //true
console.log(instance2 instanceof A); // true

// 實列化物件也是Object的實列
console.log(instance1 instanceof Object); //true
console.log(instance2 instanceof Object); //true

//Object 物件是所有物件的超類，因此建構函式也是Object的實列
console.log(A instanceof Object); // true

// 但是實列化物件 不是Function物件的實列 如下程式碼
console.log(instance1 instanceof Function); // false
console.log(instance2 instanceof Function); // false

// 但是Object與Function有關係 如下程式碼說明
console.log(Function instanceof Object);  // true
console.log(Object instanceof Function);  // true

// 實列化物件是建構函式的實列

console.log(instance1 instanceof A); //true

console.log(instance2 instanceof A); // true

// 實列化物件也是Object的實列

console.log(instance1 instanceof Object); //true

console.log(instance2 instanceof Object); //true

//Object 物件是所有物件的超類，因此建構函式也是Object的實列

console.log(A instanceof Object); // true

// 但是實列化物件不是Function物件的實列如下程式碼

console.log(instance1 instanceof Function); // false

console.log(instance2 instanceof Function); // false

// 但是Object與Function有關係如下程式碼說明

console.log(Function instanceof Object); // true

console.log(Object instanceof Function); // true

如上程式碼，Function是Object的實列，也可以是Object也是Function的實列;他們是2個不同的構造器，我們繼續看如下程式碼:

var f = new Function();
var o = new Object();
console.log("------------"); 
console.log(f instanceof Function);  //true
console.log(o instanceof Function);  // false
console.log(f instanceof Object);    // true
console.log(o instanceof Object);   // true

var f = new Function();

var o = new Object();

console.log("------------");

console.log(f instanceof Function); //true

console.log(o instanceof Function); // false

console.log(f instanceof Object); // true

console.log(o instanceof Object); // true

我們明白，在原型上增加成員屬性或者方法的話，它被所有的實列化物件所共享屬性和方法，但是如果實列化物件有和原型相同的成員成員名字的話，那麼它取到的成員是本實列化物件，如果本實列物件中沒有的話，那麼它會到原型中去查詢該成員，如果原型找到就返回，否則的會返回undefined，如下程式碼測試

function B(){
    this.name = "longen2";
}
B.prototype.name = "AA";
B.prototype.getName = function(){
    return this.name;
};

var b1 = new B();
// 在本實列查詢，找到就返回，否則到原型查詢
console.log(b1.name); // longen2

// 在本實列沒有找到該方法，就到原型去查詢
console.log(b1.getName());//longen2

// 如果在本實列沒有找到的話，到原型上查詢也沒有找到的話，就返回undefined
console.log(b1.a); // undefined

// 現在我使用delete運算子刪除本地實列屬性，那麼取到的是就是原型屬性了，如下程式碼：
delete b1.name;
console.log(b1.name); // AA

function B(){

this.name = "longen2";

}

B.prototype.name = "AA";

B.prototype.getName = function(){

return this.name;

};

var b1 = new B();

// 在本實列查詢，找到就返回，否則到原型查詢

console.log(b1.name); // longen2

// 在本實列沒有找到該方法，就到原型去查詢

console.log(b1.getName());//longen2

// 如果在本實列沒有找到的話，到原型上查詢也沒有找到的話，就返回undefined

console.log(b1.a); // undefined

// 現在我使用delete運算子刪除本地實列屬性，那麼取到的是就是原型屬性了，如下程式碼：

delete b1.name;

console.log(b1.name); // AA

二：理解原型域鏈的概念

原型的優點是能夠以物件結構為載體，建立大量的實列，這些實列能共享原型中的成員(屬性和方法);同時也可以使用原型實現物件導向中的繼承機制~ 如下程式碼：下面我們來看這個建構函式AA和建構函式BB，當BB.prototype = new AA(11);執行這個的時候，那麼B就繼承與A，B中的原型就有x的屬性值為11

function AA(x){
    this.x = x;
}
function BB(x) {
    this.x = x;
}
BB.prototype = new AA(11);
console.log(BB.prototype.x); //11

// 我們再來理解原型繼承和原型鏈的概念，程式碼如下，都有註釋
function A(x) {
    this.x = x;
}
// 在A的原型上定義一個屬性x = 0
A.prototype.x = 0;
function B(x) {
    this.x = x;
}
B.prototype = new A(1);

function AA(x){

this.x = x;

}

function BB(x) {

this.x = x;

}

BB.prototype = new AA(11);

console.log(BB.prototype.x); //11

// 我們再來理解原型繼承和原型鏈的概念，程式碼如下，都有註釋

function A(x) {

this.x = x;

}

// 在A的原型上定義一個屬性x = 0

A.prototype.x = 0;

function B(x) {

this.x = x;

}

B.prototype = new A(1);

實列化A new A(1)的時候在A函式內this.x =1， B.prototype = new A(1);B.prototype 是A的實列也就是B繼承於A，即B.prototype.x = 1; 如下程式碼：

console.log(B.prototype.x); // 1
// 定義C的建構函式
function C(x) {
    this.x = x;
}
C.prototype = new B(2);

console.log(B.prototype.x); // 1

// 定義C的建構函式

function C(x) {

this.x = x;

}

C.prototype = new B(2);

C.prototype = new B(2); 也就是C.prototype 是B的實列，C繼承於B；那麼new B(2)的時候在B的建構函式內 this.x = 2；那麼 C的原型上會有一個屬性x =2 即C.prototype.x = 2; 如下程式碼：

console.log(C.prototype.x); // 2

1	console.log(C.prototype.x); // 2

下面是實列化 var d = new C(3); 實列化C的建構函式時候，那麼在C的建構函式內this.x = 3; 因此如下列印實列化後的d.x = 3；如下程式碼：

var d = new C(3);
console.log(d.x); // 3

1 2	var d = new C(3); console.log(d.x); // 3

刪除d.x 再訪問d.x的時候本實列物件被刪掉，只能從原型上去查詢；由於C.prototype = new B(2); 也就是C繼承於B，因此C的原型也有x = 2；即C.prototype.x = 2; 如下程式碼：

delete d.x;
console.log(d.x);  //2

1 2	delete d.x; console.log(d.x); //2

刪除C.prototype.x後，我們從上面程式碼知道，C是繼承於B的，自身的原型被刪掉後，會去查詢父元素的原型鏈，因此在B的原型上找到x =1; 如下程式碼：

delete C.prototype.x;
console.log(d.x);  // 1

1 2	delete C.prototype.x; console.log(d.x); // 1

當刪除B的原型屬性x後，由於B是繼承於A的，因此會從父元素的原型鏈上查詢A原型上是否有x的屬性，如果有的話，就返回，否則看A是否有繼承，沒有繼承的話，繼續往Object上去查詢，如果沒有找到就返回undefined 因此當刪除B的原型x後，delete B.prototype.x; 列印出A上的原型x=0; 如下程式碼：

delete B.prototype.x;
console.log(d.x);  // 0

// 繼續刪除A的原型x後 結果沒有找到，就返回undefined了;
delete A.prototype.x;
console.log(d.x);  // undefined

delete B.prototype.x;

console.log(d.x); // 0

// 繼續刪除A的原型x後結果沒有找到，就返回undefined了;

delete A.prototype.x;

console.log(d.x); // undefined

在javascript中，一切都是物件，Function和Object都是函式的實列;建構函式的父原型指向於Function原型，Function.prototype的父原型指向與Object的原型，Object的父原型也指向與Function原型，Object.prototype是所有原型的頂層;

如下程式碼：

Function.prototype.a = function(){
    console.log("我是父原型Function");
}
Object.prototype.a = function(){
    console.log("我是 父原型Object");
}
function A(){
    this.a = "a";
}
A.prototype = {
    B: function(){
        console.log("b");
    }
}
// Function 和 Object都是函式的實列 如下：
console.log(A instanceof Function);  // true
console.log(A instanceof Object); // true

// A.prototype是一個物件，它是Object的實列，但不是Function的實列
console.log(A.prototype instanceof Function); // false
console.log(A.prototype instanceof Object); // true

// Function是Object的實列 同是Object也是Function的實列
console.log(Function instanceof Object);   // true
console.log(Object instanceof Function); // true

/*
 * Function.prototype是Object的實列 但是Object.prototype不是Function的實列
 * 說明Object.prototype是所有父原型的頂層
 */
console.log(Function.prototype instanceof Object);  //true
console.log(Object.prototype instanceof Function);  // false

Function.prototype.a = function(){

console.log("我是父原型Function");

}

Object.prototype.a = function(){

console.log("我是父原型Object");

}

function A(){

this.a = "a";

}

A.prototype = {

B: function(){

console.log("b");

}

// Function 和 Object都是函式的實列如下：

console.log(A instanceof Function); // true

console.log(A instanceof Object); // true

// A.prototype是一個物件，它是Object的實列，但不是Function的實列

console.log(A.prototype instanceof Function); // false

console.log(A.prototype instanceof Object); // true

// Function是Object的實列同是Object也是Function的實列

console.log(Function instanceof Object); // true

console.log(Object instanceof Function); // true

* Function.prototype是Object的實列但是Object.prototype不是Function的實列

* 說明Object.prototype是所有父原型的頂層

console.log(Function.prototype instanceof Object); //true

console.log(Object.prototype instanceof Function); // false

三：理解原型繼承機制

建構函式都有一個指標指向原型，Object.prototype是所有原型物件的頂層，比如如下程式碼：

var obj = {};
Object.prototype.name = "tugenhua";
console.log(obj.name); // tugenhua

var obj = {};

Object.prototype.name = "tugenhua";

console.log(obj.name); // tugenhua

給Object.prototype 定義一個屬性，通過字面量構建的物件的話，都會從父類那邊獲取Object.prototype的屬性；

從上面程式碼我們知道，原型繼承的方法是：假如A需要繼承於B，那麼A.prototype(A的原型) = new B()（作為B的實列）即可實現A繼承於B; 因此我們下面可以初始化一個空的建構函式;然後把物件賦值給建構函式的原型，然後返回該建構函式的實列；即可實現繼承; 如下程式碼：

if(typeof Object.create !== 'function') {
    Object.create = function(o) {
        var F = new Function();
        F.prototype = o;
        return new F();
    }
}
var a = {
    name: 'longen',
    getName: function(){
        return this.name;
    }
};
var b = {};
b = Object.create(a);
console.log(typeof b); //object
console.log(b.name);   // longen
console.log(b.getName()); // longen

if(typeof Object.create !== 'function') {

Object.create = function(o) {

var F = new Function();

F.prototype = o;

return new F();

}

var a = {

name: 'longen',

getName: function(){

return this.name;

}

};

var b = {};

b = Object.create(a);

console.log(typeof b); //object

console.log(b.name); // longen

console.log(b.getName()); // longen

如上程式碼:我們先檢測Object是否已經有Object.create該方法;如果沒有的話就建立一個；該方法內建立一個空的構造器，把引數物件傳遞給建構函式的原型，最後返回該建構函式的實列，就實現了繼承方式；如上測試程式碼：先定義一個a物件，有成員屬性name=’longen’，還有一個getName()方法;最後返回該name屬性; 然後定義一個b空物件，使用Object.create(a);把a物件繼承給b物件，因此b物件也有屬性name和成員方法getName();

理解原型查詢原理：物件查詢先在該建構函式內查詢對應的屬性，如果該物件沒有該屬性的話，

那麼javascript會試著從該原型上去查詢，如果原型物件中也沒有該屬性的話，那麼它們會從原型中的原型去查詢，直到查詢的Object.prototype也沒有該屬性的話，那麼就會返回undefined;因此我們想要僅在該物件內查詢的話，為了提高效能，我們可以使用hasOwnProperty()來判斷該物件內有沒有該屬性，如果有的話，就執行程式碼(使用for-in迴圈查詢)：如下：

var obj = {
    "name":'tugenhua',
    "age":'28'
};
// 使用for-in迴圈
for(var i in obj) {
    if(obj.hasOwnProperty(i)) {
        console.log(obj[i]); //tugenhua 28
    }
}

var obj = {

"name":'tugenhua',

"age":'28'

};

// 使用for-in迴圈

for(var i in obj) {

if(obj.hasOwnProperty(i)) {

console.log(obj[i]); //tugenhua 28

}

如上使用for-in迴圈查詢物件裡面的屬性，但是我們需要明白的是：for-in迴圈查詢物件的屬性，它是不保證順序的，for-in迴圈和for迴圈；最本質的區別是：for迴圈是有順序的，for-in迴圈遍歷物件是無序的，因此我們如果需要物件保證順序的話，可以把物件轉換為陣列來，然後再使用for迴圈遍歷即可;

下面我們來談談原型繼承的優點和缺點

// 先看下面的程式碼：
// 定義建構函式A，定義特權屬性和特權方法
function A(x) {
    this.x1 = x;
    this.getX1 = function(){
        return this.x1;
    }
}
// 定義建構函式B，定義特權屬性和特權方法
function B(x) {
    this.x2 = x;
    this.getX2 = function(){
        return this.x1 + this.x2;
    }
}
B.prototype = new A(1);

// 先看下面的程式碼：

// 定義建構函式A，定義特權屬性和特權方法

function A(x) {

this.x1 = x;

this.getX1 = function(){

return this.x1;

}

// 定義建構函式B，定義特權屬性和特權方法

function B(x) {

this.x2 = x;

this.getX2 = function(){

return this.x1 + this.x2;

}

B.prototype = new A(1);

B.prototype = new A(1);這句程式碼執行的時候,B的原型繼承於A，因此B.prototype也有A的屬性和方法,即：B.prototype.x1 = 1; B.prototype.getX1 方法；但是B也有自己的特權屬性x2和特權方法getX2; 如下程式碼：

function C(x) {
    this.x3 = x;
    this.getX3 = function(){
        return this.x3 + this.x2;
    }
}
C.prototype = new B(2);
C.prototype = new B(2);這句程式碼執行的時候,C的原型繼承於B，因此C.prototype.x2 = 2; C.prototype.getX2方法且C也有自己的特權屬性x3和特權方法getX3,
var b = new B(2);
var c = new C(3);
console.log(b.x1);  // 1
console.log(c.x1);  // 1
console.log(c.getX3()); // 5
console.log(c.getX2()); // 3
var b = new B(2);

function C(x) {

this.x3 = x;

this.getX3 = function(){

return this.x3 + this.x2;

}

C.prototype = new B(2);

C.prototype = new B(2);這句程式碼執行的時候,C的原型繼承於B，因此C.prototype.x2 = 2; C.prototype.getX2方法且C也有自己的特權屬性x3和特權方法getX3,

var b = new B(2);

var c = new C(3);

console.log(b.x1); // 1

console.log(c.x1); // 1

console.log(c.getX3()); // 5

console.log(c.getX2()); // 3

var b = new B(2);

實列化B的時候 b.x1 首先會在建構函式內查詢x1屬性，沒有找到，由於B的原型繼承於A，因此A有x1屬性，因此B.prototype.x1 = 1找到了;var c = new C(3); 實列化C的時候，從上面的程式碼可以看到C繼承於B，B繼承於A，因此在C函式中沒有找到x1屬性，會往原型繼續查詢，直到找到父元素A有x1屬性，因此c.x1 = 1;c.getX3()方法; 返回this.x3+this.x2 this.x3 = 3;this.x2 是B的屬性，因此this.x2 = 2;c.getX2(); 查詢的方法也一樣，不再解釋

prototype的缺點與優點如下：

優點是：能夠允許多個物件實列共享原型物件的成員及方法，

缺點是：1. 每個建構函式只有一個原型，因此不直接支援多重繼承;

2. 不能很好地支援多引數或動態引數的父類。在原型繼承階段，使用者還不能決定以

什麼引數來實列化建構函式。

四：理解使用類繼承(繼承的更好的方案)

類繼承也叫做建構函式繼承，在子類中執行父類的建構函式；實現原理是：可以將一個建構函式A的方法賦值給另一個建構函式B，然後呼叫該方法，使建構函式A在建構函式B內部被執行，這時候建構函式B就擁有了建構函式A中的屬性和方法，這就是使用類繼承實現B繼承與A的基本原理；

如下程式碼實現demo：

function A(x) {
    this.x = x;
    this.say = function(){
        return this.x;
    }
}
function B(x,y) {
    this.m = A; // 把建構函式A作為一個普通函式引用給臨時方法m
    this.m(x);  // 執行建構函式A;
    delete this.m; // 清除臨時方法this.m
    this.y = y;
    this.method = function(){
        return this.y;
    }
}
var a = new A(1);
var b = new B(2,3);
console.log(a.say()); //輸出1, 執行建構函式A中的say方法
console.log(b.say()); //輸出2, 能執行該方法說明被繼承了A中的方法
console.log(b.method()); // 輸出3， 建構函式也擁有自己的方法

function A(x) {

this.x = x;

this.say = function(){

return this.x;

}

function B(x,y) {

this.m = A; // 把建構函式A作為一個普通函式引用給臨時方法m

this.m(x); // 執行建構函式A;

delete this.m; // 清除臨時方法this.m

this.y = y;

this.method = function(){

return this.y;

}

var a = new A(1);

var b = new B(2,3);

console.log(a.say()); //輸出1, 執行建構函式A中的say方法

console.log(b.say()); //輸出2, 能執行該方法說明被繼承了A中的方法

console.log(b.method()); // 輸出3，建構函式也擁有自己的方法

上面的程式碼實現了簡單的類繼承的基礎，但是在複雜的程式設計中是不會使用上面的方法的，因為上面的程式碼不夠嚴謹；程式碼的耦合性高；我們可以使用更好的方法如下：

function A(x) {
    this.x = x;
}
A.prototype.getX = function(){
    return this.x;
}
// 例項化A
var a = new A(1);
console.log(a.x); // 1
console.log(a.getX()); // 輸出1
// 現在我們來建立建構函式B，讓其B繼承與A，如下程式碼：
function B(x,y) {
    this.y = y;
    A.call(this,x);
}
B.prototype = new A();  // 原型繼承
console.log(B.prototype.constructor); // 輸出建構函式A，指標指向與建構函式A
B.prototype.constructor = B;          // 重新設定建構函式，使之指向B
console.log(B.prototype.constructor); // 指向建構函式B
B.prototype.getY = function(){
    return this.y;
}
var b = new B(1,2);
console.log(b.x); // 1
console.log(b.getX()); // 1
console.log(b.getY()); // 2

// 下面是演示對建構函式getX進行重寫的方法如下：
B.prototype.getX = function(){
    return this.x;
}
var b2 = new B(10,20);
console.log(b2.getX());  // 輸出10

function A(x) {

this.x = x;

}

A.prototype.getX = function(){

return this.x;

}

// 例項化A

var a = new A(1);

console.log(a.x); // 1

console.log(a.getX()); // 輸出1

// 現在我們來建立建構函式B，讓其B繼承與A，如下程式碼：

function B(x,y) {

this.y = y;

A.call(this,x);

}

B.prototype = new A(); // 原型繼承

console.log(B.prototype.constructor); // 輸出建構函式A，指標指向與建構函式A

B.prototype.constructor = B; // 重新設定建構函式，使之指向B

console.log(B.prototype.constructor); // 指向建構函式B

B.prototype.getY = function(){

return this.y;

}

var b = new B(1,2);

console.log(b.x); // 1

console.log(b.getX()); // 1

console.log(b.getY()); // 2

// 下面是演示對建構函式getX進行重寫的方法如下：

B.prototype.getX = function(){

return this.x;

}

var b2 = new B(10,20);

console.log(b2.getX()); // 輸出10

下面我們來分析上面的程式碼：

在建構函式B內，使用A.call(this,x);這句程式碼的含義是：我們都知道使用call或者apply方法可以改變this指標指向，從而可以實現類的繼承，因此在B建構函式內，把x的引數傳遞給A建構函式，並且繼承於建構函式A中的屬性和方法；

使用這句程式碼：B.prototype = new A(); 可以實現原型繼承，也就是B可以繼承A中的原型所有的方法；console.log(B.prototype.constructor); 列印出輸出建構函式A，指標指向與建構函式A；我們明白的是，當定義建構函式時候，其原型物件預設是一個Object型別的一個例項，其構造器預設會被設定為建構函式本身，如果改動建構函式prototype屬性值，使其指向於另一個物件的話，那麼新物件就不會擁有原來的constructor的值，比如第一次列印console.log(B.prototype.constructor); 指向於被例項化後的建構函式A，重寫設定B的constructor的屬性值的時候，第二次列印就指向於本身B；因此B繼承與構造A及其原型的所有屬性和方法，當然我們也可以對建構函式B重寫建構函式A中的方法，如上面最後幾句程式碼是對建構函式A中的getX方法進行重寫，來實現自己的業務~；

五：建議使用封裝類實現繼承

封裝類實現繼承的基本原理：先定義一個封裝函式extend；該函式有2個引數，Sub代表子類，Sup代表超類；在函式內，先定義一個空函式F, 用來實現功能中轉，先設定F的原型為超類的原型，然後把空函式的例項傳遞給子類的原型，使用一個空函式的好處是：避免直接例項化超類可能會帶來系統效能問題，比如超類的例項很大的話，例項化會佔用很多記憶體；

如下程式碼：

function extend(Sub,Sup) {
    //Sub表示子類，Sup表示超類
    // 首先定義一個空函式
    var F = function(){};

    // 設定空函式的原型為超類的原型
    F.prototype = Sup.prototype; 

// 例項化空函式，並把超類原型引用傳遞給子類
    Sub.prototype = new F();

    // 重置子類原型的構造器為子類自身
    Sub.prototype.constructor = Sub;

    // 在子類中儲存超類的原型,避免子類與超類耦合
    Sub.sup = Sup.prototype;

    if(Sup.prototype.constructor === Object.prototype.constructor) {
        // 檢測超類原型的構造器是否為原型自身
        Sup.prototype.constructor = Sup;
    }

}
測試程式碼如下：
// 下面我們定義2個類A和類B，我們目的是實現B繼承於A
function A(x) {
    this.x = x;
    this.getX = function(){
        return this.x;
    }
}
A.prototype.add = function(){
    return this.x + this.x;
}
A.prototype.mul = function(){
    return this.x * this.x;
}
// 建構函式B
function B(x){
    A.call(this,x); // 繼承建構函式A中的所有屬性及方法
}
extend(B,A);  // B繼承於A
var b = new B(11);
console.log(b.getX()); // 11
console.log(b.add());  // 22
console.log(b.mul());  // 121

function extend(Sub,Sup) {

//Sub表示子類，Sup表示超類

// 首先定義一個空函式

var F = function(){};

// 設定空函式的原型為超類的原型

F.prototype = Sup.prototype;

// 例項化空函式，並把超類原型引用傳遞給子類

Sub.prototype = new F();

// 重置子類原型的構造器為子類自身

Sub.prototype.constructor = Sub;

// 在子類中儲存超類的原型,避免子類與超類耦合

Sub.sup = Sup.prototype;

if(Sup.prototype.constructor === Object.prototype.constructor) {

// 檢測超類原型的構造器是否為原型自身

Sup.prototype.constructor = Sup;

}

測試程式碼如下：

// 下面我們定義2個類A和類B，我們目的是實現B繼承於A

function A(x) {

this.x = x;

this.getX = function(){

return this.x;

}

A.prototype.add = function(){

return this.x + this.x;

}

A.prototype.mul = function(){

return this.x * this.x;

}

// 建構函式B

function B(x){

A.call(this,x); // 繼承建構函式A中的所有屬性及方法

}

extend(B,A); // B繼承於A

var b = new B(11);

console.log(b.getX()); // 11

console.log(b.add()); // 22

console.log(b.mul()); // 121

注意：在封裝函式中，有這麼一句程式碼：Sub.sup = Sup.prototype; 我們現在可以來理解下它的含義：

比如在B繼承與A後，我給B函式的原型再定義一個與A相同的原型相同的方法add();

如下程式碼

extend(B,A);  // B繼承於A
var b = new B(11);
B.prototype.add = function(){
    return this.x + "" + this.x;
}
console.log(b.add()); // 1111

extend(B,A); // B繼承於A

var b = new B(11);

B.prototype.add = function(){

return this.x + "" + this.x;

}

console.log(b.add()); // 1111

那麼B函式中的add方法會覆蓋A函式中的add方法；因此為了不覆蓋A類中的add()方法，且呼叫A函式中的add方法；可以如下編寫程式碼：

B.prototype.add = function(){
    //return this.x + "" + this.x;
    return B.sup.add.call(this);
}
console.log(b.add()); // 22

B.prototype.add = function(){

//return this.x + "" + this.x;

return B.sup.add.call(this);

}

console.log(b.add()); // 22

B.sup.add.call(this); 中的B.sup就包含了建構函式A函式的指標，因此包含A函式的所有屬性和方法；因此可以呼叫A函式中的add方法；

如上是實現繼承的幾種方式，類繼承和原型繼承，但是這些繼承無法繼承DOM物件，也不支援繼承系統靜態物件，靜態方法等；比如Date物件如下：

// 使用類繼承Date物件
function D(){
    Date.apply(this,arguments); // 呼叫Date物件，對其引用，實現繼承
}
var d = new D();
console.log(d.toLocaleString()); // [object object]

// 使用類繼承Date物件

function D(){

Date.apply(this,arguments); // 呼叫Date物件，對其引用，實現繼承

}

var d = new D();

console.log(d.toLocaleString()); // [object object]

如上程式碼執行列印出object，我們可以看到使用類繼承無法實現系統靜態方法date物件的繼承，因為他不是簡單的函式結構，對宣告，賦值和初始化都進行了封裝，因此無法繼承；

下面我們再來看看使用原型繼承date物件；

function D(){}
D.prototype = new D();
var d = new D();
console.log(d.toLocaleString());//[object object]

function D(){}

D.prototype = new D();

var d = new D();

console.log(d.toLocaleString());//[object object]

我們從程式碼中看到，使用原型繼承也無法繼承Date靜態方法；但是我們可以如下封裝程式碼繼承：

function D(){
    var d = new Date();  // 例項化Date物件
    d.get = function(){ // 定義本地方法，間接呼叫Date物件的方法
        console.log(d.toLocaleString());
    }
    return d;
}
var d = new D();
d.get(); // 2015/12/21 上午12:08:38

function D(){

var d = new Date(); // 例項化Date物件

d.get = function(){ // 定義本地方法，間接呼叫Date物件的方法

console.log(d.toLocaleString());

}

return d;

}

var d = new D();

d.get(); // 2015/12/21 上午12:08:38

六：理解使用複製繼承

複製繼承的基本原理是：先設計一個空物件，然後使用for-in迴圈來遍歷物件的成員，將該物件的成員一個一個複製給新的空物件裡面;這樣就實現了複製繼承了;如下程式碼：

function A(x,y) {
    this.x = x;
    this.y = y;
    this.add = function(){
        return this.x + this.y;
    }
}
A.prototype.mul = function(){
    return this.x * this.y;
}
var a = new A(2,3);
var obj = {};
for(var i in a) {
    obj[i] = a[i];
}
console.log(obj); // object
console.log(obj.x); // 2
console.log(obj.y); // 3
console.log(obj.add()); // 5
console.log(obj.mul()); // 6

function A(x,y) {

this.x = x;

this.y = y;

this.add = function(){

return this.x + this.y;

}

A.prototype.mul = function(){

return this.x * this.y;

}

var a = new A(2,3);

var obj = {};

for(var i in a) {

obj[i] = a[i];

}

console.log(obj); // object

console.log(obj.x); // 2

console.log(obj.y); // 3

console.log(obj.add()); // 5

console.log(obj.mul()); // 6

如上程式碼：先定義一個建構函式A，函式裡面有2個屬性x,y,還有一個add方法，該建構函式原型有一個mul方法，首先實列化下A後，再建立一個空物件obj，遍歷物件一個個複製給空物件obj，從上面的列印效果來看，我們可以看到已經實現了複製繼承了;對於複製繼承，我們可以封裝成如下方法來呼叫:

// 為Function擴充套件複製繼承方法
Function.prototype.extend = function(o) {
    for(var i in o) {
        //把引數物件的成員複製給當前物件的建構函式原型物件
        this.constructor.prototype[i] = o[i];
    }
}
// 測試程式碼如下：
var o = function(){};
o.extend(new A(1,2));
console.log(o.x);  // 1
console.log(o.y);  // 2
console.log(o.add()); // 3
console.log(o.mul()); // 2

// 為Function擴充套件複製繼承方法

Function.prototype.extend = function(o) {

for(var i in o) {

//把引數物件的成員複製給當前物件的建構函式原型物件

this.constructor.prototype[i] = o[i];

}

// 測試程式碼如下：

var o = function(){};

o.extend(new A(1,2));

console.log(o.x); // 1

console.log(o.y); // 2

console.log(o.add()); // 3

console.log(o.mul()); // 2

上面封裝的擴充套件繼承方法中的this物件指向於當前實列化後的物件，而不是指向於建構函式本身，因此要使用原型擴充套件成員的話，就需要使用constructor屬性來指向它的構造器，然後通過prototype屬性指向建構函式的原型；

複製繼承有如下優點：

1. 它不能繼承系統核心物件的只讀方法和屬性

2. 如果物件資料非常多的話，這樣一個個複製的話，效能是非常低的;

3. 只有物件被實列化後，才能給遍歷物件的成員和屬性，相對來說不夠靈活;

4. 複製繼承只是簡單的賦值，所以如果賦值的物件是引用型別的物件的話，可能會存在一些副作用;如上我們看到有如上一些缺點，下面我們可以使用clone(克隆的方式)來優化下：

基本思路是：為Function擴充套件一個方法，該方法能夠把引數物件賦值賦值一個空建構函式的原型物件，然後實列化建構函式並返回實列物件，這樣該物件就擁有了該物件的所有成員;程式碼如下：

Function.prototype.clone = function(o){
    function Temp(){};
    Temp.prototype = o;
    return Temp();
}
// 測試程式碼如下：
Function.clone(new A(1,2));
console.log(o.x);  // 1
console.log(o.y);  // 2
console.log(o.add()); // 3
console.log(o.mul()); // 2

Function.prototype.clone = function(o){

function Temp(){};

Temp.prototype = o;

return Temp();

}

// 測試程式碼如下：

Function.clone(new A(1,2));

console.log(o.x); // 1

console.log(o.y); // 2

console.log(o.add()); // 3

console.log(o.mul()); // 2

JavaScript物件導向程式設計理解！
2021-03-31
JavaScript物件程式設計
Javascript 物件導向程式設計
2012-01-09
JavaScript物件程式設計
深入解讀 JavaScript 中的物件導向程式設計
2017-07-07
JavaScript物件程式設計
深入解讀JavaScript物件導向程式設計實踐
2016-06-11
JavaScript物件程式設計
Javascript 物件導向程式設計(一)
2018-06-14
JavaScript物件程式設計
Javascript 物件導向程式設計(二)
2018-06-14
JavaScript物件程式設計
Javascript 物件導向程式設計(三)
2018-06-14
JavaScript物件程式設計
javascript：物件導向的程式設計
2018-05-02
JavaScript物件程式設計
前端_JavaScript_物件導向程式設計
2019-02-17
前端JavaScript物件程式設計
JavaScript 中的物件導向程式設計
2016-09-10
JavaScript物件程式設計
再談javascript物件導向程式設計
2012-02-27
JavaScript物件程式設計
物件導向的JavaScript程式設計 (轉)
2008-01-21
物件JavaScript程式設計
淺談Javascript物件導向程式設計
2013-03-13
JavaScript物件程式設計
JavaScript設計模式之物件導向程式設計
2018-09-01
JavaScript設計模式物件程式設計
JavaScript-設計模式-物件導向程式設計
2018-06-28
JavaScript設計模式物件程式設計
《JavaScript物件導向程式設計指南》 - JavaScript好書
2013-06-10
JavaScript物件程式設計
深入理解javascript系列(十八):掌握物件導向(1)
2019-03-01
JavaScript物件
JavaScript 物件導向初步理解
2018-05-05
JavaScript物件
JavaScript物件導向程式設計——Array型別
2018-08-20
JavaScript物件程式設計型別
Javascript 物件導向程式設計（一）：封裝
2010-05-17
JavaScript物件程式設計封裝
再論物件導向的Javascript程式設計
2007-08-14
物件JavaScript程式設計
Golang 物件導向深入理解
2023-10-31
Golang物件
[.net 物件導向程式設計深入]（0）開篇
2016-02-19
物件程式設計
物件導向程式設計
2023-04-13
物件程式設計
JavaScript建構函式，物件導向程式設計
2023-03-16
JavaScript函式物件程式設計
javascript: 基於原型的物件導向程式設計
2018-01-15
JavaScript原型物件程式設計
全面理解物件導向的 JavaScript
2013-04-22
物件JavaScript
[.net 物件導向程式設計深入]（36）Redis——基礎
2017-03-11
物件程式設計Redis
《JavaScript物件導向精要》之三：理解物件
2018-12-16
JavaScript物件
iOS 開發之 OOA (物件導向分析) & OOD (物件導向設計)& OOP (物件導向程式設計)
2017-11-04
iOS物件OOP程式設計
理解Js中物件導向程式設計的繼承
2019-08-05
JS物件程式設計繼承
[.net 物件導向程式設計基礎] (2) 關於物件導向程式設計
2015-06-03
物件程式設計
十三、物件導向程式設計
2019-05-12
物件程式設計
js物件導向程式設計
2018-09-17
JS物件程式設計
程式設計思想物件導向
2018-07-31
程式設計物件
十六、物件導向程式設計
2018-04-27
物件程式設計
perl 物件導向程式設計
2011-04-09
物件程式設計
LotusScript物件導向程式設計
2012-04-23
物件程式設計

深入理解Javascript物件導向程式設計

相關文章