javascript原型繼承工作原理與實例詳解_javascript技巧
- WBOY原創
- 2016-05-16 15:06:071517瀏覽
先為大家分享JS原型繼承實例，供大家參考，具體內容如下
一、JS原型繼承
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS原型继承</title>
</head>
<body>
<!--原型继承-->
<script type="text/javascript">
//clone()函数用来创建新的类Person对象
var clone = function(obj) {
var _f = function() {};
//这句是原型式继承最核心的地方，函数的原型对象为对象字面量
_f.prototype = obj;
return new _f;
}
//先声明一个对象字面量
var Animal = {
somthing: 'apple',
eat: function() {
console.log("eat " + this.somthing);
}
}
//不需要定义一个Person的子类，只要执行一次克隆即可
var Cat = clone(Animal);
//可以直接获得Person提供的默认值，也可以添加或者修改属性和方法
console.log(Cat.eat());
Cat.somthing = 'orange';
console.log(Cat.eat());
//声明子类,执行一次克隆即可
var Someone = clone(Cat);
</script>
</body>
</html>
二、JavaScript原型繼承工作原理
JavaScript採用原型繼承這事兒是眾所皆知的，但由於它默認只提供了一個實現的實例，也就是new 運算符，因此對於它的解釋總是令人困惑，接下來闡明什麼是原型繼承以及在JavaScript中究竟如何使用原型繼承。
原型繼承的定義
當你閱讀關於JS原型繼承的解釋時，你常會看到以下這段文字：
當尋找物件的屬性時，JavaScript 會向上遍歷原型鏈，直到找到給定名稱的屬性為止。 ——出自JavaScript秘密花園
大多數JavaScript的實作用 __proto__ 屬性來表示一個物件的原型鏈。在這篇文章裡我們將看到 __proto__與 prototype 的差異何在。
註：__proto__ 是一個不應該在你程式碼中出現的非正規的用法，這裡僅僅用它來解釋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
}
讓我們舉一個常見的例子：二維點，擁有二維座標 x y ，看似擁有一個 print 方法。
用之前我們說過的原型繼承的定義，我們建立一個物件 Point ，擁有三個屬性：x，y 和 print 。為了能創造一個新的二維點，我們需要建立一個新的對象，讓他其中的 __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怪異的原型繼承
令人困惑的是，每個教授原型繼承的人都不會給出這樣一段程式碼，反而會給出下面這樣的程式碼：
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 變成了函數，然後還有個什麼 prototype 的屬性，而且有了 new 運算子。這他喵的是什麼狀況？
new 運算子是如何運作的
造物者 Brendan Eich 想讓JS和傳統的物件導向的程式語言差不太多，如Java和C++。在這些語言裡，我們採用 new 運算子來為類別實例化一個新的物件。所以他在JS裡寫了一個 new 運算子。
C++裡有用來初始化實例屬性的建構子概念，因此 new 運算子必須針對函數。
我們需要將物件的方法放到一個地方去，既然我們在用原型語言，我們就把它放到函數的原型屬性中去。
new 運算子接受一個函數 F 及其參數：new F(arguments...)。這過程分為三步驟：
建立類別的實例。這步是把一個空的物件的 __proto__ 屬性設定為 F.prototype 。
初始化實例。函數 F 被傳入參數並調用，關鍵字 this 被設定為該實例。
傳回實例。
現在我們知道 new 是怎麼運作的，我們可以用JS程式碼實作一下：
function New (f) {
var n = { '__proto__': f.prototype }; /*第一步*/
return function () {
f.apply(n, arguments); /*第二步*/
return n; /*第三步*/
};
}
一個小小的例子來看看他的工作狀況：
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規格只允許我們採用 new 運算子來進行原型繼承。但大宗師 Douglas Crockford 卻發現了一種可以利用 new 來實現真正的原型繼承的方式！他寫下了 Object.create 函數如下：
Object.create = function (parent) {
function F() {}
F.prototype = parent;
return new F();
};
這看起來蠻奇怪的，但卻是相當的簡潔：它創建了新的對象，並將其原型設置為你想設置的任意值。如果我們允許使用 __proto__ ，那我們也可以這樣寫：
Object.create = function (parent) {
return { '__proto__': parent };
};
下面這段程式碼就是讓我們的 Point 採用真正的原型繼承：
var Point = {
x: 0,
y: 0,
print: function () { console.log(this.x, this.y); }
};
var p = Object.create(Point);
p.x = 10;
p.y = 20;
p.print(); // 10 20
結論
我們已經了解了JS原型繼承是什麼，以及JS如何用特定的方式來實現之。然而使用真正的原型繼承（如 Object.create 以及 __proto__）還是有以下缺點：
標準性差：__proto__ 不是一個標準用法，甚至是一個不贊成使用的用法。同時原生態的 Object.create 和道爺寫的原版也不盡相同。
最佳化性差： 不論是原生的還是自訂的 Object.create ，其效能都遠沒有 new 的最佳化程度高，前者要比後者慢高達10倍。
以上就是本文的全部內容，希望對大家的學習有所幫助。