JavaScript六种继承方式?

JavaScript019

JavaScript六种继承方式?,第1张

继承是面向对象编程中又一非常重要的概念,JavaScript支持实现继承,不支持接口继承,实现继承主要依靠原型链来实现的。

原型链

首先得要明白什么是原型链,昆明北大青鸟http://www.kmbdqn.cn/建议可以在一篇文章看懂proto和prototype的关系及区别中讲得非常详细

原型链继承基本思想就是让一个原型对象指向另一个类型的实例

添加方法

在给SubType原型添加方法的时候,如果,父类上也有同样的名字,SubType将会覆盖这个方法,达到重新的目的。但是这个方法依然存在于父类中。

记住不能以字面量的形式添加,因为,上面说过通过实例继承本质上就是重写,再使用字面量形式,又是一次重写了,但这次重写没有跟父类有任何关联,所以就会导致原型链截断。

问题

单纯的使用原型链继承,主要问题来自包含引用类型值的原型。

借用构造函数

此方法为了解决原型中包含引用类型值所带来的问题。

这种方法的思想就是在子类构造函数的内部调用父类构造函数,可以借助apply()和call()方法来改变对象的执行上下文

传递参数

借助构造函数还有一个优势就是可以传递参数

JS中,类的创建方式与函数的创建方式相同,主要区别在于一般我们创建类时,类名的首字母需要大写,同时,我们可以再类的原型上添加公共属性和方法。创建例子如下:

    JS类的继承主要有6种方式:原型链继承、实例继承、组合继承、原型式继承、寄生继承、寄生组合继承

    创建空的子函数,再子函数的原型上执行构造函数,让子函数的原型上拥有构造函数的全部属性和方法(包括构造函数的原型上的方法和属性),继承实现方法如下:

优点: 1.简单,子类实例既是子类的实例也是父类的实例

            2.父类在原型上新增的方法和属性都能被子类获取到

缺点: 1.传参不方便,只能再继承的时候传递参数,无法在创建子类实例的时候传入参数

            2.无法实现多继承(一个子类继承多个父类)

            3.原型上的属性、方法被所有的实例共享

    创建子类函数,在函数内部直接调用构造函数,如果构造函数有参数在这里传参,继承实现方法如下:

优点: 1.传参方便,可以在创建实例时传参

            2.可以实现多继承

缺点: 1.无法继承父类原型上的属性和方法 

            2.因为原型上没有方法,所以无法实现函数复用

        同时使用构造继承和原型链继承。继承实现方法如下:

优点: 1.综合了构造继承和原型链继承的优点,并且去除他们的缺点,总体而言是一个比较好的继承方案

缺点: 1.因为同时使用了原型链继承和构造继承,很明显可以看出父类实例的属性被调用了两次,浪费内存

        创建一个函数传入要继承的父对象,内部创建空的子类函数,然后在子类函数外部将父对象赋值给子类函数的原型,再返回子类函数的new执行结果。继承实现方法如下:

        函数内调用原型式继承,赋值给一个对象,然后可以自定义增加它的一些属性和方法。继承实现方法如下:

        通过寄生方式,去掉父类的实例属性,在调用两次父类的构造的时候,就不会初始化两次实例方法或属性,避免的组合继承的缺点,也就是重新创建一个空的函数,将父类的原型拷贝给这个空函数,然后对子类函数执行这个空函数。继承实现方法如下:

优点:全身都是优点

缺点:实现复杂

//创建没有属性的对象

var empty = {}

//两个属性的对象

var point = {

x: 0,

y: 0

}

也可以new。

var arr=new Array()

继承的不能是对象,得是类。

// 定义一个动物类

function Animal (name) {

// 属性

this.name = name || 'Animal'

// 实例方法

this.sleep = function(){

console.log(this.name + '正在睡觉!')

}

}

// 原型方法

Animal.prototype.eat = function(food) {

console.log(this.name + '正在吃:' + food)

}

1、原型链继承

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

function Cat(){

}

Cat.prototype = new Animal()

Cat.prototype.name = 'cat'

// Test Code

var cat = new Cat()

console.log(cat.name)

console.log(cat.eat('fish'))

console.log(cat.sleep())

console.log(cat instanceof Animal)//true

console.log(cat instanceof Cat)//true