建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要詳解JS中的繼承操作，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。
覃塘網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,覃塘網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為覃塘上千提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站制作要多少錢(qián)，請(qǐng)找那個(gè)售后服務(wù)好的覃塘做網(wǎng)站的公司定做！
本文實(shí)例講述了JS中的繼承操作。分享給大家供大家參考，具體如下：
1.原型鏈繼承
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)。
2.構(gòu)造函數(shù)繼承
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); // Nicholas
console.log(instance1.age); // 29
console.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ù)用。
3.組合繼承
這個(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,black
console.log(instance2.colors); // red,blue,green
instance1.sayName(); // Nicholas
instance2.sayName(); // Greg
instance1.sayAge(); // 29
instance2.sayAge(); // 27
4.class繼承
ES6中可以通過(guò)class創(chuàng)建對(duì)象，通過(guò)關(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的繼承中，子類一定要重寫(xiě)父類的構(gòu)造函授的方法，否則會(huì)報(bào)錯(cuò)。
看完上述內(nèi)容，是不是對(duì)詳解JS中的繼承操作有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
標(biāo)題名稱：詳解JS中的繼承操作
網(wǎng)站路徑：http://www.ef60e0e.cn/article/jgehoc.html
