博客
关于我
js之继承
阅读量:198 次
发布时间:2019-02-28

本文共 2022 字,大约阅读时间需要 6 分钟。

一、什么是继承

继承是类与类之间的关系,其作用是使得子类具有父类别的各种属性和方法。

二、继承的实现方式

想要继承,就必须要提供个父类(继承谁,提供继承的属性)

// 创建一个人类,并且人类带有名字 吃饭和能跑的属性function Human(name) {         this.name = name      this.eat = function () {           console.log('吃饭')      }    }    Human.prototype.run = function () {         console.log('我很能跑')    }
1.原型链继承(重点:让新实例的原型等于父类的实例。)
// 创建一个男人类,并且让男人类 继承 人类有名字 吃饭和能跑的属性function Man(age) {         this.age = age    }    Man.prototype = new Human("小王") // 重点        let man = new Man('11')    console.log(man.age) // 11    console.log(man.name) // '小王'    man.run() // '我很能跑'    let man2 = new Man('33')    console.log(man2.age) // 33    console.log(man2.name) // '小王'    man2.run() // '我很能跑'

缺点:

  • 新实例无法向父类构造函数传参。
  • 继承单一。
  • 所有新实例都会共享父类实例的属性。(原型上的属性是共享的,一个实例修改了原型属性,另一个实例的原型属性也会被修改!)
2.借用构造函数继承(重点:用.call()和.apply()将父类构造函数引入子类函数)
function Man(name, age) {         Human.call(this, name) // 重点      this.age = age    }    let man1 = new Man('小王', 12)    console.log(man1.name) // 小王    console.log(man1.age) // 12    man1.eat() // 吃饭    man1.run() // Uncaught TypeError: man1.run is not a function    let man2 = new Man('大王', 21)    console.log(man2.name) // 大王    console.log(man2.age) // 21

缺点:

  • 只能继承父类构造函数的属性。
  • 无法实现构造函数的复用。(每次用每次都要重新调用)
  • 每个新实例都有父类构造函数的副本,臃肿。
3.组合继承(组合原型链继承和借用构造函数继承)(常用)
function Man(age, name) {         Human.call(this, name) // 重点      this.age = age    }    Man.prototype = new Human() // 重点    let man1 = new Man('小王', 12)    console.log(man1.name) // 小王    console.log(man1.age) // 12    man1.eat() // 吃饭    man1.run() // 我很能跑    let man2 = new Man('大王', 21)    console.log(man2.name) // 大王    console.log(man2.age) // 21

优点:

  • 可以继承父类原型上的属性,可以传参,可复用。

缺点:

  • 调用了两次父类构造函数(耗内存),子类的构造函数会代替原型上的那个父类构造函数。
4.原型式继承(用一个函数包装一个对象,然后返回这个函数的调用,这个函数就变成了个可以随意增添属性的实例或对象。object.create()就是这个原理。)
function Man(obj) {         function F() {   }      F.prototype = obj      return new F()    }    let man = new Human('小')    let man1 = Man(man)    console.log(man1.name) // 小

缺点:

  • 所有实例都会继承原型上的属性。
  • 无法实现复用。(新实例属性都是后面添加的)

web前端技术交流QQ群:327814892

转载地址:http://ktri.baihongyu.com/

你可能感兴趣的文章
Mysql8在Windows上离线安装时忘记root密码
查看>>
MySQL8找不到my.ini配置文件以及报sql_mode=only_full_group_by解决方案
查看>>
mysql8的安装与卸载
查看>>
MySQL8,体验不一样的安装方式!
查看>>
MySQL: Host '127.0.0.1' is not allowed to connect to this MySQL server
查看>>
Mysql: 对换(替换)两条记录的同一个字段值
查看>>
mysql:Can‘t connect to local MySQL server through socket ‘/var/run/mysqld/mysqld.sock‘解决方法
查看>>
MYSQL:基础——3N范式的表结构设计
查看>>
MYSQL:基础——触发器
查看>>
Mysql:连接报错“closing inbound before receiving peer‘s close_notify”
查看>>
mysqlbinlog报错unknown variable ‘default-character-set=utf8mb4‘
查看>>
mysqldump 参数--lock-tables浅析
查看>>
mysqldump 导出中文乱码
查看>>
mysqldump 导出数据库中每张表的前n条
查看>>
mysqldump: Got error: 1044: Access denied for user ‘xx’@’xx’ to database ‘xx’ when using LOCK TABLES
查看>>
Mysqldump参数大全(参数来源于mysql5.5.19源码)
查看>>
mysqldump备份时忽略某些表
查看>>
mysqldump实现数据备份及灾难恢复
查看>>
mysqldump数据库备份无法进行操作只能查询 --single-transaction
查看>>
mysqldump的一些用法
查看>>