前言

参考：
原型和原型链
原型继承和 Class 继承
B站讲解

原型链

实例对象的隐式原型__proto__指向函数对象的显式原型prototype，原型的最终指向是Object的null

当我们使用一个对象的属性和方法时，先从自身找，如果找不到则去原型对象proto中寻找，如果原型对象也找不到，则去原型的原型对象中寻找，直到找到Object的原型对象为止，这个链式查找的过程我们称为原型链.

原型链不一定只有一条

原型链继承

function Parent() {//父类this.colors = ["red", "yellow"];
}function Child() {//子类
}Child.prototype = new Parent();
let result = new Child(); //result是child的实例对象
console.log(result.colors);
result.colors.push("pink");
console.log(result.colors);

缺点：
1、多个实例对引用类型的操作会被篡改
2、子类型的原型上的 constructor 属性被重写了
3、给子类型原型添加属性和方法必须在替换原型之后
4、创建子类型实例时无法向父类型的构造函数传参

构造函数继承

// 问题：每次去执行子类的时候就会创建父类的方法
function Parent(name) {this.colors = ["red", "white"];this.name = name;this.getName = function getName() {return this.name;};
}
function Child(name) {Parent.call(this, name);
}let res = new Child("army");
console.log(res.name, res.colors);
let res2 = new Child("patty");
res2.colors.push("pink");
console.log(res2.name, res2.colors);

组合继承

function Parent(name) {this.colors = ["red", "white"];this.name = name;
}
Parent.prototype.getName = function () {return this.name;
};
function Child(name) {Parent.call(this, name);
}
Child.prototype = new Parent();
Child.prototype.construcor = Parent;
const res = new Child("hello");
// child.getValue();
console.log(res.name);
let res2 = res instanceof Parent; // true
console.log(res2);
/*以上继承的方式核心是在子类的构造函数中通过 Parent.call(this) 继承父类的属性
然后改变子类的原型为 new Parent() 来继承父类的函数。
这种继承方式优点在于构造函数可以传参，不会与父类引用属性共享，可以复用父类的函数，
但是也存在一个缺点就是在继承父类函数的时候调用了父类构造函数，
导致子类的原型上多了不需要的父类属性，存在内存上的浪费。*/

寄生组合继承

function Parent(name) {this.name = name;this.colors = ["red", "yellow"];
}Parent.prototype.getName = function () {return this.name;
};function Child(name) {Parent.call(this, name);
}Child.prototype = Object.create(Parent.prototype, {constructor: {value: Child,enumerable: false,writable: true,configurable: true,},
});const child = new Child("李四");
console.log(child.name);
let res = child.getName();
console.log(res);
let res2 = child instanceof Parent;
console.log(res2);

class继承

class Parent {constructor(val) {this.name = val;this.colors = ["red", "yellow"];}getName() {console.log(this.name);}
}
// class 实现继承的核心在于使用 extends 表明继承自哪个父类，
// 并且在子类构造函数中必须调用 super，因为这段代码可以看成 Parent.call(this, value)。
class Child extends Parent {constructor(value) {super(value);this.name = value;}
}
let child = new Child("李四");
console.log(child.colors);
let res = child.getName();
let res2 = child instanceof Parent;
console.log(res2);
let res3 = Parent instanceof Function;
console.log(res3); // js不存在类，所以class本质就是函数

JavaScript es6 五种常见继承方式相关推荐

app启动页html模板,APP引导页设计的五种常见表现方式
app引导页,想必大家都很熟悉.目前来说,APP引导页设计并不是每一个APP的必备设计环节啦.因为一款App是否需要引导页,取决于每一个APP出发点或者说是用途. 比如,在功能引导页和操作引导页上的设 ...
javascript中五种常见的DOM方法
getElementById将返回一个与那个有着给定id属性值的元素节点对应的对象. <html xmlns="http://www.w3.org/1999/xhtml"&g ...
五种常见的加密方式及常用的加解密工具
如果你是互联网公司的信息安全从业者,那么你可能会经常需要处理撞库事件,撞库是黑客的无聊"恶作剧".黑客收集已经在互联网上泄露的用户和密码信息,生成对应的字典表,并尝试批量登录其他网 ...
Java swing五种常见的布局方式【转载】
Java swing五种常见的布局方式 1. 边界布局(BorderLayout) 2.流式布局(FlowLayout) 3.网格布局(GridLayout) 4.盒子布局(BoxLaYout) 5. ...
Ajax 和 XML: 五种常见 Ajax 模式
Asynchronous JavaScript + XML(Ajax)无疑是 2006 年最热门的技术术语,且有望在 2007 得到进一步发展.但是对您的应用程序来说它究竟有什么意义呢?Ajax 应用 ...
java简述常见的布局极其特点_请简要说明 Android 中五种常见布局的特点。_学小易找答案...
[简答题]请简要说明有序广播和无序广播的区别 [简答题]请简要说明 Android 程序结构中 AndroidManifest.xml 的功能? [简答题]简述李村站人工办理进路的作业过程. [简答题 ...
[Android Studio]掌握Android Studio的五种常见控件和五种常见布局
目录一.View和ViewGroup 二.Android的五种常见控件 2.1 文本控件 2.1.1 TextView 2.1.2 EditText 2.2 按钮控件 2.2.1 Button 2. ...
五种常见的PHP设计模式
2019独角兽企业重金招聘Python工程师标准>>> 五种常见的PHP设计模式设计模式一书将设计模式引入软件社区,该书的作者是 Erich Gamma.Richard Helm ...
MySQL 异常：这一篇就够了，MySQL 抛出异常的几种常见解决方式小结
Could not open JDBC Connection for transaction; nested exception is java.sql.SQLException: Connectio ...

JavaScript es6 五种常见继承方式

前言

原型链