js继承

js继承的实现方式

先理解一下prototype和__proto__;

        我们创建的每一个函数都有一个prototype属性(原型),这个属性是一个对象,它的用途是包含可以由特定类型的所有实例共享的属性和方法。(这个对象下面有个属性,设个属性是另一个对象的应用,这个属性就是一个对象。)

        function是对象,function的原型prototype也是对象,它们都会具有对象共有的特点。即:对象具有属性__proto__,每个对象都会在其内部初始化一个属性,就是__proto__,当我们访问一个对象的属性时,如果这个对象的内部不存在这个属性,那么它就会去__proto__里找这个属性,这个__proto__又会有自己的__proto__,于是就这样一直找下去,也就是我们平时所说的原型链概念。__proto__可称之为隐式原型,一个对象的隐式原型指向构造该对象的构造函数的原型,这也保证了实例能够访问在构造函数原型中定义的属性和方法。

        function这个特殊的对象,除了和其它对象一样有上述__proto__属性之外,还有自己特有的属性————原型属性(prototype),这个属性是一个指针,指向一个对象,这个对象的用途就是包含所有实例共享的属性和方法(我们把这个属性叫做原型对象)。prototype是通过调用构造函数而创建的那个实例的原型对象。使用原型对象的好处是可以让所有对象实例共享他所包含的属性和方法,不必在构造函数中定义对象实例的信息,而是可以将这些信息直接添加到原型对象中。原型对象也有一个属性,叫做constructor,这个属性包含了一个指针,指回原构造函数。

        prototype和__proto__联系

  prototype和__proto__都指向原型对象,任意一个函数(包括构造函数)都有一个prototype属性,指向该函数的原型对象,同样任意一个构造函数实例化的对象,都有一个__proto__属性(__proto__并非标准属性,ECMA-262第5版将该属性或指针称为[[Prototype]],可通过Object.getPrototypeOf()标准方法访问该属性)指向构造函数的原型对象。

实例的__proto__与构造函数的prototype相同。

Function的__proto__指向函数本身。

Function的prototype指向函数本身。

Object的__proto__指向原型对象。

prototype和__proto__区别

js继承_第1张图片

先定义一个父类。

js继承_第2张图片

1.原型链继承。

核心:将父类的实例作为子类的原型。

js继承_第3张图片

特点:

        1.非常纯粹的继承关系,实例是子类的实例,也是父类的实例

        2.父类新增原型方法/原型属性,子类都能访问到。

        3.简单,易于实现。

缺点:

        1.想要为子类新增属性和方法,必须要在new Animal()这样的语句之后执行,不能放到构造器中。

        2.无法实现多继承。

        3.来自原型对象的所有属性被所有实例共享。

        4.创建子类实例时,无法向父类构造函数传参。

2.构造继承

核心:使用父类的构造函数来增强子类实例,等于是复制父类的实例属性给子类。

js继承_第4张图片

特点:

        1.解决了1中,子类实例共享父类引用属性的问题。

        2.创建子类实例时,可以向父类传递参数。

        3.可以实现多继承(call多个父类对象)。

缺点:

        1.实例并不是父类的实例,只是子类的实例。

        2.只能继承父类的实例属性和方法,不能继承原型属性和方法。

        3.无法实现函数复用,每个子类都有父类实例函数的副本,影响性能。

3.实例继承

js继承_第5张图片

特点:

           1.不限制调用方式,不管是new 子类()还是子类(),返回的对象具有相同的效果

缺点:

           1.实例是父类的实例,不是子类的实例

           2.不支持多继承

4.拷贝继承

js继承_第6张图片

特点:

        1.支持多继承

缺点:

        1.效率较低,内存占用高(因为要拷贝父类的属性)

        2.无法获取父类不可枚举的方法(不可枚举方法,不能使用for in 访问到)

5.组合继承

js继承_第7张图片

特点:

        1.弥补了方式2的缺陷,可以继承实例属性/方法,也可以继承原型属性/方法

        2.既是子类的实例,也是父类的实例

        3.不存在引用属性共享问题

        4.可传参

        5.函数可复用

缺点:

        1.调用了两次父类构造函数,生成了两份实例(子类实例将子类原型上的那份屏蔽了)


6、寄生组合继承

js继承_第8张图片

总结:

js继承_第9张图片

你可能感兴趣的:(js继承)