JavaScript类式继承与原型式继承实现详解
本文详细解析JavaScript中两种常见的继承模式:类式继承与原型式继承。通过具体代码示例,展示了如何利用构造函数与原型对象实现属性与方法共享,以及如何使用克隆函数创建新对象并继承已有属性。内容涵盖核心实现逻辑与实例化过程,帮助开发者深入理解JS面向对象编程中的继承机制。
JavaScript类式继承与原型式继承概述
本文通过具体代码示例,介绍JavaScript中类式继承与原型式继承的实现方式,供读者参考学习。
类式继承实现原理与代码
1. JavaScript类式继承
/* -- 类式继承 -- */
//先声明一个超类
function Person(name) {
this.name = name;
}
//给这个超类的原型对象上添加方法 getName
Person.prototype.getName = function() {
return this.name;
}
//实例化这个超
var a = new Person('Darren1')
console.log(a.getName());//Darren1
//再声明类
function Programmer(name, sex) {
//这个类中要调用超类Person的构造函数,并将参数name传给它
Person.call(this, name);
this.sex = sex;
}
//这个子类的原型对象等于超类的实例
Programmer.prototype = new Person();
//因为子类的原型对象等于超类的实例,所以prototype.constructor这个方法也等于超类构造函数,你可以自己测试一下,如果没这一步,console.log(Programmer.prototype.constructor这个是Person超类的引用,所以要从新赋值为自己本身
console.log(Programmer.prototype.constructor);
/*function Person(name) {
this.name = name;
} */
Programmer.prototype.constructor = Programmer;
console.log(Programmer.prototype.constructor);
/*function Programmer(name, sex) {
Person.call(this, name);
this.sex = sex;
}
*/
//子类本身添加了getSex 方法
Programmer.prototype.getSex = function() {
return this.sex;
}
//实例化这个子类
var _m = new Programmer('Darren2', 'male');
//自身的方法
console.log(_m.getSex());//male
//继承超类的方法
console.log(_m.getName());//Darren2
原型式继承实现原理与代码
首先定义一个超类Person,构造函数接收name参数并赋值给实例属性。通过Person.prototype添加getName方法,返回name值。实例化Person对象a,调用getName方法验证返回值。接着定义子类Programmer,构造函数中通过Person.call(this, name)调用超类构造函数并传递name参数,同时初始化sex属性。关键点在于将Programmer.prototype设置为new Person()的实例,从而继承超类原型。随后在Programmer.prototype上定义getSex方法返回sex值。实例化Programmer对象_m,分别调用自身getSex方法和继承自超类的getName方法,验证继承效果。
/* -- 原型式继承 -- */
//clone()函数用来创建新的类Person对象
var clone = function(obj) {
4
var _f = function() {};
//这句是原型式继承最核心的地方,函数的原型对象为对象字面量
_f.prototype = obj;
return new _f;
}
//先声明一个对象字面量
var Person = {
name: 'Darren',
getName: function() {
return this.name;
}
}
//不需要定义一个Person的子类,只要执行一次克隆即可
var Programmer = clone(Person);
//可以直接获得Person提供的默认值,也可以添加或者修改属性和方法
alert(Programmer.getName())
Programmer.name = 'Darren2'
alert(Programmer.getName())
//声明子类,执行一次克隆即可
var Someone = clone(Programmer);
总结
2. JavaScript原型式继承
JavaScript闭包与类(Class)的区别及适用场景对比
2026-11-05 15:48:57
JavaScript入门要学ES6吗?let与箭头函数等新特性解析
2026-11-05 14:49:16
JavaScript 8种数据类型详解:基本类型与引用类型的区别
2026-11-05 14:25:15
怎么在JavaScript中使用async/await优化Ajax异步流程
2026-11-05 13:56:15
JavaScript replace回调函数实现动态正则替换逻辑
2026-11-05 13:52:13
