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' } }
个人觉得这四种继承模式是JavaScript中最基本的继承手段,网上好像有说8 || 9 种继承方法的,我没太细去看,感觉万变不离其宗吧应该。