手撕Js中的四种继承方式

简介: JavaScript本身也是一门面向对象的语言,面向对象的三大特点

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

  1. 封装
  2. 继承
  3. 多态
  • 重写 子类重写父类的方法
  • 重载 相同的方法,由于参数或者返回值的不同,实现不同的作用

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私有的或者公有的属性或者方法

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


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


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 种继承方法的,我没太细去看,感觉万变不离其宗吧应该。

目录
相关文章
|
9天前
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
18天前
|
JavaScript 前端开发
Javascript如何实现继承?
【10月更文挑战第24天】JavaScript 中实现继承的方式有很多种,每种方式都有其优缺点和适用场景。在实际开发中,我们需要根据具体的需求和情况选择合适的继承方式,以实现代码的复用和扩展。
|
12天前
|
JavaScript 前端开发
如何使用原型链继承实现 JavaScript 继承?
【10月更文挑战第22天】使用原型链继承可以实现JavaScript中的继承关系,但需要注意其共享性、查找效率以及参数传递等问题,根据具体的应用场景合理地选择和使用继承方式,以满足代码的复用性和可维护性要求。
|
12天前
|
JavaScript 前端开发 开发者
js实现继承怎么实现
【10月更文挑战第26天】每种方式都有其优缺点和适用场景,开发者可以根据具体的需求和项目情况选择合适的继承方式来实现代码的复用和扩展。
28 1
|
5月前
|
设计模式 JavaScript 前端开发
在JavaScript中,继承是一个重要的概念,它允许我们基于现有的类(或构造函数)创建新的类
【6月更文挑战第15天】JavaScript继承促进代码复用与扩展,创建类层次结构,但过深的继承链导致复杂性增加,紧密耦合增加维护成本,单继承限制灵活性,方法覆盖可能隐藏父类功能,且可能影响性能。设计时需谨慎权衡并考虑使用组合等替代方案。
46 7
|
5月前
|
JavaScript 前端开发
在 JavaScript 中,实现继承的方法有多种
【6月更文挑战第15天】JavaScript 继承常见方法包括:1) 原型链继承,利用原型查找,实例共享原型属性;2) 借用构造函数,避免共享,但方法不在原型上复用;3) 组合继承,结合两者优点,常用但有额外开销;4) ES6 的 class,语法糖,仍基于原型链,提供直观的面向对象编程。
37 7
|
2月前
|
自然语言处理 JavaScript 前端开发
一文梳理JavaScript中常见的七大继承方案
该文章系统地概述了JavaScript中七种常见的继承模式,包括原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合继承等,并探讨了每种模式的实现方式及其优缺点。
一文梳理JavaScript中常见的七大继承方案
|
2月前
|
JavaScript 前端开发
js之class继承|27
js之class继承|27
|
2月前
|
JSON JavaScript 前端开发
js原型继承|26
js原型继承|26
|
2月前
|
JavaScript 前端开发 开发者
JavaScript 类继承
JavaScript 类继承
19 1