美文网首页前端技术
作为前端,你需要懂得javascript实现继承的方法

作为前端,你需要懂得javascript实现继承的方法

作者: 前端岚枫 | 来源:发表于2020-02-29 17:23 被阅读0次

    在ES6之前,javascript不跟其他语言一样,有直接继承的方法,它需要借助于构造函数+原型对象模拟实现继承。现在我们可以利用ES6的extends方法实现继承,如果想了解更多有关ES6实现的继承请查看《ES6学习笔记(二):教你玩转类的继承和类的对象》,在这里不再做更多的介绍。

    ES6之前并没有给我们提供extends继承,我们可以通过构造函数+原型对象模拟实现继承,被称为组合继承。

    1. call()

    调用这个函数,并且修改函数运行时的this指向

    fun.call(thisArg, arg1,arg2,...)
    
    • thisArg:当前调用函数this的指向对象
    • arg1, arg2:传递的普通参数
    function fn() {
    console.log('前端岚枫') 
      console.log(this)
    }
    fn.call() //说明call()可以调用函数,this指向window
    var obj = {
        name: 'lanfeng
    }
    fn.call(obj) //this指向obj, 说明call可以改变this指向
    
    

    2. 借用构造函数继承父类型属性

    核心思想:通过call()把父类型的this指向子类型的this,这样就可以实现子类型继承父类型的属性。

    // 借用父构造函数继承属性
    //父构造函数
    function Father (uname, age) {
      //this指向父构造函数的对象实例
        this.uname = uname
      this.age = age
    }
    // 子构造函数
    function Son (uname, age){
      // this指向子构造函数的对象实例
      //借助于call,this指向子构造函数对象实例
      Father.call(this, uname, age)
      
    }
    var son = new Son('王俊凯',18)
    console.log(son) //
    
    

    3. 借用原型对象继承父类型方法

    // 父构造函数
    function Father (uname, age) {
      //this指向父构造函数的对象实例
        this.uname = uname
      this.age = age
    }
    // 父原型方法
    Father.prototype.money = function() {
        console.log(10000)
    }
    // 子构造函数
    function Son (uname, age){
      // this指向子构造函数的对象实例
      //借助于call,this指向子构造函数对象实例
      Father.call(this, uname, age)
      
    }
    
    // Son.prototype = Father.prototype 这样直接赋值会有问题,如果修改了子原型对象,父原型对象也会变化/
    Son.prototype = new Father()
    
    //手动改constructor指回原来的构造函数
    Son.prototype.constructor = Son  
    Son.prototype.exam= function() {
     console.log('考试')
    }
    var son = new Son('王俊凯',18)
    console.log(son) //
    son
    
    
    结构关系如下图: 在这里插入图片描述

    相关文章

      网友评论

        本文标题:作为前端,你需要懂得javascript实现继承的方法

        本文链接:https://www.haomeiwen.com/subject/tbhmhhtx.html