当前位置:网站首页>js实现继承的几种方式
js实现继承的几种方式
2022-08-09 00:02:00 【彪彪_】
首先重要的一点
例子里关于Person和Student的设计,不符合面向对象的设计原则,我后面重新看自己写的文章才发现,有空的话我会把这些重新改掉。但是不影响理解核心内容
延续原型和原型链的学习,记录下继承!
原型链继承
重点:让子类的原型对象等于父类的实例。
特点:实例可继承的属性有:父类构造函数属性,父类原型对象的属性。
缺点:1、新实例无法向父类构造函数传参。
2、继承单一。
3、所有新实例都会共享父类实例的属性。(原型上的属性是共享的,一个实例修改了原型属性,另一个实例的原型属性也会被修改)
function Person(skinColor = 'yellow', gender = 1) {
this.skinColor = skinColor;
this.gender = gender;
this.eat = function () {
console.log('eating!');
}
}
function Student(name = 'bob', ability = ['code', 'dance']) {
this.name = name;
this.ability = ability;
}
Student.prototype = new Person();
Student.prototype.constructor = Student;
var bob = new Student();
构造函数继承
重点:用.call()和.apply()将父类构造函数引入子类函数(在子类函数中做了父类函数的自执行(复制))
特点:1、只继承了父类构造函数的属性,没有继承父类原型的属性。
2、解决了原型链继承缺点1、2、3。
3、可以继承多个构造函数属性(call多个)。
4、在子实例中可向父实例传参。
缺点:1、只能继承父类构造函数的属性。
2、无法实现构造函数的复用。(每次用每次都要重新调用)
3、每个新实例都有父类构造函数的副本,臃肿。
function Person(skinColor = 'yellow', gender = 1) {
this.skinColor = skinColor;
this.gender = gender;
this.eat = function () {
console.log('eating!');
}
}
function Student(name = 'bob', ability = ['code', 'dance']) {
this.name = name;
this.ability = ability;
Person.call(this);
}
var bob = new Student();
组合继承(组合原型链和构造函数继承)
重点:组合了原型链继承和构造函数继承
特点:保留了构造函数继承与原型链继承的优点,是比较常用的继承方式
缺点:执行了两次Person,属性重复了。
function Person(skinColor = 'yellow', gender = 1) {
this.skinColor = skinColor;
this.gender = gender;
this.eat = function () {
console.log('eating!');
}
}
function Student(name = 'bob', ability = ['code', 'dance']) {
this.name = name;
this.ability = ability;
Person.call(this);
}
Student.prototype = new Person();
Student.prototype.constructor = Student;
var bob = new Student();
寄生组合继承
重点:定义一个新的变量,把父类的原型对象间接的给子类,避免了new一个父类实例的操作
特点:比较完美的继承方案,优化了组合继承中调用两次Person实例的操作
function Person(skinColor = 'yellow', gender = 1) {
this.skinColor = skinColor;
this.gender = gender;
this.eat = function () {
console.log('eating!');
}
}
function Student(name = 'bob', ability = ['code', 'dance']) {
this.name = name;
this.ability = ability;
Person.call(this);
}
var prototype = Object.create(Person.prototype);
prototype.constructor = Student;
Student.prototype = prototype;
var bob = new Student();
在es6中对继承有了更友好的方式:extends
对于extends的解释,需要先了解es6的class。es6真的是js面向对象的一个重大版本!
// 使用匿名类的方式创建
let Person = class {
constructor(skinColor = 'yellow', gender = 1) {
this.skinColor = skinColor;
this.gender = gender;
}
eat() {
console.log('eating!');
}
}
let Student = class extends Person {
constructor(name = 'bob', ability = ['code', 'dance']) {
// super关键字用于访问和调用一个对象的父对象上的函数
super();
this.name = name;
this.ability = ability;
}
}
let bob = new Student();
边栏推荐
- 工作中经常遇到的232、485、TTL信号
- snmp获取agent OID,及MibBrowser使用
- HCIP2--HCIA复习
- 穿越派·派盘+KeePass = 最安全的私人密码管理方案
- Common problems in installing mysql in linux environment and using it
- C#在控制台应用程序中显示输出字节型数据
- C# 如何关联键盘按钮 (KeyChar/KeyCode值 KeyPress/KeyDown事件 区别)
- 了解CI/CD流水线
- Get the current week time excluding the current day
- 并发编程第3篇,volatile原理分析
猜你喜欢
随机推荐
Ubuntu下Docker安装Mysql (快速简便)
Get the time n-1 a week ago including the current day 7 days a week 7-1
第二章 关系数据库概述
使用muse-ui制作省市选择器(ts)
C# ToString
自学FPGA:Verilog基本语法规则(一)
win10电脑:电脑触摸板控制
GRPC学习(An RPC library and framework)
并发编程第9篇,Condition
并发编程第六篇,lock锁接口和其实现
穿越派·派盘(WebDAV)解决OmniFocus同步问题
mysql建表常用sql语句
Get the current time before/after one day's date
远程访问jupyter notebook
穿越派(v3.14)版本可以试用啦!
对js基础知识的一些理解
MySQL中varchar 的最大长度
工作中经常遇到的232、485、TTL信号
Canvas绘图基础知识
RIP 实验