JS继承最简单的理解方式


Posted in Javascript onMarch 31, 2021

我们可以简单的分为以下几种继承方式

  1. 原型链继承
  2. 构造函数继承
  3. 组合继承
  4. 寄生组合继承/加强版寄生组合继承
  5. 类继承

以下 A代表父级 B代表子级

我们先看原型链继承
先上代码

function A(name,age){
              this.name = name;
              this.arr = [];
              this.age = age;
              this.sing = function(){
                  return  '我会唱歌、我会跳舞。'
              }
          }
          function B(run){
              this.run = run
          }
          B.prototype = new A('zjq',18)
          console.log(new B()._proto_ === A.construct)
          let a = new B('123')
          let b = new B('456')
          a.arr.push('1')
          console.log(b.arr)  //['1']

B已经完全的集成到了A的属性和方法,但是有一个缺点就是当我们实例化两个B的时候,给第一个arr添加item,第二个实例化对象也会跟着变化。a和b的arr都新添了一个item。方法变成了共享,不是实例所私有的。(引用类型)

构造函数继承
上代码

function A(name,age){
              this.name = name;
              this.age = age;
              this.arr =[];
              this.sing = function(){
                  return  '我会唱歌、我会跳舞。'
              }
          }
          A.prototype.zjq = function(){
            return 'run'
        }
          function B(run){
              this.run = run
              A.call(this,'zjq',this.run) //父级的属性和方法称为子级的私有属性和方法  子级可以向父级传参
          }
          let Bobj = new B('runing')
          console.log(Bobj)
          console.log(Bobj.sing())
          let a = new B('123')
          let b = new B('456')
          a.arr.push('1')
          console.log(b.arr)  //[]

构造函数继承虽然可以使用A中的方法和属性,但是不是继承的关系过来的,它的_proto_上没有A的任何信息,它将A的属性和方法变成了自己的属性和方法,但是原型链上的方法(zjq方法并没有)是无法继承到的。创建子类实例,可以向父类构造函数传参数。解决了方法变成了共享的问题,变成了实例所私有的。

组合继承
上代码

function A(name, age) {
            this.name = name;
            this.age = age;
            this.arr=[]
        }
        A.prototype.sing = function () {
            return '我会唱歌、我会跳舞。' + this.name + this.age
        }
        function B(run) {
            this.run = run
            A.call(this, 'zjq', this.run) //父级的属性和方法称为子级的私有属性和方法  子级可以向父级传参
        }
        B.prototype = new A()
        let brr = new B('参数')
        let a = new B('123')
        let b = new B('456')
        a.arr.push('1')
        console.log(b.arr)  //[]
        console.log(brr)
        console.log(brr.sing())
        console.log(brr.age)

结合原型链继承和借用构造函数继承的优点 ,继承了A的属性和方法也可以向A传递自己的参数。解决了方法变成了共享的问题,变成了实例所私有的,但是A构造函数被调用了两次。

寄生组合继承
上代码

function A(name, age) {
            this.name = name;
            this.age = age;
            this.arr = []
        }
        A.prototype.sing = function () {
            return '我会唱歌、我会跳舞。' + this.name + this.age
        }
        function B(run) {
            this.run = run
            A.call(this, 'zjq', this.run)
        }
        B.prototype = A.prototype
        // let b= new B('123')
        // console.log(b)
        B.prototype.sing = function () {
            return 'xxx'
        }
        let a = new B('123')
        let b = new B('456')
        a.arr.push('1')
        console.log(b.arr)  //[]
        console.log(new A().sing())  //变成了xxx  而不是 return '我会唱歌、我会跳舞。' + this.name + this.age

解决了方法变成了共享的问题,变成了实例所私有的,但是又有一个突出的问题,B可以改变原型链上的东西,A和B共享了原型链。

加强版寄生组合继承

