- 当前位置：首页 >应用开发 >JS有哪些方式可以实现继承?
JS有哪些方式可以实现继承?
发布时间：2025-11-05 05:36:16 来源：创站工坊 作者：系统运维
继承的有方含义：
继承是面向对象编程中的一个重要概念，通过继承可以使子类的式可实现实例拥有在父类中定义的属性和方法。
1、继承原型链继承
function UserBase(){ } function User(){ } User.prototype = new UserBase();将父类的有方实例作为子类的原型。
(1)不能向构造函数传参，式可实现无法实现多继承 (2)来自原型对象的继承引用属性是所有实例共享的2、构造继承
实际上使用父类的有方构造函数来增强子类，等于是免费源码下载式可实现把父类的构造函数复制给子类。
function UserBase(){ } function User(userName) { UserBase.call(this); this.userName = userName; } let user = new User("鬼鬼") user.userName;优点：
(1)可以向构造函数传参数
(2)可以实现多继承，继承多call几个
缺点：
(1)无法实现函数复用
(2)只能继承父类的有方属性和方法，不能继承父类的式可实现原型
3、实例继承
为父类实例添加新属性，继承作为子类实例返回。有方
function UserBase(){ } function User(userName) { let userBase = new UserBase(); userBase.userName = userName; return userBase; } let user = new User("鬼鬼") user.userName;缺点：无法实现多继承
4、式可实现拷贝继承
function UserBase(userName){ } UserBase.prototype.showInfo = function(){ console.log(this.userName) } function User(userName) { let userBase = new UserBase(); for (let attr in userBase) { User.prototype[attr] = userBase[attr]; } this.userName = userName; } let user = new User("鬼鬼") user.showInfo(); 优点：支持多继承 缺点：占用内存高，继承因为要用for in循环来拷贝父类属性/方法不可枚举方法拷贝不了
5、组合继承
通过调用父类构造函数，继承了父类的属性，并保留了传参的优点。
然后再将父类实例作为子类原型，WordPress模板实现了函数复用。
function UserBase(userName){ this.userName = userName } UserBase.prototype.showInfo = function(){ console.log(this.userName) } function User (userName){ //call方式 UserBase.call(this,userName) //apply方式 UserBase.apply(this,[userName]) } User.prototype = new UserBase() let user = new User("鬼鬼") user.showInfo();优点：
(1)继承父类的属性和方法，也继承了父类的原型 (2)可传参，函数可复用缺点：
调用了两次父类构造函数
6、寄生组合继承
通过寄生的方式，去掉了父类的实例属性，在调用父类构造函数时，
就不会初始化两次实例方法，避免了组合继承的缺点
function UserBase(userName){ this.userName = userName } UserBase.prototype.showInfo = function(){ console.log(this.userName) } function User (userName){ UserBase.call(this,userName) } User.prototype = Object.create(UserBase.prototype) User.prototype.constructor = User let user = new User("鬼鬼") user.showInfo();7、Class继承
class UserBase{ constructor(userName){ this.userName = userName } showInfo(){ console.log(this.userName) } } class User extends UserBase{ constructor(value){ super(value) } } var user = new User("鬼鬼") user.showInfo();参考资料
https://blog.csdn.net/guoqing2016/article/details/106418081/
http://www.bubuko.com/infodetail-2556919.html
本文转载自微信公众号「前端人」，可以通过以下二维码关注。转载本文请联系前端人公众号。
亿华云IT技术网益华科技企商汇服务器租用源码下载源码库IT资讯网香港云服务器益强资讯优选思维库亿华智造云智核益强前沿资讯亿华灵动益强科技IT资讯网运维纵横益强智囊团亿华云亿华云计算编程之道益强科技码上建站益强IT技术网技术快报科技前瞻益华科技码力社极客码头亿华互联亿华科技创站工坊益强数据堂益强编程舍多维IT资讯极客编程智能时代亿华智慧云益强智未来云站无忧全栈开发
- Copyright © 2025 Powered by JS有哪些方式可以实现继承?,创站工坊 滇ICP备2023006006号-44sitemap