javaScript---js如何实现继承

news/2024/10/22 16:37:41/

目录

1、构造函数继承

2、原型链继承

3、组合继承

4、class继承

5、寄生组合继承


JavaScript 是以对象为基础,以函数为模型,以原型为继承的面向对象开发模式

javascript继承的作用:

  • 可以不调用“父类”的构造方法就创造新的实例;
  • 修改“父类”的prototype可以动态修改所有已经创造的实例;
  • 可以动态修改一个对象的原型。

js实现继承的方法:构造函数继承、原型链继承、组合继承、class继承、实例继承 、拷贝继承 、寄生组合继承

1、构造函数继承

核心:使用父类的构造函数来增强子类实例,等于是复制父类的实例属性给子类

在子类型构造函数的内部调用父类型构造函数,Parent.call(this)将父对象的构造函数绑定在子对象上,父级函数本身的this指向变成了子级的实例对象,相当于父级的所有的属性和方法在子级函数里再次声明了一次

function Parent(name) {this.name = name || "parent";this.eat = function () {console.log(this.name + "在吃饭");};
}
Parent.prototype.run = function (distance) {//prototype向对象添加属性和方法console.log(this.name + "跑了" + distance + "米");
};//构造函数继承
function Son() {Parent.call(this);this.name = "son";
}
var son1 = new Son();
var parent1 = new Parent();
console.log(son1, parent1);
console.log(son1 instanceof Parent, son1 instanceof Son); //false true

特点:

  • 解决了子类实例共享父类引用属性的问题(原型链继承不具备)
  • 创建子类实例时,可以向父类传递参数(原型链继承不具备)
  • 可以实现多继承(call多个父类对象)

缺点:

  • 实例并不是父类的实例,只是子类的实例
  • 只能继承父类在构造函数里声明的属性和方法,不能继承父级原型链上的属性和方法
  • 无法实现函数复用,每个子类都有父类实例函数的副本,影响性能

2、原型链继承

核心: 将父类的实例作为子类的原型

Son.prototype = new Parent();

function Parent(name) {this.name = name || "parent";this.eat = function () {console.log(this.name + "在吃饭");};
}
Parent.prototype.run = function (distance) {//prototype向对象添加属性和方法console.log(this.name + "跑了" + distance + "米");
};
Parent.prototype.friends = ["Mike", "Jerry"];
// 原型链继承
function Son() {this.name = "son";
}
Son.prototype = new Parent();// 将父类的实例作为子类的原型
var son1 = new Son();
var son2 = new Son();
var parent1 = new Parent();
console.log(son1, parent1);
console.log(son1 instanceof Parent, son1 instanceof Son); //true true
son1.friends.push("Marry");
console.log(son1.friends, son2.friends); //[ 'Mike', 'Jerry', 'Marry' ] [ 'Mike', 'Jerry', 'Marry' ]
parent1.friends.push("Alisa");
console.log(son1.friends, son2.friends);// [ 'Mike', 'Jerry', 'Marry', 'Alisa' ] [ 'Mike', 'Jerry', 'Marry', 'Alisa' ]

 特点:

  • 非常纯粹的继承关系,实例是子类的实例,也是父类的实例
  • 父类新增原型方法/原型属性,子类都能访问到
  • 简单,易于实现

缺点:

  • 无法实现多继承
  • 来自原型对象的所有属性被所有实例共享
  • 创建子类实例时,无法向父类构造函数传参

3、组合继承

核心:通过调用父类构造,继承父类的属性并保留传参的优点,然后通过将父类实例作为子类原型,实现函数复用

在子类的构造函数中通过 Parent.call(this) 继承父类的属性,然后改变子类的原型为 new Parent() 来继承父类的函数

function Parent(name) {this.name = name || "parent";this.eat = function () {console.log(this.name + "在吃饭");};
}
Parent.prototype.run = function (distance) {//prototype向对象添加属性和方法console.log(this.name + "跑了" + distance + "米");
};// 组合继承
function Son(name) {Parent.call(this, name); 使用构造函数法传递参数
}
Son.prototype = new Parent();
var son1 = new Son("Tom");
var parent1 = new Parent();
console.log(son1, parent1);
console.log(son1 instanceof Parent, son1 instanceof Son); //true true

组合方式排除了构造函数继承和原型链继承的弊端,是JS中最常用的继承模式
特点:

  • 可以继承实例属性/方法,也可以继承原型属性/方法
  • 既是子类的实例, 也是父类的实例
  • 不存在与父类引用属性共享问题
  • 构造函数可传参
  • 可复用父类函数

缺点:在继承父类函数的时候调用了父类构造函数,导致子类的原型上多了不需要的父类属性,存在内存上的浪费

4、class继承

核心:class为es6新增的语法,class创建一个类,使用 extends 实现继承,并且在子类构造函数中必须调用 super,因为这段代码可以看成 Parent.call(this, value)

class Parent {constructor(name) {this.name = name;}eat() {console.log(this.name + "在吃饭");}
}
class Son extends Parent {constructor(name) {super(name);this.name = name;}
}var son1 = new Son("Tom");
var parent1 = new Parent("Mike");
console.log(son1, parent1);
console.log(son1 instanceof Parent, son1 instanceof Son); //true true

最方便快捷的继承方式,但是仅支持ES6及以上版本,所以要考虑兼容性问题。

5、寄生组合继承

核心:将父类的原型赋值给了子类,并且将构造函数设置为子类,这样既解决了无用的父类属性问题,还能正确的找到子类的构造函数

对组合继承进行了优化,组合继承缺点在于继承父类函数时调用了构造函数,我们只需要优化掉这点就行了

Object.create() 是把现有对象的属性,挂到新建对象的原型上,新建对象为空对象。该方法接收两个参数:作为新对象原型的对象,以及给新对象定义额外属性的对象(第二个可选)

function Parent(name) {this.name = name || "parent";this.eat = function () {console.log(this.name + "在吃饭");};
}
Parent.prototype.run = function (distance) {//prototype向对象添加属性和方法console.log(this.name + "跑了" + distance + "米");
};// 寄生组合继承
function Son(name) {Parent.call(this, name);
}
Son.prototype = Object.create(Parent.prototype, {constructor: {value: Son,enumerable: false,writable: true,configurable: true,},
});
var son1 = new Son("Tom");
var parent1 = new Parent();
console.log(son1, parent1);
// console.log(son1.eat(), son1.run(100));
console.log(son1 instanceof Parent, son1 instanceof Son); //true true

参考文章:JS实现继承的几种方式


http://www.ppmy.cn/news/47764.html

相关文章

设计模式-结构型模式之桥接模式

2. 桥接模式 2.1. 模式动机 设想如果要绘制矩形、圆形、椭圆、正方形,我们至少需要4个形状类,但是如果绘制的图形需要具有不同的颜色,如红色、绿色、蓝色等,此时至少有如下两种设计方案: 第一种设计方案是为每一种形状…

js面试题

在全局作用域下声明了一个变量 arr, 它的初始值是一个空数组 第二段代码,循环计数器变量i的初始值为0,循环条件是i的值小于2, 也就是说当i的值为0或者1时, 循环条件才能成立 才能够进入到循环体 当i的值为2时循环条件不成立&…

ctfshow愚人杯web复现

easy_signin 题目url base64解码是face.png&#xff0c;尝试flag.txt和flag.php&#xff0c;base64加密后传入都不对&#xff0c;用index.php加密后传入&#xff0c;看源码 将后面的base64解密得到flag 被遗忘的反序列化 源码 <?php# 当前目录中有一个txt文件哦 error_r…

Linux FTP服务

FTP服务 作用 传输文件 端口 FTP服务器默认使用TCP协议的20、21端口与客户端进行通信 20端口用于建立数据连接&#xff0c;并传输文件数据 21端口用于建立控制连接&#xff0c;并传输FTP控制命令 模式 FTP数据连接分为主动模式和被动模式 主动模式&#xff1a;客户端告诉服务端…

记一次fastjson反序列化到内网靶标

声明&#xff1a;文中涉及到的技术和工具&#xff0c;仅供学习使用&#xff0c;禁止从事任何非法活动&#xff0c;如因此造成的直接或间接损失&#xff0c;均由使用者自行承担责任。 点点关注不迷路&#xff0c;每周不定时持续分享各种干货。 众亦信安&#xff0c;中意你啊&a…

微信跨平台方案Donut快速上手

一、Donut简介 Donut 是微信开发出的多端框架&#xff0c;用于支持使用小程序原生语法开发移动应用的框架&#xff0c;开发者可以一次编码&#xff0c;就可以编译出小程序和 Android 以及 iOS 应用&#xff0c;实现多端开发。能够帮助企业有效降低多端应用开发的技术门槛和研发…

网络原理——IP地址与mac地址

目录 IP地址 IP地址 IP地址的组成 子网掩码 mac地址 冲突域与广播域 数据传输流程 IP地址 IP地址 互联网协议地址。每一个联网的主机都会分配一个IP地址。为32位二进制数&#xff0c;用4个.均分为四部分&#xff0c;在命令提示符中输入&#xff1a;ipconfig命令&#…

webpack 5 实战(1)

一、为什么使用webpack 个人将前端开发分为三个阶段&#xff1a; 1.1 Web1.0 Web1.0前端主要工作&#xff1a; 前端主要编写静态页面对于JavaScript的使用&#xff0c;主要是进行表单验证和动画效果制作 1.2 Web2.0之AJAX 伴随着AJAX的诞生&#xff0c;前端的工作模式也发…