原文链接: https://juejin.im/post/6844904098941108232
这篇是阅读文章,自己在控制台打印,记录一下,方便后期复习
原文写得很好,容易理解,对继承不太清楚的可以看看
// 一,原型链继承
// function Parent () {
// this.name = 'Parent'
// this.sex = 'boy'
// }
// Parent.prototype.getName = function () {
// console.log(this.name)
// }
// function Child () {
// this.name = 'child'
// }
// 将子类的原型对象指向父类的实例或者指向父类的原型对象
// Child.prototype = new Parent()
// Child.prototype = Parent.prototype
// var child1 = new Child()
// child1.getName()
// console.log(child1)
// 将上面的原型方法再添加一个
// Parent.prototype.getSex = function () {
// console.log(this.sex)
// }
// 使用这种方法只能继承到父类原型链上的方法,构造函数上的属性和方法将不会被继承
// Child.prototype = Parent.prototype
// 使用父实例继承,可以继承构造函数和原型对象上的方法
// Child.prototype = new Parent()
// var child1 = new Child()
// child1.getName()
// child1.getSex() // undefined
// console.log(child1)
/** --------------------------------------- */
// function Parent (name) {
// this.name = name
// this.sex = 'boy'
// this.colors = ['white', 'black']
// }
// function Child () {
// this.feature = ['cute']
// this.colors = ['white', 'red']
// }
// var parent = new Parent('parent')
// Child.prototype = parent
// Child.prototype.age = 17
// var child1 = new Child('child1')
// child1.sex = 'girl'
// child1.colors.push('yellow')
// child1.feature.push('sunshine')
// var child2 = new Child('child2')
// console.log(child1) // colors: (3) ["white", "red", "yellow"] feature: (2) ["cute", "sunshine"] sex: "girl"
// console.log(child2) // colors: (2) ["white", "red"] feature: ["cute"]
// console.log(child1.name) // parent
// console.log(child2.age) // 17
// console.log(parent) // colors: (2) ["white", "black"] name: "parent" sex: "boy" age:17
// 原型链继承缺点
// 1.子类原型新增方法和属性要放在继承之后
// 2.无法实现多继承
// 3.来自原型对象的所有属性都被共享了,如果修改原型对象的属性,所有创建的实例对象都会受到影响
// 4.创建子类时,不能向父类构造函数传参
/** --------------------------------------- */
// instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。
// a instanceof B
// 实例对象a instanceof 构造函数B
// 检测a的原型链(__proto__)上是否有B.prototype，有则返回true，否则返回false。
// function Parent () {
// this.name = 'parent'
// }
// function Child () {
// this.sex = 'boy'
// }
// Child.prototype = new Parent()
// var child1 = new Child()
// console.log(child1 instanceof Child) // true
// console.log(child1 instanceof Parent) // true
// console.log(child1 instanceof Object) // true
/** --------------------------------------- */
// isPrototypeOf()的用法和instanceof相反。
// 它是用来判断指定对象object1是否存在于另一个对象object2的原型链中，是则返回true，否则返回false。
// function Parent () {
// this.name = 'parent'
// }
// function Child () {
// this.sex = 'boy'
// }
// Child.prototype = new Parent()
// var child1 = new Child()
// console.log(Child.prototype.isPrototypeOf(child1)) // true
// console.log(Parent.prototype.isPrototypeOf(child1)) // true
// console.log(Object.prototype.isPrototypeOf(child1)) // true
/** --------------------------------------- */
// 3.构造函数继承
// call接受若干个参数 apply接受一组数组 bind不会立即执行,返回函数
// function Parent (name) {
// this.name = name
// }
// function GrandParent (age) {
// this.age = age
// }
// function OtherParent (color) {
// this.color = color
// }
// function Child () {
// this.sex = 'boy'
// this.name = 'juan'
// Parent.call(this, 'child')
// this.name = 'junn'
// GrandParent.apply(this, [17, 'red'])
// }
// var child1 = new Child()
// OtherParent.bind(child1, 'yellow')()
// console.log(child1) // {sex: "boy", name: "junn", age: 17, color: "red"}
/** --------------------------------------- */
// function Parent (name, sex) {
// this.name = name
// this.sex = sex
// this.colors = ['white', 'black']
// }
// function Child (name, sex) {
// Parent.call(this, name, sex)
// }
// var child1 = new Child('child1', 'boy')
// child1.colors.push('yellow')
// var child2 = new Child('child2', 'girl')
// console.log(child1) // {name: "child1", sex: "boy", colors: Array(3)}
// console.log(child2) // {name: "child2", sex: "girl", colors: Array(2)}
// 构造继承的优点: 1.可以继承多个父类 2.修改实例不会影响其他实例 3.可以传递参数
/** --------------------------------------- */
// const arr = ['5', '6', '7', '11']
// const res = Math.max.apply(null, arr)
// console.log(res)
// function Parent (name) {
// this.name = name
// }
// Parent.prototype.getName = function () {
// console.log(this.name)
// }
// function Child () {
// this.sex = 'boy'
// Parent.call(this, 'good boy')
// }
// Child.prototype.getSex = function () {
// console.log(this.sex)
// }
// var child1 = new Child()
// console.log(child1)
// child1.getSex()
// child1.getName() // 报错
// 构造函数的缺点: 不能继承父类构造函数原型对象上的方法和属性
/** --------------------------------------- */
// function Parent (name) {
// this.name = name
// }
// function Child () {
// this.sex = 'boy'
// Parent.call(this, 'child')
// }
// var child1 = new Child()
// console.log(child1)
// console.log(child1 instanceof Child) // true
// console.log(child1 instanceof Parent) // false
// console.log(child1 instanceof Object) // true
// 通过构造函数继承的实例不是继承父类的实例,也不能使用父类原型对象上的方法
/** --------------------------------------- */
// 4.组合继承
// 组合继承就是将原型链继承与构造函数继承组合在一起，从而发挥两者之长的一种继承模式
// function Parent (name) {
// this.name = name
// }
// Parent.prototype.getName = function () {
// console.log(this.name)
// }
// function Child (name) {
// this.sex = 'boy'
// Parent.call(this, name)
// }
// Child.prototype = new Parent()
// Child.prototype.getSex = function () {
// console.log(this.sex)
// }
// var parent1 = new Parent('parent1')
// var child1 = new Child('child1')
// console.log(child1) // Child{ name: 'child1', sex: 'boy' }
// console.log(parent1)// Parent{ name: 'parent1' }
// child1.getName() // 'child1'
// child1.getSex() // 'boy'
// parent1.getName() // 'parent1'
// parent1.getSex() // Uncaught TypeError: parent1.getSex is not a function
/** --------------------------------------- */
// function Parent (name) {
// this.name = name
// }
// Parent.prototype.getName = function () {
// console.log(this.name)
// }
// function Child (name) {
// this.sex = 'boy'
// Parent.call(this, name)
// }
// Child.prototype = new Parent()
// Child.prototype.getSex = function () {
// console.log(this.sex)
// }
// var child1 = new Child('child1')
// var parent1 = new Parent('parent1')
// console.log(child1.constructor) // parent
// console.log(parent1.constructor) // parent
// 原型链继承会切断child原来的原型链结构,需要加上Child.prototype.constructor = Child修正
// constructor它是构造函数原型对象中的一个属性，正常情况下它指向的是原型对象。
// 它并不会影响任何JS内部属性，只是用来标示一下某个实例是由哪个构造函数产生的而已。
// 如果我们使用了原型链继承或者组合继承无意间修改了constructor的指向，那么出于编程习惯，我们最好将它修改为正确的构造函数。
/** --------------------------------------- */
// function Parent (name, colors) {
// this.name = name
// this.colors = colors
// }
// Parent.prototype.features = ['cute']
// function Child (name, colors) {
// this.sex = 'boy'
// Parent.apply(this, [name, colors])
// }
// Child.prototype = new Parent()
// // Child.prototype.constructor = Child
// Child.prototype.age = '17'
// var child1 = new Child('child1', ['white'])
// child1.colors.push('yellow')
// child1.features.push('sunshine')
// var child2 = new Child('child2', ['black'])
// var par = new Parent('child2', ['black'])
// console.log(child1)
// console.log(child2)
// console.log(Child.prototype)
// console.log(child1.features)
// console.log(child2.features)
// console.log(par.features)
// console.log(child1 instanceof Child)
// console.log(Child.prototype.isPrototypeOf(child1))
// console.log(child1 instanceof Parent)
/** --------------------------------------- */
// function Parent (name) {
// console.log(name) // 这里有个console.log()
// this.name = name
// }
// function Child (name) {
// Parent.call(this, name)
// }
// Child.prototype = new Parent()
// var child1 = new Child('child1')
// console.log(child1)
// console.log(Child.prototype)
// 组合继承的缺点: 1 使用组合继承时，父类构造函数会被调用两次
// 2 并且生成了两个实例，子类实例中的属性和方法会覆盖子类原型(父类实例)上的属性和方法，所以增加了不必要的内存。
/** --------------------------------------- */
// 组合继承
// 实现方式：
// 使用原型链继承来保证子类能继承到父类原型中的属性和方法
// 使用构造继承来保证子类能继承到父类的实例属性和方法
// 优点：
// 可以继承父类实例属性和方法，也能够继承父类原型属性和方法
// 弥补了原型链继承中引用属性共享的问题
// 可传参，可复用
// 缺点：
// 使用组合继承时，父类构造函数会被调用两次
// 并且生成了两个实例，子类实例中的属性和方法会覆盖子类原型(父类实例)上的属性和方法，所以增加了不必要的内存。
// constructor总结：
// constructor它是构造函数原型对象中的一个属性，正常情况下它指向的是原型对象。
// 它并不会影响任何JS内部属性，只是用来标示一下某个实例是由哪个构造函数产生的而已。
// 如果我们使用了原型链继承或者组合继承无意间修改了constructor的指向，那么出于编程习惯，我们最好将它修改为正确的构造函数。
/** --------------------------------------- */
// 5.寄生组合继承
// function Parent (name) {
// this.name = name
// }
// Parent.prototype.getName = function () {
// console.log(this.name)
// }
// function Child (name) {
// this.sex = 'boy'
// Parent.call(this, name)
// }
// // 与组合继承的区别
// Child.prototype = Object.create(Parent.prototype)
// Child.prototype.constructor = Child
// var child1 = new Child('child1')
// console.log(child1) // Child{ sex: "boy", name: "child1" }
// child1.getName() // "child1"
// console.log(child1.__proto__) // Parent{}
// console.log(Object.create(null)) // {}
// console.log(new Object()) // {}
// 寄生组合继承算是ES6之前一种比较完美的继承方式吧。
// 它避免了组合继承中调用两次父类构造函数，初始化两次实例属性的缺点。
// 所以它拥有了上述所有继承方式的优点：
// 只调用了一次父类构造函数，只创建了一份父类属性
// 子类可以用到父类原型链上的属性和方法
// 能够正常的使用instanceOf和isPrototypeOf方法
/** --------------------------------------- */
// 6.原型继承
// function Create(obj) {
// function F() {}
// F.prototype = obj
// return new F()
// }
// var cat = {
// heart: '❤️',
// colors: ['white', 'black']
// }
// var guaiguai = Create(cat)
// var huaihuai = Create(cat)
// console.log(guaiguai)
// console.log(huaihuai)
// console.log(guaiguai.heart)
// console.log(huaihuai.colors)
// 该方法的原理是创建一个构造函数，构造函数的原型指向对象，然后调用 new 操作符创建实例，并返回这个实例，本质是一个浅拷贝。
// 在ES5之后可以直接使用Object.create()方法来实现
/** --------------------------------------- */
// 7.寄生式继承
// var cat = {
// heart: '❤️',
// colors: ['white', 'black']
// }
// function createAnother (original) {
// var clone = Object.create(original);
// clone.actingCute = function () {
// console.log('我是一只会卖萌的猫咪')
// }
// return clone;
// }
// var guaiguai = createAnother(cat)
// var huaihuai = Object.create(cat)
// guaiguai.actingCute()
// console.log(guaiguai.heart)
// console.log(huaihuai.colors)
// console.log(guaiguai)
// console.log(huaihuai)
// 实现方式：
// 在原型式继承的基础上再封装一层，来增强对象，之后将这个对象返回。
// 优点：
// 再不用创建构造函数的情况下，实现了原型链继承，代码量减少一部分。
// 缺点：
// 一些引用数据操作的时候会出问题，两个实例会公用继承实例的引用数据类
// 谨慎定义方法，以免定义方法也继承对象原型的方法重名
// 无法直接给父级构造函数使用参数
/** --------------------------------------- */
// 8. 混入方式继承多个对象
// function Parent() {
// this.name = 'parent'
// }
// Parent.prototype.getName = function() {
// console.log('parent')
// }
// function OtherParent(sex) {
// this.sex = sex
// }
// OtherParent.prototype.getColor = 'red'
// function Child (sex) {
// Parent.call(this)
// OtherParent.call(this, sex)
// }
// Child.prototype = Object.create(Parent.prototype)
// Object.assign(Child.prototype, OtherParent.prototype)
// Child.prototype.constructor = Child
// var child1 = new Child('boy')
// // console.log(child1)
// // child1.getName()
// // console.log(child1.getColor)
// console.log(Child.prototype.__proto__ === Parent.prototype) // true
// console.log(Child.prototype.__proto__ === OtherParent.prototype) // false
// console.log(child1 instanceof Parent) // true
// console.log(child1 instanceof OtherParent) // false
/** --------------------------------------- */
// 9. class中的继承
// class中的继承主要是extends和super
// class Parent {
// constructor (name) {
// this.name = name
// }
// getName() {
// console.log(this.name)
// }
// }
// class Child extends Parent {
// // constructor (name, sex) {
// // super(name)
// // this.sex = sex
// // }
// sex = 'boy' // 等同于注释部分
// }
// var child1 = new Child('child1', 'boy')
// console.log(child1)
// child1.getName()
// console.log(child1 instanceof Child)
// console.log(child1 instanceof Parent)
// extends 和 super必须一起使用
// 子类必须得在constructor中调用super方法，否则新建实例就会报错，
// 因为子类自己没有自己的this对象，而是继承父类的this对象，然后对其加工，如果不调用super的话子类就得不到this对象。
/** --------------------------------------- */
// class Parent {
// constructor () {
// console.log(new.target.name) // 此方法将调用两次
// }
// }
// class Child extends Parent {
// constructor () {
// const instance = super()
// console.log(instance)
// console.log(instance === this)
// }
// }
// const child1 = new Child()
// const parent1 = new Parent()
// console.log(child1, parent1)
// Child
// Child {}
// true
// Parent
// Child{} Parent{}
/** --------------------------------------- */
// class Parent {
// constructor (name) {
// this.name = name
// }
// }
// class Child extends Parent {
// constructor (name) {
// this.sex = 'boy' // this调用必须放到super之后
// super(name)
// }
// }
// var child1 = new Child('child1')
// console.log(child1)
// 子类constructor中如果要使用this的话就必须放到super()之后
// super当成函数调用时只能在子类的construtor中使用
/** --------------------------------------- */
// class Parent {
// constructor (name) {
// this.name = name
// }
// getName() {
// console.log(this.name)
// }
// }
// Parent.prototype.getSex = () => {
// console.log('boy')
// }
// Parent.getColors = () => {
// console.log(['red'])
// }
// class Child extends Parent {
// constructor (name) {
// super(name)
// super.getName()
// }
// initGetSex () {
// super.getSex()
// }
// static initColor () {
// super.getColors()
// }
// }
// const child1 = new Child('child1')
// child1.initGetSex()
// Child.initColor()
// console.log(child1)
/** --------------------------------------- */
// class Parent {
// constructor () {}
// }
// Parent.prototype.sex = 'boy'
// Parent.prototype.getSex = function () {
// console.log(this.sex)
// }
// class Child extends Parent {
// constructor () {
// super()
// this.sex = 'girl'
// super.getSex()
// }
// }
// var child1 = new Child()
// console.log(child1)
// ES6规定，通过super调用父类的方法时，super会绑定子类的this
/** --------------------------------------- */
// function Parent () {
// this.name = 'parent'
// }
// class Child1 extends Parent {}
// class Child2 {}
// class Child3 extends Array {}
// var child1 = new Child1()
// var child2 = new Child2()
// var child3 = new Child3()
// child3[0] = 1
// console.log(child1)
// console.log(child2)
// console.log(child3)
// extends后面接着的继承目标不一定要是个class。
// class B extends A {}，只要A是一个有prototype属性的函数，就能被B继承。
// 由于函数都有prototype属性，因此A可以是任意函数。
/** --------------------------------------- */
// 总结:
/**
* ES6中的继承：
主要是依赖extends关键字来实现继承，且继承的效果类似于寄生组合继承
使用了extends实现继承不一定要constructor和super，因为没有的话会默认产生并调用它们
extends后面接着的目标不一定是class，只要是个有prototype属性的函数就可以了
super相关：
在实现继承时，如果子类中有constructor函数，必须得在constructor中调用一下super函数，因为它就是用来产生实例this的。
super有两种调用方式：当成函数调用和当成对象来调用。
super当成函数调用时，代表父类的构造函数，且返回的是子类的实例，也就是此时super内部的this指向子类。在子类的constructor中super()就相当于是Parent.constructor.call(this)。
super当成对象调用时，普通函数中super对象指向父类的原型对象，静态函数中指向父类。且通过super调用父类的方法时，super会绑定子类的this，就相当于是Parent.prototype.fn.call(this)。
ES5继承和ES6继承的区别：
在ES5中的继承(例如构造继承、寄生组合继承) ，实质上是先创造子类的实例对象this，然后再将父类的属性和方法添加到this上(使用的是Parent.call(this))。
而在ES6中却不是这样的，它实质是先创造父类的实例对象this(也就是使用super())，然后再用子类的构造函数去修改this。
*/