function A(name, age) {
            this.name = name;
            this.age = age;
        }
           A.prototype.sing = function () {
            return '我会唱歌、我会跳舞。' + this.name + this.age
        }
        function B(run) {
            this.run = run
            A.call(this, 'zjq', this.run) 
        }
        function f(){}
        f.prototype = A.prototype
        B.prototype = new f()
        let b= new B('123')
        console.log(b)
        B.prototype.sing = function(){
            return 'xxx'
        }
        console.log(new A().sing()) //return '我会唱歌、我会跳舞。' + this.name + this.age

解决了共享原型链的问题。 完美收官。

类继承
上代码

class A {//父级构造函数
            constructor(name) {
                this.name = name;
            }
            sing() {
                return this.name + 'xxx'
            }
        }

        class B extends A { //子级继承父级
            constructor(name,age) {
                super(name)  调用实现父类的构造函数  并传递参数
                this.age = age
            }
        }
        let b = new B(12333,222) //实例化子级
        console.log(b)
        console.log(b.sing()) //return this.name + 'xxx'

 

Javascript 相关文章推荐
iframe 父窗口和子窗口相互的调用方法集锦
Dec 15 Javascript
JavaScript实现弹出子窗口并传值给父窗口
Dec 18 Javascript
详解Bootstrap按钮
Jan 04 Javascript
常用的JQuery函数及功能小结
Mar 24 Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
jquery与js实现全选功能的区别
Jun 11 jQuery
swiper自定义分页器使用方法详解
Sep 14 Javascript
对vue中v-on绑定自定事件的实例讲解
Sep 06 Javascript
JS中间件设计模式的深入探讨与实例分析
Apr 11 Javascript
ElementUI 修改默认样式的几种办法(小结)
Jul 29 Javascript
javaScript Array api梳理
Mar 31 #Javascript
抖音短视频(douyin)去水印工具的实现代码
Nest.js参数校验和自定义返回数据格式详解
Mar 29 #Javascript
Angular CLI发布路径的配置项浅析
Mar 29 #Javascript
vue中data改变后让视图同步更新的方法
vue3如何优雅的实现移动端登录注册模块
开发一个封装iframe的vue组件
You might like
分享下PHP register_globals 值为on与off的理解
2013/09/26 PHP
php简单截取字符串代码示例
2016/10/19 PHP
PHP7使用ODBC连接SQL Server2008 R2数据库示例【基于thinkPHP5.1框架】
2019/05/06 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
小型js框架veryide.librar源代码
2009/03/05 Javascript
自动完成JS类(纯JS, Ajax模式)
2009/03/12 Javascript
js实现的日期操作类DateTime函数代码
2010/03/16 Javascript
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
JavaScript实现多个重叠层点击切换效果的方法
2015/04/24 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
2015/05/13 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
2015/09/18 Javascript
JS中动态创建元素的三种方法总结(推荐)
2016/10/20 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
2020/06/29 Javascript
Vue2.0用户权限控制解决方案的示例
2018/02/10 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
angular2 ng2-file-upload上传示例代码
2018/08/23 Javascript
webpack file-loader和url-loader的区别
2019/01/15 Javascript
python编程-将Python程序转化为可执行程序[整理]
2007/04/09 Python
python使用WMI检测windows系统信息、硬盘信息、网卡信息的方法
2015/05/15 Python
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
Python实现可设置持续运行时间、线程数及时间间隔的多线程异步post请求功能
2018/01/11 Python
python实现定时发送qq消息
2019/01/18 Python
python3.6使用tkinter实现弹跳小球游戏
2019/05/09 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
对Django中的权限和分组管理实例讲解
2019/08/16 Python
python实现用类读取文件数据并计算矩形面积
2020/01/18 Python
生日邀请函范文
2014/01/13 职场文书
歌唱比赛获奖感言
2014/01/21 职场文书
合伙协议书
2014/04/23 职场文书
2014年教师节国旗下讲话稿
2014/09/10 职场文书
小学重阳节活动总结
2015/03/24 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript