首頁 > web前端 > js教程 > JavaScript之原型深入理解(圖)

JavaScript之原型深入理解(圖)

黄舟
發布: 2017-03-10 15:07:57
原創
1075 人瀏覽過

理解原型

原型是一個對象,其他對象可以透過它實現屬性繼承。任何一個物件都可以成為繼承,所有物件在預設的情況下都有一個原型,因為原型本身也是對象,所以每個原型本身又有一個原型。任何一個物件都有一個prototype的屬性,記為:__proto__。每當我們定義一個對象,其__proto__屬性就指向了其prototype。範例如下:

var foo = { 
x: 10, 
y: 20 
};
登入後複製

即使我們不指定prototype,該屬性也會預留。如果我們有明確指向的話,那麼鍊錶就連起來了。要注意的是,prototype自己也有指向,就是最高級的object.prototype。例如:

var a = { 
x: 10, 
calculate: function (z) { 
return this.x + this.y + z 
} 
}; 
var b = { 
y: 20, 
__proto__: a 
}; 

var c = { 
y: 30, 
__proto__: a 
}; 

// call the inherited method 
b.calculate(30); // 60
登入後複製

使用原型

理解了原型的原理之後,如何使用原型呢?或者說原型有什麼作用呢?

一般的初學者,在剛學習了基本的javascript語法後,都是透過以函數來程式設計的。如下程式碼:

var decimalDigits = 2,
	tax = 5;

function add(x, y) {
    return x + y;
}

function subtract(x, y) {
    return x - y;
}

//alert(add(1, 3));
登入後複製

透過執行各個函數來得到最後的結果。但利用原型,我們可以優化一些我們的程式碼,使用建構子

首先,函數本體中只存放變數:

var Calculator = function (decimalDigits, tax) {
    this.decimalDigits = decimalDigits;
    this.tax = tax;
};
登入後複製

其具體的方法透過prototype屬性來設定:

Calculator.prototype = {
    add: function (x, y) {
        return x + y;
    },

    subtract: function (x, y) {
        return x - y;
    }
};
//alert((new Calculator()).add(1, 3));
登入後複製

這樣就可以透過實例化物件後進行對應的函數操作。這也是一般的js框架所採用的方法。

原型還有一個作用就是用來實現繼承。首先,定義父對象:

var BaseCalculator = function() {
    this.decimalDigits = 2;
};

BaseCalculator.prototype = {
    add: function(x, y) {
        return x + y;
    },
    subtract: function(x, y) {
        return x - y;
    }
};
登入後複製

然後定義子對象,將子對象的原型指向父元素的實例化:

var Calculator = function () {
    //为每个实例都声明一个税收数字
    this.tax = 5;
};

Calculator.prototype = new BaseCalculator();
登入後複製

我們可以看到Calculator的原型是指向到BaseCalculator的一個實例上,目的是讓Calculator集成它的add(x,y)和subtract(x,y)這2個function,還有一點要說的是,由於它的原型是BaseCalculator的一個實例,所以不管你創建多少個Calculator物件實例,他們的原型指向的都是同一個實例。

上面的程式碼,運行以後,我們可以看到因為Calculator的原型是指向BaseCalculator的實例上的,所以可以訪問他的decimalDigits屬性值,那如果我不想讓Calculator訪問BaseCalculator的構造函數裡聲明的屬性值,那該怎麼辦呢?只需要將Calculator指向BaseCalculator的原型而不是實例就行了。程式碼如下:

var Calculator = function () {
    this.tax= 5;
};

Calculator.prototype = BaseCalculator.prototype;
登入後複製

在使用第三方函式庫的時候,有時候他們定義的原型方法不能滿足我們的需要,我們就可以自己加入一些方法,程式碼如下:

//覆盖前面Calculator的add() function 
Calculator.prototype.add = function (x, y) {
    return x + y + this.tax;
};

var calc = new Calculator();
alert(calc.add(1, 1));
登入後複製

原型鏈

物件的原型指向物件的父,而父的原型又指向父的父,這種原型層層的關係,叫做原型鏈

在尋找一個物件的屬性時,javascript會向上遍歷原型鏈,直到找到給定名稱的屬性為止,當查找到達原型鏈的頂部,也即是Object.prototype,仍然沒有找到指定的屬性,就會返回undefined。

範例如下:

function foo() {
    this.add = function (x, y) {
        return x + y;
    }
}

foo.prototype.add = function (x, y) {
    return x + y + 10;
}

Object.prototype.subtract = function (x, y) {
    return x - y;
}

var f = new foo();
alert(f.add(1, 2)); //结果是3,而不是13
alert(f.subtract(1, 2)); //结果是-1
登入後複製

我們可以發現,subtrace是按照向上找的原則,而add則出了意外。原因就是,屬性在找的時候是先找自己的屬性,如果沒有再找原型

說到Object.prototype,就得提它的一個方法,hasOwnProperty。它能判斷一個物件是否包含自訂屬性而不是原型鏈上的屬性,它是javascript中唯一一個處理屬性但不查找原型鏈的函數。使用程式碼如下:

// 修改Object.prototype
Object.prototype.bar = 1; 
var foo = {goo: undefined};

foo.bar; // 1
'bar' in foo; // true

foo.hasOwnProperty('bar'); // false
foo.hasOwnProperty('goo'); // true
登入後複製

而為了判斷prototype物件和某個實例之間的關係,又不得不介紹isPrototyleOf方法,示範如下:

alert(Cat.prototype.isPrototypeOf(cat2)); //true
登入後複製

以上是JavaScript之原型深入理解(圖)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板