美文网首页
关于JavaScript继承和原型链

关于JavaScript继承和原型链

作者: FogDong | 来源:发表于2018-08-05 21:35 被阅读0次

    Before we get started

    首先明确,JS的继承是由原型链来实现的。(即使在ES6中class的extends,也更像是一种语法糖)

    当谈到继承时,JavaScript 只有一种结构:对象。每个实例对象(object )都有一个私有属性(称之为 _proto_)指向它的原型对象(prototype)。该原型对象也有一个自己的原型对象 ,层层向上直到一个对象的原型对象为 null。根据定义,null 没有原型,并作为这个原型链中的最后一个环节。

    C++和Java使用new命令时,都会调用"类"的构造函数(constructor)
    在Javascript语言中,new命令后面跟的不是类,而是构造函数
    在 JavaScript 中,构造器其实就是一个普通的函数。当使用 new 操作符 来作用这个函数时,它就可以被称为构造方法(构造函数)。

    那么new运算符具体干了什么呢?

    var obj  = {};
    obj.__proto__ = F.prototype;
    F.call(obj);
    

    var o = new Foo();
    
    // JavaScript 实际上执行的是:
    var o = new Object();
    o.__proto__ = Foo.prototype;
    Foo.call(o);
    

    关于_proto_和prototype

    那么上面的_proto_和prototype又是什么呢?

    对象具有属性_proto_,可称为隐式原型,一个对象的隐式原型指向构造该对象的构造函数的原型。
    eg.

    let o1 = new Object()
    // 则
    o1.__proto__ ===  Object.prototype // true
    

    而Function是特殊的对象,在Function中,除了和其他对象一样有_proto_对象以外,还有原型属性(prototype),这个属性指向原型对象,而原型对象有个叫constructor的属性,指回原构造函数。
    eg.

    let f1 = new Foo()
    // 则
    f1.__proto__ === Foo.prototype
    Foo.__proto__ === Function.prototype
    Function.prototype.__proto__ === Object.prototype
    Object.prototype.__proto__ === null
    
    Foo.prototype.constructor === Foo
    

    Object的原型对象用Object.prototype._proto_ = null表示原型链的最顶端,如此变形成了javascript的原型链继承,同时也解释了为什么所有的javascript对象都具有Object的基本方法。

    Object关于prototype的两个方法

    // 等同于 B.__proto__= A
    Object.setPrototypeOf(B, A)
    // 从子类上获取父类
    Object.getPrototypeOf(B)
    

    JavaScript实现继承的几种方式

    构造继承

    function dog (name) {
        this.name = name
    }
    // 共享的属性放在prototype中,只要更改prototype,所有实例的master属性都会被更改
    dog.prototype = { master: 'Fog' }
    
    // 生成两个实例对象
    let dog1 = new dog('111')
    let dog2 = new dog('222')
    
    console.log(dog1.master) // Fog
    console.log(dog2.master) // Fog
    
    // 更改master
    dog.prototype.master = 'Misty'
    
    console.log(dog1.master) // Misty
    console.log(dog2.master) // Misty
    

    由于所有的实例对象共享同一个prototype对象,那么从外界看起来,prototype对象就好像是实例对象的原型,而实例对象则好像"继承"了prototype对象一样。

    原型继承

    即:把父类的私有+公有的属性和方法,都作为子类公有的属性。
    核心思想:<code>Child.prototype = new Parent()</code>
    实现的本质是重写了原型对象 ,通过将子类的原型指向了父类的实例,所以子类的实例就可以通过_proto_访问到 Child.prototype 也就是 Parent的实例

    实例继承

    核心思想:

    function Child() {
        let instance = new Parent()
        return instance
    }
    

    拷贝继承

    核心思想:循环遍历父类实例,然后父类实例的私有方法全部拿过来添加给子类实例

    Call继承

    核心思想:

    function Child() {
        Parent.call(this); //构造函数中的this就是当前实例
    }
    

    注意:call是function的方法

    中间件继承

    核心思想:<code>Child.prototype._proto_ = Parent.prototype</code>

    Object.create()

    ECMAScript 5 中引入了一个新方法:Object.create()。可以调用这个方法来创建一个新对象。新对象的原型就是调用 create 方法时传入的第一个参数。

    ES6的extends

    首先说明,ES6的Class中,所有定义的function方法(注意:在定义类的方法时,前面不需要加上 function 这个保留字),都是定义在prototype属性上的。
    即:在类的实例上调用方法,其实就是调用原型上的方法。
    此外,在类的内部定义的所有方法都是不可枚举的。(与ES5不同,注意)

    Class之间可以通过extends关键字实现继承。
    子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承了父类的this对象。如果不调用super方法,子类就得不到this对象。
    这与ES5不同:ES5是先创建子类的this,再将父类的方法添加到this上(Parent.apply(this))
    而ES6:先创建父类的this,然后再用子类的构造函数修改this

    而super指向父类的原型对象,所以定义在父类实例上的方法或属性,是无法通过super调用的

    相关文章

      网友评论

          本文标题:关于JavaScript继承和原型链

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