当前位置:   article > 正文

【JS】漫谈原型-3.继承

【JS】漫谈原型-3.继承

这里说的继承是采用 call方法+原型改变指向来实现的。

继承在面向对象编程思想里面是非常重要的一块,能够减少代码的编写,方便后期维护,对于前端来说也是减少内存开辟的一个好的方式。不在这里过多的讨论面向对象的思想。先看看怎么实现。

代码:

  1. function Person(name, age) {
  2. this.name = name;
  3. this.age = age;
  4. this.run=function () {
  5. console.log('run');
  6. }
  7. }
  8. Person.prototype.eat = function () {
  9. console.log(this.name+' eat')
  10. }
  11. function Student(name, age, school) {
  12. Person.call(this,name, age)
  13. this.school = school;
  14. }
  15. Student.prototype=new Person();
  16. var s1 = new Student('cong', 26, "qust")
  17. console.log(s1.name)
  18. console.log(s1.age)
  19. console.log(s1.school)
  20. s1.eat();

运行结果:

现在详细讲讲为啥这么写;

其实 调用call行数和 原型重新指向都能实现继承,不过他们两个方法都有缺点。

比如单独使用call方法:

  1. function Person(name, age) {
  2. this.name = name;
  3. this.age = age;
  4. this.run=function () {
  5. console.log(this.name+' run');
  6. }
  7. }
  8. Person.prototype.eat = function () {
  9. console.log(this.name+' eat')
  10. }
  11. function Student(name, age, school) {
  12. Person.call(this,name, age)
  13. this.school = school;
  14. }
  15. //Student.prototype=new Person();
  16. var s1 = new Student('cong', 26, "qust")
  17. console.log(s1.name)
  18. console.log(s1.age)
  19. console.log(s1.school)
  20. s1.run();
  21. s1.eat();

运行结果

会发现在实例中没有eat方法,我们输出一下s1对象看看结构

发现call方法只是将Person方法中的this变成了s1,之后将这些属性进行赋值了。而Person原型中的方法并没有在s1中体现。

那么单独使用原型重新指向那:

  1. function Person(name, age) {
  2. this.name = name;
  3. this.age = age;
  4. this.run=function () {
  5. console.log(this.name+' run');
  6. }
  7. }
  8. Person.prototype.eat = function () {
  9. console.log(this.name+' eat')
  10. }
  11. function Student(name, age, school) {
  12. // Person.call(this,name, age)
  13. this.school = school;
  14. }
  15. Student.prototype=new Person();
  16. var s1 = new Student('cong', 26, "qust")
  17. console.log(s1.name)
  18. console.log(s1.age)
  19. console.log(s1.school)
  20. s1.run();
  21. s1.eat();

运行结果:

s1对象结果为

结果倒是有但是没有赋值。

如果这样赋值:Student.prototype=new Person(‘cong’,26);又不符合面向对象思想。

当然也可以之后一个一个属性进行赋值。

所以综上所述才用的组合的方式继承

-----------------------------分割线-----------------------

2021-11-08更新

也可以使用Object.call+Object.assign的方式来实现继承;

这样写的相比较原来的写法有个好处可以保留子类中prototype属性,并且可以实现多继承。

  1. let Class1=function(){
  2. this.fun1=function(){}
  3. }
  4. Class1.prototype.fun2=function(){}
  5. let Class2=function(){
  6. this.fun3=function(){}
  7. Class1.call(this);
  8. }
  9. Class2.prototype.fun4=function(){}
  10. Object.assign(Class2.prototype,Class1.prototype);

控制台输出

 

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/433478
推荐阅读
相关标签
  

闽ICP备14008679号