快捷搜索:  汽车  科技

javascript实现面向对象:JavaScript面向对象编程-常用的两种继承方法

javascript实现面向对象:JavaScript面向对象编程-常用的两种继承方法先看一下父类今天我们来讲两种,一个是原型链实现继承、第二个借用构造函数在JavaScript中,继承的实现比较复杂,坑也很多,什么属性继承、原型继承、call/aplly继承、原型链继承、对象继承、构造函数继承、组合继承、类继承... 十几种,看着都头晕,对于小白来说,看多了都不知道用哪个好了。而且每一种都细讲需要花很多时间,所以今天这里大致梳理常用的两种给大家学习,一起来看看吧!JavaScript 中的继承并不是明确规定的,而是通过模仿实现的。

大家都知道的,JavaScript这门语言在ES6出来之前是没有类(class)这个概念的。

所以JavaScript中的类都是通过原型链来实现的。

既然能实现类,那同样也就可以在JavaScript中实现面向对象的继承了。(喜欢看书的朋友,可以去看一下《JavaScript高级程序设计》第三版6.3小节)。

我们使用继承主要是为了能实现代码的抽象和代码的复用,在应用层实现功能的封装。

在JavaScript中,继承的实现比较复杂,坑也很多,什么属性继承、原型继承、call/aplly继承、原型链继承、对象继承、构造函数继承、组合继承、类继承... 十几种,看着都头晕,对于小白来说,看多了都不知道用哪个好了。

而且每一种都细讲需要花很多时间,所以今天这里大致梳理常用的两种给大家学习,一起来看看吧!

JavaScript 中的继承并不是明确规定的,而是通过模仿实现的。

今天我们来讲两种,一个是原型链实现继承、第二个借用构造函数

先看一下父类

javascript实现面向对象:JavaScript面向对象编程-常用的两种继承方法(1)

父类

方式一:原型链继承

实现方式:子类的原型指向父类的实例

子类:

javascript实现面向对象:JavaScript面向对象编程-常用的两种继承方法(2)

代码测试

javascript实现面向对象:JavaScript面向对象编程-常用的两种继承方法(3)

测试

这种方式会存在的问题:

1. 引用类型的对象会被子类的所有实例共享(问题1解决)

2. 无法在创建子类的实例时,给父类的构造函数传递参数(问题2解决)

方式二:借用构造函数(又称为伪造对象、经典继承)

实现方式:在子类的构造函数中利用call(或者apply)方法执行父类构造函数(问题2解决),将执行对象设为子类的this 相当于把父类构造函数中的成员拷贝了一份到子类(问题1解决)

子类

javascript实现面向对象:JavaScript面向对象编程-常用的两种继承方法(4)

子类

测试代码如下:

javascript实现面向对象:JavaScript面向对象编程-常用的两种继承方法(5)

测试代码

存在的问题:

3. 父类原型中定义的属性无法被继承

以上两种方法都是有存在问题的,所以我们现在就出现了第三种方法来实现,你知道第三种方式是怎么实现的吗?欢迎在评论区留言哦!

我们下次继续聊继承的其他方法。

猜您喜欢: