js继承的这6种方式!(上)


Posted in Javascript onApril 23, 2019

写在前面

继承的简介

继承”是JavaScript面向对象设计的重要一环,愿你认真读完本文,吃透继承的概念。

继承的核心

js继承的这6种方式!(上)

1. 继承方式一:原型链

1.1 介绍

原型链是实现继承最原始的模式,即通过prototype属性实现继承。

//父级-构造函数
function Father() {
 this.fatherProp = true
}

//父级-原型属性
Father.prototype.getFatherValue = function() {
 return this.fatherProp
}

//子级-构造函数
function Son() {
 this.sonProp = false
}

//子级-原型属性:继承父级
//即__proto__指向父级的prototype
//若不理解请阅读《一张图彻底KO原型链(prototype,__proto__》
Son.prototype = new Father()

//子级-添加原型方法
Son.prototype.getSonValue = function() {
 return this.sonProp
}

//创建子级的实例对象
var son = new Son()
console.log(son.getFatherValue()) //true

1.2 解析:son实例对象是如何找到getFatherValue()方法的呢?

  1. 首先在son对象自身中找。若对象自身没找到
  2. 然后在Son.prototype中找。若Son.prototype中没找到
  3. 继续往上一层,Son.prototype.__proto__(Fater.prototype)
  4. 依次类推,直到找到需要的属性或方法,或到达原型链顶端Object.prototype

如果到最后都没找到,会发生什么呢?

//一个不存在的方法
console.log(son.getValue()) //ERROE:not a function

1.3 注意事项

重写父级原型链的方法或者添加父级原型链不存在的方法,必须在父级原型链代码之后。(这个很好理解,不放代码演示了)

通过原型链实现继承后,不能再使用字面量的方式创建原型对象,因为会覆盖原型链。

//子级-原型属性:继承父级
Son.prototype = new Father()

//不能像下面这样,这样会使得上面的代码无效
//因为这相当于重新创建了一个原型对象
Son.prototype = {
 getSonValue: function() {
  return this.sonProp
 }
}

1.4 原型链实现继承的弊端

世间万事万物都不可能十全而十美,原型链虽然强大,但也存在缺陷。

原型链中引用类型的属性会被所有实例共享的,即所有实例对象使用的是同一份数据,会相互影响。

function Father() {
  this.arr = [1,2,3]
 }

 function Son() {
 }

 Son.prototype = new Father()

 var son1 = new Son()
 console.log(son1.arr) //1,2,3

 var son2 = new Son()
 son2.arr.push(4)

 console.log(son2.arr) //1,2,3,4
 console.log(son1.arr) //1,2,3,4

无法向父级构造函数传参

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

2.1 介绍

方式一中引用类型带来的问题可借用构造函数的方式解决。其核心思想是:在子级构造函数中调用父级构造函数。

如何实现在一个构造函数中调用另一个函数?——call()和apply()

function Father() {
  this.arr = [1,2,3]
 }

 function Son() {
  //call的第一个函数是this指向的对象,即构造函数的实例对象
  Father.call(this)

  /*上面代码等同于下面这段代码:
  (function() {
   this.arr = [1,2,3]
  }).call(this)
  */
 }

 var son1 = new Son()
 console.log(son1.arr) //1,2,3

 var son2 = new Son()
 son2.arr.push(4)

 console.log(son2.arr) //1,2,3,4
 console.log(son1.arr) //1,2,3
//解决传参问题:
function Father(name) {
 this.name = name
}

function Son(name) {
 Father.call(this, name)
}

var son1 = new Son("小名")
console.log(son1.name)  //小名

var son2 = new Son("一灯")
console.log(son2.name)  //一灯

2.2 借用构造函数的缺陷

这种方式是通过构造函数实现的,当然也把构造函数自身的问题带过来了——破坏了复用性。因为每个实例都创建了一份副本。

3. 组合继承

3.1 介绍

组合继承 = 原型链 + 借用构造函数。取其长避其短:共享的用原型链,各自的借用构造函数

function Father(name) {
 this.name = name
 this.arr = [1,2,3]
}

Father.prototype.getName = function() {
 console.log(this.name)
}

function Son(name, age) {
 Father.call(this, name)
 this.age = age
}

Son.prototype = new Father()
Son.prototype.constructor = Son
Son.prototype.getAge = function() {
 console.log(this.age)
}

var son1 = new Son("小名", 23)
son1.arr.push(4)
console.log(son1.arr) //1,2,3,4
son1.getName()    //小名
son1.getAge()     //23

var son2 = new Son("一灯", 24)
console.log(son2.arr) //1,2,3
son1.getName()    //一灯
son1.getAge()     //24

3.2 解析

借用构造函数部分:

Father.call(this, name)——name来自Father
this.age = age; Son.prototype.constructor = Son——age来自Son

原型链部分:

Father.prototype.getName——getName方法来自Father.prototype
Son.prototype.getAge——getAge来自Son.prototype

后记

关于继承的后三种方式马上推出,期待你的点赞&关注!

以上所述是小编给大家介绍的js继承方式详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js单向链表的具体实现实例
Jun 21 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 Javascript
javascript简单比较日期大小的方法
Jan 05 Javascript
JS如何判断json是否为空
Jul 06 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
Angular页面间切换及传值的4种方法
Nov 04 Javascript
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
详解Vue使用命令行搭建单页面应用
May 24 Javascript
浅谈node.js 命令行工具(cli)
May 10 Javascript
Js中将Long转换成日期格式的实现方法
Jun 05 Javascript
javascript实现动态时钟的启动和停止
Jul 29 Javascript
es6数组之扩展运算符操作实例分析
Apr 25 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 #jQuery
node.js基于socket.io快速实现一个实时通讯应用
Apr 23 #Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
Apr 23 #Javascript
vue 中 beforeRouteEnter 死循环的问题
Apr 23 #Javascript
JavaScript中十种一步拷贝数组的方法实例详解
Apr 22 #Javascript
vue watch关于对象内的属性监听
Apr 22 #Javascript
vue项目中仿element-ui弹框效果的实例代码
Apr 22 #Javascript
You might like
php和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
php中mysql模块部分功能的简单封装
2011/09/30 PHP
php array的学习笔记
2012/05/10 PHP
php 获取本地IP代码
2013/06/23 PHP
php格式化日期和时间格式化示例分享
2014/02/24 PHP
dess中一个简单的多路委托的实现
2010/07/20 Javascript
javascript仿qq界面的折叠菜单实现代码
2012/12/12 Javascript
JavaScript 创建运动框架的实现代码
2013/05/08 Javascript
Jquery实现搜索框提示功能示例代码
2013/08/13 Javascript
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
2017/01/26 Javascript
Javascript 实现匿名递归的实例代码
2017/05/25 Javascript
AngularJS路由Ui-router模块用法示例
2017/05/29 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
2017/12/25 Javascript
一个小时快速搭建微信小程序的方法步骤
2019/04/15 Javascript
vue-cli3+typescript新建一个项目的思路分析
2019/08/06 Javascript
Node.js中的异步生成器与异步迭代详解
2021/01/31 Javascript
[01:02:06]LGD vs Mineski Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
python Django连接MySQL数据库做增删改查
2013/11/07 Python
Python实现针对中文排序的方法
2017/05/09 Python
python3实现跳一跳点击跳跃
2018/01/08 Python
DataFrame 将某列数据转为数组的方法
2018/04/13 Python
详解使用python绘制混淆矩阵(confusion_matrix)
2019/07/14 Python
Django之编辑时根据条件跳转回原页面的方法
2019/08/21 Python
python实现最大优先队列
2019/08/29 Python
python的faker库用法
2019/11/28 Python
python学生管理系统的实现
2020/04/05 Python
python爬虫中抓取指数的实例讲解
2020/12/01 Python
HTML5页面中尝试调起APP功能
2017/09/12 HTML / CSS
澳大利亚最好的厨具店:Kitchen Warehouse
2018/03/13 全球购物
电子商务专业自我鉴定
2013/12/18 职场文书
幼儿园小班植树节活动方案
2014/03/04 职场文书
货车司机岗位职责
2014/03/18 职场文书
授权委托书(完整版)
2014/09/10 职场文书
公司会议开幕词
2015/01/29 职场文书
小学六一儿童节活动总结
2015/05/05 职场文书