抱歉,你查看的文章不存在

JavaScript常见的继承方式

前言

JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一。那么在JS中常见的继承方式有几种呢?

方式一、原型链继承

  1. 套路
    • 定义父类型构造函数
    • 给父类型的原型添加方法
    • 定义子类型的构造函数
    • 创建父类型的对象赋值给子类型的原型
    • 将子类型原型的构造属性设置为子类型
    • 给子类型原型添加方法
    • 创建子类型的对象: 可以调用父类型的方法
  2. 关键在于:子类型的原型为父类型的一个实例对象
//父类型
 function Supper() {
   this.supProp = 'Supper property'
 }
 Supper.prototype.showSupperProp = function () {
   console.log(this.supProp)
 }
 //子类型
 function Sub() {
   this.subProp = 'Sub property'
 }
 // 子类型的原型为父类型的一个实例对象
 Sub.prototype = new Supper()
 // 让子类型的原型的constructor指向子类型
 Sub.prototype.constructor = Sub
 Sub.prototype.showSubProp = function () {
   console.log(this.subProp)
 }
 var sub = new Sub()
 sub.showSupperProp()//Supper property
 sub.showSubProp()//Sub property

特点

  • 父类新增原型方法/原型属性,子类都能访问到
  • 简单,易于实现

缺点

  • 要想为子类新增属性和方法,必须要在new Supper()这样的语句之后执行,不能放到构造器中
  • 无法实现多继承
  • 来自原型对象的所有属性被所有实例共享
  • 创建子类实例时,无法向父类构造函数传参

方式二: 借用构造函数继承

  1. 套路:
    • 定义父类型构造函数
    • 定义子类型构造函数
    • 在子类型构造函数中调用父类型构造
  2. 关键在于:在子类型构造函数中通用call()调用父类型构造函数
<script type="text/javascript">
  function Person(name, age) {
    this.name = name
    this.age = age
  }
  function Student(name, age, price) {
    Person.call(this, name, age)  // 相当于: this.Person(name, age)
    /*this.name = name
    this.age = age*/
    this.price = price
  }
  console.log(s.name, s.age, s.price)//Tom 20 14000
  var s = new Student('Tom', 20, 14000)

特点

  • 解决了原型链继承中子类实例共享父类引用属性的问题
  • 创建子类实例时,可以向父类传递参数
  • 可以实现多继承(call多个父类对象)

缺点

  • 实例并不是父类的实例,只是子类的实例
  • 只能继承父类的实例属性和方法,不能继承原型属性/方法
  • 无法实现函数复用,每个子类都有父类实例函数的副本,影响性能

方式三: 原型链+借用构造函数的组合继承

  1. 利用原型链实现对父类型对象的方法继承
  2. 利用super()借用父类型构建函数初始化相同属性
 function Person(name, age) {
    this.name = name
    this.age = age
  }
  Person.prototype.setName = function (name) {
    this.name = name
  }
  function Student(name, age, price) {
    Person.call(this, name, age)  // 为了得到属性
    this.price = price
  }
  Student.prototype = new Person() // 为了能看到父类型的方法
  Student.prototype.constructor = Student //修正constructor属性
  Student.prototype.setPrice = function (price) {
    this.price = price
  }
  var s = new Student('Tom', 24, 15000)
  s.setName('Bob')
  s.setPrice(16000)
  console.log(s.name, s.age, s.price)//Bob 24 16000

优点:融合原型链继承和构造函数的优点,是 JavaScript 中最常用的继承模式。

参考文章

JS实现继承的几种方式

JavaScript深入之继承的多种方式和优缺点

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

编辑于

前端学习心得

0 篇文章25 人订阅

相关文章

来自专栏Java技术分享

java5的静态导入和自动装箱拆箱

静态导入:导入某个类的静态成员(属性和方法) 语法:import static 可以简化编程,但是可读性较差,所以使用较少,仅作为了解。 自动装箱:将原始...

2165
来自专栏武军超python专栏

2018-7月19日系统模块字符串操作

每天遇到的新单词: recursion   n:递归 objece      n:对象 maximum     adj:最大值 exceed      ...

1203
来自专栏mwangblog

python条件执行

1284
来自专栏浪淘沙

Python学习总结3--Python基础

    a = 100 if a >= 0:     print(a) else:     print(-a) 其中,#为注...

991
来自专栏angularejs学习篇

angularjs学习第八天笔记(指令作用域研究)

angularjs其作用域通过scope来实现,其取值有三种情况:true、false、{}

891
来自专栏coder修行路

go基础之--函数和map

在整理函数之前先整理一下关于指针 指针 普通类型变量存的就是值,也叫值类型。指针类型存的是地址,即指针的值是一个变量的地址。 一个指针指示值所保存的位置,不是所...

2947
来自专栏开源优测

[快学Python3]Tuple(元组)

概述 元组,使用小括号()来标识,其特点是:元组中的元素不可修改 下面我们看下如何创建元组的示例: tuple1 = (u'DeepTest', u'开源优测'...

2665
来自专栏开源优测

[快学Python3]Sets(集合)

概述 set是Python的基本数据类型,它有可变集合(set()) 和不可变集合(frozenset)两种,在本节中,我们主要讲解set的使用方法。set和d...

2857
来自专栏python成长之路

函数的不定长参数

1392
来自专栏散尽浮华

python基础随笔

一: 作用域 对于变量的作用域,只要内存中存在,该变量就可以使用。 二:三元运算 name = 值1 if 条件 else 值2 如果条件为真:result =...

2149

扫码关注云+社区

领取腾讯云代金券