您好,登錄后才能下訂單哦!
小編給大家分享一下javascript中實現(xiàn)繼承的示例分析,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
//聲明父類
//聲明父類
function SuperClass() {
this.superValue = true;
}
//為父類添加共有方法
SuperClass.prototype.getSuperValue = function () {
return this.superValue;
};
//聲明子類
function SubClass() {
this.subValue = false;
}
//繼承父類
SubClass.prototype = new SuperClass();
//為子類添加共有方法
SubClass.prototype.getSubValue = function () {
return this.subValue;
};
var instance = new SubClass();
console.log(instance.getSuperValue()); //true
console.log(instance.getSubValue()); //false
function SuperClass() {
this.courses = ['語文', '數(shù)學(xué)', '英語']
}
function SubClass() {}
SubClass.prototype = new SuperClass();
var instance1 = new SubClass()
var instance2 = new SubClass()
console.log(instance2.courses) //['語文', '數(shù)學(xué)', '英語']
instance1.courses.push('化學(xué)')
console.log(instance2.courses) //['語文', '數(shù)學(xué)', '英語', '化學(xué)']
function SuperClass(current) {
this.courses = ["語文", "數(shù)學(xué)", "英語"];
this.current = current;
}
//父類聲明原型方法
SuperClass.prototype.getCourses= function () {
console.log(this.courses);
};
//聲明子類
function SubClass(current) {
SuperClass.call(this, current);
}
var instance1 = new SubClass("語文");
var instance2 = new SubClass("數(shù)學(xué)");
instance1.courses.push('化學(xué)')
console.log(instance1.courses); //["語文", "數(shù)學(xué)", "英語", "化學(xué)"]
console.log(instance1.current); //語文
console.log(instance2.courses); //["語文", "數(shù)學(xué)", "英語"]
console.log(instance2.current); //數(shù)學(xué)
instance1.getCourses() //TypeError: instance1.getCourses is not a function
//組合繼承
function SuperClass(current) {
//引用類型共有屬性
this.courses = ["語文", "數(shù)學(xué)", "英語"];
// 值類型共有屬性
this.current = current;
}
SuperClass.prototype.getCourses = function () {
console.log(this.courses);
};
SuperClass.prototype.getCurrent = function () {
console.log(this.current);
};
// 聲明子類
function SubClass(current, time) {
//構(gòu)造函數(shù)繼承父類屬性
SuperClass.call(this, current);
this.time = time;
}
//類式繼承 子類原型繼承父類
SubClass.prototype = new SuperClass();
//子類原型方法
SubClass.prototype.getTime = function () {
console.log(this.time);
};
var instance1 = new SubClass("語文", "9:00");
instance1.getTime(); //9:00
instance1.courses.push('化學(xué)')
instance1.getCourses(); //["語文", "數(shù)學(xué)", "英語", "化學(xué)"]
instance1.getCurrent(); //語文
console.log(instance1.current)//語文
var instance2 = new SubClass("數(shù)學(xué)", "10:00");
instance2.getTime(); //10:00
instance2.getCourses(); //["語文", "數(shù)學(xué)", "英語"]
instance2.getCurrent(); //數(shù)學(xué)
console.log(instance2.current)//數(shù)學(xué)
function inheritObject(o) {
function F() {}
F.prototype = o;
return new F();
}
var course = {
name: "語文",
alikeCourse: ["數(shù)學(xué)", "英語"],
};
var newCourse = inheritObject(course);
newCourse.name = "化學(xué)";
newCourse.alikeCourse.push("物理");
var otherCourse = inheritObject(course);
otherCourse.name = "政治";
otherCourse.alikeCourse.push("歷史");
console.log(newCourse.name); //化學(xué)
console.log(newCourse.alikeCourse); //["數(shù)學(xué)", "英語", "物理", "歷史"]
console.log(otherCourse.name); //政治
console.log(otherCourse.alikeCourse); //["數(shù)學(xué)", "英語", "物理", "歷史"]
console.log(course.name); //語文
console.log(course.alikeCourse); //["數(shù)學(xué)", "英語", "物理", "歷史"]
function inheritObject(o) {
function F() {}
F.prototype = o;
return new F();
}
var course = {
name: "語文",
alikeCourse: ["數(shù)學(xué)", "英語"],
};
function createCourse(obj) {
//通過原型繼承方式創(chuàng)建新對象
var o = new inheritObject(obj);
// 拓展新對象
o.getName = function () {
console.log(this.name);
};
return o;
}
const newCourse = createCourse(course)
function inheritObject(o) {
function F() {}
F.prototype = o;
return new F();
}
function inheritPrototype(subClass, superClass) {
//復(fù)制一份父類的原型副本保存在變量中
var p = inheritObject(superClass.prototype)
//修正因為重寫子類原型導(dǎo)致子類的constructor屬性被修改
p.constructor = subClass
//設(shè)置子類的原型
subClass.prototype = p
}
//test
function SuperClass(current) {
//引用類型共有屬性
this.courses = ["語文", "數(shù)學(xué)", "英語"];
// 值類型共有屬性
this.current = current;
}
SuperClass.prototype.getCourses = function () {
console.log(this.courses);
};
SuperClass.prototype.getCurrent = function () {
console.log(this.current);
};
// 聲明子類
function SubClass(current, time) {
//構(gòu)造函數(shù)繼承父類屬性
SuperClass.call(this, current);
this.time = time;
}
//寄生式繼承 子類原型繼承父類
inheritPrototype(SubClass, SuperClass);
//類式繼承 子類原型繼承父類
// SubClass.prototype = new SuperClass();
//子類原型方法
SubClass.prototype.getTime = function () {
console.log(this.time);
};
var instance1 = new SubClass("語文", "9:00");
var instance2 = new SubClass("數(shù)學(xué)", "10:00");
instance1.getTime(); //9:00
instance1.courses.push("化學(xué)");
instance1.getCourses(); //["語文", "數(shù)學(xué)", "英語", "化學(xué)"]
instance1.getCurrent(); //語文
console.log(instance1.current); //語文
instance2.getTime(); //10:00
instance2.getCourses(); //["語文", "數(shù)學(xué)", "英語"]
instance2.getCurrent(); //數(shù)學(xué)
console.log(instance2.current); //數(shù)學(xué)
區(qū)別僅在
//寄生式繼承 子類原型繼承父類
inheritPrototype(SubClass, SuperClass);
//類式繼承 子類原型繼承父類
// SubClass.prototype = new SuperClass();
看完了這篇文章,相信你對“javascript中實現(xiàn)繼承的示例分析”有了一定的了解,如果想了解更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。