本文實(shí)例講述了JS中的繼承操作。分享給大家供大家參考，具體如下：

function SuperType() { this.property = true; }SuperType.prototype.getSuperValue = function() { return this.property;}function SubType() { ths.subproperty = false;}SubType.prototype = new SuperType(); // 實(shí)現(xiàn)繼承SubType.prototype.getSubValue = function() { return this.subproperty;}var instance = new SubType();console.log(instance.getSuperValue()); // true

原理:讓SuperType的實(shí)例成為子類的原型對(duì)象，子類的實(shí)例擁有了父類的屬性和方法。但也有弊端，如果父類的屬性是引用類型，這將導(dǎo)致共享的屬性被改變的時(shí)候，全部的屬性將被改變，我們一下代碼。

function SuperType() { this.property = [1,2,3]; }SuperType.prototype.getSuperValue = function() { return this.property;}function SubType() { ths.subproperty = false;}SubType.prototype = new SuperType(); // 實(shí)現(xiàn)繼承SubType.prototype.getSubValue = function() { return this.subproperty;}var instance1 = new SubType();var instance2 = new SubType();instance1.property.push(4);console.log(instance1.property); // [1,2,3,4]console.log(instance2.property); // [1,2,3,4]

我們修改一處的實(shí)例屬性，兩個(gè)實(shí)例的屬性都會(huì)被修改，因?yàn)檫@個(gè)屬性是共享的，這也是原型鏈繼承的缺點(diǎn)。

function SuperType(name) { this.name = name; this.numbers = [1,2,3];}function SubType() { SuperType.call(this,'Nicholas'); this.age = 29;}var instance1 = new SubType();var instance2 = new SubType();instance1.property.push(4);console.log(instance1.name); // Nicholasconsole.log(instance1.age); // 29console.log(instance1.numbers); // [1,2,3,4]console.log(instance2.numbers); // [1,2,3]

在子類中調(diào)用父類的構(gòu)造函數(shù)，每次實(shí)例化時(shí)都會(huì)新建父類的屬性放在新實(shí)例中，因此每個(gè)實(shí)例中的屬性都是不一樣的，改變一個(gè)實(shí)例的值不會(huì)造成另一個(gè)實(shí)例的值改變。這個(gè)繼承方式的缺點(diǎn)是方法的定義不能復(fù)用。

這個(gè)方法將原型鏈繼承和構(gòu)造函數(shù)繼承結(jié)合到一起，融合了他們各自的優(yōu)點(diǎn)。

function SuperType(name) { this.name = name; this.colors = ['red','blue','green']}SuperType.prototype.sayName = function() { console.log(this.name);}function SubType(name,age) { SuperType.call(this,name); this.age = age;}SubType.prototype = new SuperType();SubType.prototype.constructor = SubType;SubType.prototype.sayAge = function() { console.log(this.age);}var instance1 = new SubType('Nicholas', 29);var instance2 =new SubType('Greg', 27);instance1.colors.push('black');console.log(instance1.colors); // red,blue,green,blackconsole.log(instance2.colors); // red,blue,greeninstance1.sayName(); // Nicholasinstance2.sayName(); // Greginstance1.sayAge(); // 29instance2.sayAge(); // 27 4.class繼承

ES6中可以通過class創(chuàng)建對(duì)象，通過關(guān)鍵字extends繼承。

class Point { constructor(x, y) { this.x = x; this.y = y; }}class ColorPoint extends Point { constructor(x, y, color) { this.color = color; // ReferenceError super(x, y); this.color = color; // 正確 }}

在ES6的繼承中，子類一定要重寫父類的構(gòu)造函授的方法，否則會(huì)報(bào)錯(cuò)。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。