JS继承模式详解-CSDN博客

本文链接：https://blog.csdn.net/isHoMeTown/article/details/110286917

JavaScript本身也是一门面向对象的语言，面向对象的三大特点

封装
继承
多态
- 重写子类重写父类的方法
- 重载相同的方法，由于参数或者返回值的不同，实现不同的作用

JavaScript中的重载有区别于其他语言，e.g.

function fn(x) {
	console.log(x)
}
function fn(x,y) {
	console.log(x,y)
}
fn(1,2) // 此时执行一定是第二个函数，没有完全重载的意义

今天说一下 JavaScript 中的继承，网上对继承有很多的文章了，但我总觉得很含糊，我认为Js中的继承，其实并不是严格意义上的继承，而是通过某种手段，达到继承的目的，也可以说是一种手法，网上各式各样的继承方法，其实都是使用这几种手法达成，下面进入正文：

正文

1. 基于原型的继承

不难看出来，这种方法其实就是利用原型&原型链的机制，将父类的实例对象或者原型对象，作为子类的原型，子类的实例可以访问子类的原型，也就是访问父类的对象或者原型对象，达到继承的目的。

function Parent() {
	this.x = 'parent x'
}
Parent.prototype.getX = function() {
	return this.x
}
Son.prototype = new Parent
Son.prototype.constructor = Son // 别忘了构造函数的原型上都有一个 constructor属性，实例对象上可没有
// 此处加入代码 Son.prototype = new Parent
// 此时
// son1.__proto__ === Son.prototype === new Parent「只是刚刚的那个实例对象，跟以后new出来的无关，接下来用 父实例1表示」
// Son.prototype.__proto__  === 父实例1.__proto__ === Parent.prototype
// 到这，你应该懂了，如果不懂，请去百度一下原型&原型链，搞明白再回来看看，记得收藏，留一条回来的路
function Son() {
	this.y = 'son y'
}
Son.prototype.getY = function() {
	return this.y
}
let son1 = new Son
// 没有加入 Son.prototype = new Parent
// son1.__proto__ === Son.prototype
// Son.prototype.__proto__ === Object.prototype
// 此处和 Parent构造函数没有半毛钱关系，无法使用Parent私有的或者公有的属性或者方法

这段代码可以实现子类对父类私有属性方法&原型属性方法的一个继承，原理很简单，就是原型&原型链的机制，但是他有弊端：

子类原型上的属性和方法必须在进行指向操作之后进行，不然的话会被父类的实例对象所覆盖
在父类的私有对象中添加属性和方法会添加到子类的原型上
此处重点记：父类中的私有属性方法变成了子类公有的。

2.基于 call 方法继承
个人感觉这个方法实现继承真的很糙，看代码吧

function Parent() {
	this.x = 'parent x'
}
Parent.prototype.getX = function() {
	return this.x
}

function Son() {
	Parent.call(this)
	// 你没看错，就上面这行代码，把函数Parent当做普通函数执行，把Parent的私有属性都走一遍，但是注意this，仅仅执行 Parent()的话，this指的是window，
	// 不要问为什么，不会的话去百度一下js的 this指向，搞明白再回来看看，记得收藏，留一条回来的路
	this.y = 'son y'
}
Son.prototype.getY = function() {
	return this.y
}

let son1 = new Son()

基于call方法去继承有一点点做 Copy的感觉，你觉得呢？弊端就是只能访问父类的私有属性，聪明的你应该知道下个方法是什么了（这俩组合到一块），这里我就不写了

3. 组合继承
emmmmmmmmmmmmmmm…

4.ES6福利继承（我瞎叫的）

class Parent {
	constructor() {
		this.x = 'parent x'
	}
}

class Son extends Parent {
	constructor() {
		super()
		// 这个super是必须得写的，其实它相当于父类的constructor执行，类似 call继承
		this.y = 'son y'
	}
}