先為大家分享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 }讓我們舉一個常見的例子：二維點，擁有二維坐標xy ，同似擁有一個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 20JavaScript怪異的原型繼承
令人困惑的是，每個教授原型繼承的人都不會給出這樣一段代碼，反而會給出下面這樣的代碼：
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); // trueJavaScript中真正的原型繼承
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); px = 10; py = 20; p.print(); // 10 20結論
我們已經了解了JS原型繼承是什麼，以及JS如何用特定的方式來實現之。然而使用真正的原型繼承（如Object.create 以及__proto__）還是存在以下缺點：
標準性差：__ proto__ 不是一個標準用法，甚至是一個不贊成使用的用法。同時原生態的Object.create 和道爺寫的原版也不盡相同。
優化性差：不論是原生的還是自定義的Object.create ，其性能都遠沒有new 的優化程度高，前者要比後者慢高達10倍。
以上就是本文的全部內容，希望對大家的學習有所幫助。