近来因为讲课需要,涉及到使用javascript中的继承,但发现遇上不懂的同学,无法用一句话带过,因为周边涉及的知识点比较多,因此决定系统的来说一说,我先简单用一点图来描述什么是继承。(不懂的同学可以先忽略英文)
请先忽略prototype等看不懂的单词,可以看到祖宗改变就能影响后代,这样也就让我们能改一处,多出发生变化,减轻了工作量,提高了效率。
总的来说继承可以理解为设置属性或功能的多复用,那么大致有2条路子实现该功能。
1:祖宗构造函数的原型,其是创建对象时参照的模板,所有实例共享该原型对象的是属性及函数。
2:祖宗构造函数本身的复用,在子孙构造函数内部调用祖宗的构造函数,因此执行了祖宗的构造方法,从而子孙享有祖宗构造过程。
重点就是子类调用父类构造函数来创建对象
// 人类 function people () { this.description = '人类'; } // 学生 function student () { // 调用people函数,改变this指向 people.call(this); } var s = new student(); s.description; // 人类
重点是子类使用父类原型来共享
// 人类 function people () {} people.prototype.description = '人类'; var p = new people(); // 学生 function student () { } // 原型继承 student.prototype = people.prototype; var s = new student(); s.description; // 人类 p.description; // 人类
我们看到上面例子会带来一个很简单的问题,那就是 student.prototype和people.prototype是同一个原型,当我们去改动任何一个原型的时候,将会影响student和people的实例。试想people改动影响student也许我们觉得还ok,可是反之,就感觉不对了。
我们知道 new 父类()得到的结果是和父类原型息息相关的,因此为了避免student.prototype和people.prototype是同一个对象,而new people()创建的对象是根据people.prototype来的,所以我们用一个父类的实例来代替原型,从而避免上述问题
// 人类 function people () { } people.prototype.description = '人类'; // 学生 function student () { } // 原型继承 student.prototype = new people(); var s = new student(); s.description; // 人类
但同时,我们需要父类构造函数的执行获取其他属性,就需要使用到组合继承的方式了,也就是【原型继承】+【构造函数继承】
// 人类 function people (newprops) { this.newprops = newprops; } people.prototype.description = '人类'; // 学生 function student () { // 调用父类构造函数 people.call(this); } // 原型继承 student.prototype = new people(); var s = new student(); s.description; // 人类 s.newprops; // xxx
这里稍有不慎你可能会看到
都是因为没有传递参数的问题,那原型上这个undefine显得不好看,而我们传递该值又显得没有意义,从内存角度来说,我们只是需要原型而不是需要走构造函数呀。
// 人类 function people (newprops) { this.newprops = newprops; } people.prototype.description = '人类'; // 学生 function student () { // 调用父类构造函数 people.call(this); } // 原型继承 student.prototype = object.create(people.prototype); var s = new student(); s.description; // 人类 s.newprops; // xxx
js中的继承主要分为两条线即两种思路:
如对本文有疑问, 点击进行留言回复!!
荐 JavaScript基础02【强制类型转换(String Number Boolean) 其它进制数】
webpack成长指北第7章---webpack的csslessscss样式打包
网友评论