Javascript 进阶 继承

转载请标明出处： http://blog.csdn.net/lmj623565791/article/details/29194261

1、基于类的继承

下面看下面的代码：

输出结果：

0001 
张三 , 11 

可以看到Student成功集成了Person，并且拥有了Person的say方法，核心代码其实就是一句 Student.prototype = new Person();，下面通过图解来说明原理：

将Student.prototype指向new Person() , new Person的_proto_又指向Person Prototype；这样完成了整个继承。

但是这种方式存在问题：

问题1：当父类存在引用类型变量时，造成数据不一致，下面我们给Person添加一个hobbies属性，类型为数组。

输出结果：

张三 , 11 , soccer 
李四 , 12 , soccer,girl 

可以看出，李四的hobbies应该只有girl，但是上面的代码让所有对象共享了hobbies属性。

上述的继承方式还存在一个问题：

问题2：在Student的构造方法中，无法使用new Student("00001" , "张三" , 12) ；创建对象，并初始化name和age属性，必须stu.name, stu.age进行赋值

为了解决上述问题，对上述代码进行修改：

输出：

0001 , 张三 , soccer 
0002 , 李四 , cangjin,basketball 

在Student的构造方法中使用了Person.call(this,name,age)感觉就像super(name,age)【call的第一个参数为上下文】；并且成功解决了对引用属性的共享问题，完美解决。

2、基于原型链的继承

输出：

zhangsan , 12 , Java 
lisi , 13 , Java,Javascript 

可以看出同样存在引用属性不一致的问题，并且整个操作全部基于对象，给人的感觉不是很好，下面通过图解解释下原理：

对象间通过一个clone函数，不断的返回一个新的对象，且prototype执行传入的对象，整个继承过程其实就是_proto_不断的指向，形成一个链，所以叫做原型链。

好了，已经介绍完了，js的两种集成的方式，最好使用的还是通过类的继承（上述第一种方案，解决存在问题的）。

如果代码或者讲解存在任何问题，欢迎留言指出。

版权声明：本文为博主原创文章，未经博主允许不得转载。

转载于:https://www.cnblogs.com/dingxiaoyue/p/4924942.html