javascript 之继承-15

时间：2023-12-06 16:23:14

继承

　　所谓继承就是子类继承父类的特征与行为，使得子类对象具与父类相同的行为。但是javascript 是没有class、抽象类、接口等抽象概念，javascript 只有对象，那么js中是如何让对象与对象之间产生继承关系呢？

基于对象的继承

　　在原型链中说过，如果在对象上没有找到需要的属性或者方法引用，js引擎就会继续在内部属性[[prototype]] 指向的对象上进行查找。同理如果还是没有找到需要的引用，就会继续查找它的内部属性[[prototype]]指向的对象，以此类推，层层向上直到找到对象的原型为null为止，这一系列的链接称为原型链。所以在原型链中我才会js中的继承是基于原型实现；

_proto_ 设计机制

　　任何对象都有一个特殊的内部属性[[prototype]]，[[prototype]]机制就是建立起对象之间的内部链接。如果有过后台开发经验的肯定会纳闷，为什么js要这样设计？引入原型对象的意义又是什么？为什么不跟java、.net 一样设计calss等等凝惑， 这里推荐 阮一峰的《Javascript继承机制的设计思想》；

组合继承

　　组合继承是比较常用的一种继承方法，思路是使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。这样，既通过在原型上定义方法实现了函数复用，又保证每个实例都有它自己的属性。

  //人

     function Person(name, age) {

         this.name = name;

         this.age = age;

     }

     Person.prototype.SayName = function () {

         return this.name;

     };

     //父亲

     function Parent(work, country, name, age) {

         this.work = work;

         this.country = country;

         this.parentInfo = function () {

             return 'hello 大家好，我叫：' + this.name +' 我是一名：' + this.work + '，我来自:' + this.country;

         }

         Person.call(this, name, age);//父类型传参

     }

     Parent.prototype = new Person();//重写Parent的原型对象，让parent的prototype 指向 Person 的实例

     var myParent = new Parent('manager', 'China', 'Joel', 22);

     console.log(myParent.SayName());//Joel

     console.log(myParent.parentInfo());//hello 大家好，我叫：Joel 我是一名：manager，我来自:China

     //儿子

     function Child(work, country, name, age, sex) {

         this.sex = sex;

         this.childInfo = function () {

             return 'hello 大家好，我叫：' + this.name + ' 我是一名：' + this.work + '，我来自美丽的:' + this.country 
                      + '，我是一个活泼可爱的 ' + this.sex;

         }

         Parent.call(this, work, country, name, age);//父类型传参

     }

     Child.prototype = new Parent();//重写Child的原型对象，让Child的prototype 指向 Parent 的实例

     var myBaby = new Child('child', '广州', '超级飞侠-多多', 3, 'girl');

     console.log(myBaby.parentInfo());//hello 我是一名：child，我来自:广州

     console.log(myBaby.childInfo());//hello 大家好，我叫：超级飞侠-多多 我是一名：child，我来自美丽的:广州，我是一个活泼可爱的 girl

这里基类是人，子类是父亲、儿子，这里通过重写原型对象以及在构造函数中调用父类的构造函数，并且用call改变了this 指针，从而达到儿子继承了父亲，父亲继承了人；

new 操作符

重要的事情在这里说一次，之前在原型链中已经提过一次；

MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/new 的解释

当使用new去调用构造函数时，相当于执行了

  var o = {};

  o.__proto__ = F.prototype;//实例跟原型对象之间建立了链接，实例跟构造函数之间没有关系；

  F.call(o);

总结

  • 对象之间的链接通过[[prototype]]进行关联
  • new 操作符关键点
  • prototype 是函数对象的属性，_proto_ 是实例的内部属性[[prototype]]
  • 原型链是沿着_proto_链接进行查找

相关文章