javascript原型繼承工作原理和實(shí)例詳解

當(dāng)前位置：首頁 > 范文|應(yīng)用文 > IT技術(shù)專欄 > 網(wǎng)絡(luò)編程

來源：易賢網(wǎng) 閱讀：1155 次日期：2016-07-08 14:25:01

溫馨提示：易賢網(wǎng)小編為您整理了“javascript原型繼承工作原理和實(shí)例詳解”,方便廣大網(wǎng)友查閱！

這篇文章主要為大家詳細(xì)介紹了javascript原型繼承，闡明什么是原型繼承,以及在JavaScript中究竟如何使用原型繼承,感興趣的小伙伴們可以參考一下

先為大家分享JS原型繼承實(shí)例，供大家參考，具體內(nèi)容如下

一、JS原型繼承

<!DOCTYPE html>

<html>

<head>

<title>JS原型繼承</title>

</head>

<body>

//clone()函數(shù)用來創(chuàng)建新的類Person對(duì)象

var clone = function(obj) {

var _f = function() {};

//這句是原型式繼承最核心的地方，函數(shù)的原型對(duì)象為對(duì)象字面量

_f.prototype = obj;

return new _f;

}

//先聲明一個(gè)對(duì)象字面量

var Animal = {

somthing: 'apple',

eat: function() {

console.log("eat " + this.somthing);

}

//不需要定義一個(gè)Person的子類，只要執(zhí)行一次克隆即可

var Cat = clone(Animal);

//可以直接獲得Person提供的默認(rèn)值，也可以添加或者修改屬性和方法

console.log(Cat.eat());

Cat.somthing = 'orange';

console.log(Cat.eat());

//聲明子類,執(zhí)行一次克隆即可

var Someone = clone(Cat);

</script>

</body>

</html>

二、JavaScript原型繼承工作原理

JavaScript采用原型繼承這事兒是眾所皆知的，但由于它默認(rèn)只提供了一個(gè)實(shí)現(xiàn)的實(shí)例，也就是 new 運(yùn)算符，因此對(duì)于它的解釋總是令人困惑，接下來闡明什么是原型繼承以及在JavaScript中究竟如何使用原型繼承。

原型繼承的定義

當(dāng)你閱讀關(guān)于JS原型繼承的解釋時(shí)，你時(shí)常會(huì)看到以下這段文字：

當(dāng)查找一個(gè)對(duì)象的屬性時(shí)，JavaScript 會(huì)向上遍歷原型鏈，直到找到給定名稱的屬性為止?！鲎訨avaScript秘密花園

大多數(shù)JavaScript的實(shí)現(xiàn)用 __proto__ 屬性來表示一個(gè)對(duì)象的原型鏈。在這篇文章里我們將看到 __proto__與 prototype 的區(qū)別何在。

注：__proto__ 是一個(gè)不應(yīng)在你代碼中出現(xiàn)的非正規(guī)的用法，這里僅僅用它來解釋JavaScript原型繼承的工作原理。

以下代碼展示了JS引擎如何查找屬性：

function getProperty(obj, prop) {

if (obj.hasOwnProperty(prop))

return obj[prop]

else if (obj.__proto__ !== null)

return getProperty(obj.__proto__, prop)

else

return undefined

}

讓我們舉一個(gè)常見的例子：二維點(diǎn)，擁有二維坐標(biāo) x y ，同似擁有一個(gè) print 方法。

用之前我們說過的原型繼承的定義，我們創(chuàng)建一個(gè)對(duì)象 Point ，擁有三個(gè)屬性：x，y 和 print 。為了能創(chuàng)建一個(gè)新的二維點(diǎn)，我們需要?jiǎng)?chuàng)建一個(gè)新的對(duì)象，讓他其中的 __proto__ 屬性指向 Point ：

var Point = {

x: 0,

y: 0,

print: function () { console.log(this.x, this.y); }

};

var p = {x: 10, y: 20, __proto__: Point};

p.print(); // 10 20

JavaScript怪異的原型繼承

令人困惑的是，每個(gè)教授原型繼承的人都不會(huì)給出這樣一段代碼，反而會(huì)給出下面這樣的代碼：

function Point(x, y) {

this.x = x;

this.y = y;

}

Point.prototype = {

print: function () { console.log(this.x, this.y); }

};

var p = new Point(10, 20);

p.print(); // 10 20

這和說好的不一樣啊，這里 Point 變成了函數(shù)，然后還有個(gè)什么 prototype 的屬性，而且有了 new 運(yùn)算符。這他喵的是什么情況？

new 運(yùn)算符是如何工作的

造物者 Brendan Eich 想讓JS和傳統(tǒng)的面向?qū)ο蟮木幊陶Z言差不太多，如Java和C++。在這些語言里，我們采用 new 運(yùn)算符來給類實(shí)例化一個(gè)新的對(duì)象。所以他在JS里寫了一個(gè) new 運(yùn)算符。

C++里有用來初始化實(shí)例屬性的構(gòu)造函數(shù)概念，因此 new 運(yùn)算符必須針對(duì)函數(shù)。

我們需要將對(duì)象的方法放到一個(gè)地方去，既然我們?cè)谟迷驼Z言，我們就把它放到函數(shù)的原型屬性中去。

new 運(yùn)算符接受一個(gè)函數(shù) F 及其參數(shù)：new F(arguments...)。這一過程分為三步：

創(chuàng)建類的實(shí)例。這步是把一個(gè)空的對(duì)象的 __proto__ 屬性設(shè)置為 F.prototype 。

初始化實(shí)例。函數(shù) F 被傳入?yún)?shù)并調(diào)用，關(guān)鍵字 this 被設(shè)定為該實(shí)例。

返回實(shí)例。

現(xiàn)在我們知道了 new 是怎么工作的，我們可以用JS代碼實(shí)現(xiàn)一下：

function New (f) {

var n = { '__proto__': f.prototype }; /*第一步*/

return function () {

f.apply(n, arguments); /*第二步*/

return n; /*第三步*/

};

}

一個(gè)小小的例子來看一下他的工作狀況：

function Point(x, y) {

this.x = x;

this.y = y;

}

Point.prototype = {

print: function () { console.log(this.x, this.y); }

};

var p1 = new Point(10, 20);

p1.print(); // 10 20

console.log(p1 instanceof Point); // true

var p2 = New (Point)(10, 20);

p2.print(); // 10 20

console.log(p2 instanceof Point); // true

JavaScript中真正的原型繼承

JS的ECMA規(guī)范只允許我們采用 new 運(yùn)算符來進(jìn)行原型繼承。但是大宗師 Douglas Crockford 卻發(fā)現(xiàn)了一種可以利用 new 來實(shí)現(xiàn)真正的原型繼承的方式！他寫下了 Object.create 函數(shù)如下：

Object.create = function (parent) {

function F() {}

F.prototype = parent;

return new F();

};

這看起來蠻奇怪的，但卻是相當(dāng)?shù)暮啙崳核鼊?chuàng)建了新的對(duì)象，并將其原型設(shè)置為你想設(shè)置的任意值。如果我們?cè)试S使用 __proto__ ，那我們也可以這樣寫：

Object.create = function (parent) {

return { '__proto__': parent };

};

下面這段代碼就是讓我們的 Point 采用真正的原型繼承：

var Point = {

x: 0,