首页 > 代码库 > 【Javascript设计模式】第一课 Javascript中的继承

【Javascript设计模式】第一课 Javascript中的继承

2024-08-15 10:35:32   219人阅读

在Javascript中每个类有三个部分：
    1、第一部分是构造函数内，这是供实例化对象复制用的。
    2、第二部分是构造函数外，通过点语法添加的，这是供类使用的，实例化对象是访问不到的。
    3、第三部分是类的原型中，实例化对象可以通过其原型链间接访问到，也是为供所有实例化对象所共用的。
一、 子类的原型对象 ——类式继承
    类式继承是最常见最简单的继承模式，类式继承用一句话概括就是“父类实例指向子类原型”
    
  1. /**
  2.  * 声明一个父类
  3.  * @constructor
  4.  */
  5. var SuperClass = function(){
  6.     this.superValue = ‘super‘;
  7. }
  8. //为父类添加共有方法
  9. SuperClass.prototype.getSuperValue = function(){
  10.     return this.superValue;
  11. }
  12. //声明一个子类
  13. var SubClass = function(){
  14.     this.subValue = ‘sub‘;
  15. }
  16. //将父类的实例赋值给子类的原型  子类继承父类
  17. SubClass.prototype = new SuperClass();
  18. //为子类添加共有方法
  19. SubClass.prototype.getSubValue = function(){
  20.     return this.subValue;
  21. }
       原理概括：类的原型对象的作用是为类的原型添加共有方法，但是类不能直接访问这些属性和方法，必须通过原型prototype来访问，而我们实例化父类时，新创建的对象赋值了构造函数内的属性和方法并且将原型_prototype指向了父类的原型对象，这样就拥有了父类对象原型上的属性和方法，并且这个新创建的对象可以直接访问到父类原型对象上的属性和方法。如果我们将这个新创建的对象赋值给子类的原型，那么子类的原型就可以访问到父类的属性和方法，同时也可以访问从父类构造函数中复制的属性和方法。
    测试
  1. var instance = new SubClass();
  2. console.info(instance.getSubValue()); //sub
  3. console.info(instance.getSuperValue());//super
注意：这里说的SubClass继承SuperClass说的是SubClass的原型继承了SuperClass，我们可以通过instanceof来验证一下
  1.  console.info(instance instanceof SubClass);//true
  2.  console.info(instance instanceof SuperClass);//true
  3.  console.info(SubClass instanceof SuperClass); //false
  4.  console.info(SubClass.prototype instanceof  SuperClass);//true;
不过，这里的类式继承有两个缺点：
    第一、由于子类通过prototype来对父类进行实例化，继承了父类，所以说父类中的共有属性要是引用类型，就会在子类中被所有的实例共用，因此一个子类的实例更改子类原型从父类构造函数中继承来的共有属性就会直接影响到其他的子类
    
  1. var Weaker = function(){
  2.     this.books = [‘javascript设计模式‘,‘Java设计模式‘,‘Spring源码深度解析‘];
  3. }
  5. Weaker.prototype.getSuperValue = function(){
  6.     console.info(this.books);
  7. }
  9. var WeakerSub = function () {
  11. }
  12. WeakerSub.prototype = new Weaker();
测试如下：
  1. var instance1 = new WeakerSub();
  2. var instance2 = new WeakerSub();
  3. console.info(instance1.books); //["javascript设计模式", "Java设计模式", "Spring源码深度解析"]
  4. instance1.books.push(‘深入浅出Node.js‘);
  5. console.info(instance2.books); // ["javascript设计模式", "Java设计模式", "Spring源码深度解析", "深入浅出Node.js"]    
第二、由于子类实现的继承是靠其原型prototype对父类的实例化实现的，因此在创建父类的时候，无法向父类传递参数的，因而在实例化父类的时候也无法对父类构造函数内的属性进行初始化。

二、创建即继承——构造函数继承
 构造函数继承中子类的prototype不再指向父类的实例，而是通过在子类中调用父类的call方法来实现继承
  1. /**
  2.  * 声明父类
  3.  * @param id
  4.  */
  5. var constructedSuperClass = function (id) {
    1. //引用类型共有属性
  6.     this.books = [‘javascript设计模式‘,‘Java设计模式‘,‘Spring源码深度解析‘];
  7.     //值类型共有属性
  8.     this.id = id;
  9. }
  10. //父类声明的共有方法
  11. constructedSuperClass.prototype.showBooks = function () {
  12.     conole.info(this.books);
  13. }
  15. //声明一个子类
  16. var constructedSubClass = function(){
  17.     constructedSuperClass.call(this,id);//call方法更改了函数作用的环境
  18. }
   测试：
  1.  var instance1 = new constructedSubClass(‘1‘);
  2.     var instance2 = new constructedSubClass(‘2‘);
  3.     console.info(instance1.books); //["javascript设计模式", "Java设计模式", "Spring源码深度解析"]
  4.     console.info(instance1.id); //1
  5.     instance1.books.push(‘深入浅出Node.js‘);
  6.     console.info(instance2.books); //["javascript设计模式", "Java设计模式", "Spring源码深度解析"]
  7.     console.info(instance2.id); //2
  8.     console.info(instance1.books); // ["javascript设计模式", "Java设计模式", "Spring源码深度解析", "深入浅出Node.js"]
 原理概括：constructedSuperClass.call(this,id)这句话是构造函数继承的精华，由于这个方法可以更改函数的作用的环境，因此在子类中，调用父类的call方法就是将子类中的变量在父类中执行一遍。由于这种继承没有涉及到prototype，所以父类的原型方法自然又不会被子类继承，如果想要被子类继承，就必须放在构造函数内，这样创建出来的实例都会单独拥有一份而不能被共用。

缺点：违背代码复用原则。

三、类式和构造函数的组合——组合继承
类式继承和构造函数继承都有各自的缺点和优点，那么将两者的优点组合在一起，就是所谓的组合继承，即：在子类的构造函数中执行父类的构造函数，在子类的原型上实例化父类
  2. var CombineSuperClass = function (name) {
  3.     this.name = name;
  4.     this.books = [‘javascript设计模式‘,‘Java设计模式‘,‘Spring源码深度解析‘];
  5. }
  6. CombineSuperClass.prototype.getName = function(){
  7.     console.info(this.name);
  8. }
  9. //声明子类
  10. var CombineSubClass = function (name,time) {
  11.     //构造函数式继承父类的name属性
  12.     CombineSuperClass.call(this,name);
  13.     //子类中共有属性
  14.     this.time = time;
  15. }
  16. //类式继承 子类原型指向父类实例
  17. CombineSubClass.prototype = new CombineSuperClass();
  18. //子类原型方法
  19. CombineSubClass.prototype.getTime = function () {
  20.     console.info(this.time);
  21. }
测试：
  1.   var instance1 = new CombineSubClass(‘instance1‘,new Date());
  2.     instance1.books.push(‘深入浅出node.js‘);
  3.     console.info(instance1.books); //[‘javascript设计模式‘,‘Java设计模式‘,‘Spring源码深度解析‘,‘深入浅出node.js‘];
  4.     instance1.getName();//instance1
  5.     instance1.getTime();// Date {Fri Sep 30 2016 22:15:15 GMT+0800}
  6.     var instance1 = new CombineSubClass(‘instance2‘,new Date());
  7.     instance1.books.push(‘Java Web 开发详解‘);//[‘javascript设计模式‘,‘Java设计模式‘,‘Spring源码深度解析‘,‘Java Web 开发详解‘];
  8.     console.info(instance1.books);
  9.     instance1.getName();//instance2
  10.     instance1.getTime();// Date {Fri Sep 30 2016 22:15:15 GMT+0800}
四、洁净的继承者——原型式继承
    原型式继承是根据道格拉斯.克罗克福德的《Javascript中原型式继承》得到的。
  1. var inheritObject = function(o){
  2.     //声明一个过渡函数对象
  3.     function F(){}
  4.     //过渡对象的原型继承父级对象
  5.     F.prototype = o;
  6.     //返回过渡对象的实例,过渡对象的原型继承父级对象
  7.     return new F();
  8. }
看结构这是类式继承的一个封装,其中的过渡对象相当于类式继承中的子类,只不过在原型式中作为一个过渡对象存在的,目的是为了创建要返回的新的实例化对象.
测试如下:
  1. var book = {
  2.         name: ‘js book‘,
  3.         alikebook: [‘css book‘, ‘html book‘]
  4.     };
  5.     var newbook = inheritObject(book);
  6.     newbook.name = ‘ajax book‘;
  7.     newbook.alikebook.push(‘jquery book‘);
  8.     var otherbook = inheritObject(book);
  9.     otherbook.name = ‘bootstrap book‘;
  10.     otherbook.alikebook.push(‘node book‘);
  11.     console.info(newbook.name);//ajax book
  12.     console.info(newbook.alikebook);//  ["css book", "html book", "jquery book", "node book"]
  13.     console.info(otherbook.name);//bootstrap book
  14.     console.info(otherbook.alikebook);// ["css book", "html book", "jquery book", "node book"]
测试结果跟类式继承一样,父类对象中的值类型的属性被复制,引用类型的属性被共享.

五 进一步封装——寄生组合式继承
寄生组合式继承是寄生式继承和构造函数继承的组合，这里处理的不是对象，而是类的原型
  1. var inheritPrototype = function(subClass,superClass){
  2.     //赋值一份父类的原型对象保存到变量中
  3.     var p = inheritObject(superClass.prototype);
  4.     //修正因为重写子类原型导致子类的constructor属性被修改
  5.     p.constructor = subClass;
  6.     //设置子类的原型
  7.     subClass.prototype = p;
  8. }
  1. var SuperClass = function(name){
  2.         this.name = name;
  3.         this.color = [‘red‘,‘green‘];
  4.     }
  5.     SuperClass.prototype.getName = function(){
  6.         console.info(this.name);
  7.     }
  9.     var SubClass = function(name,time){
  10.         SuperClass.call(this,name);
  11.         this.time = time;
  12.     }
  13.     inheritPrototype(SubClass,SuperClass);
  14.     SubClass.prototype.getTime = function () {
  15.        console.info(this.time);
  16.     }
  18.     var instance1 = new SubClass(‘color1‘,‘1‘);
  19.     var instance2 = new SubClass(‘color2‘,‘2‘);
  20.     instance1.color.push(‘grey‘);
  21.     console.info(instance1.color); // ["red", "green", "grey"]
  22.     console.info(instance2.color);//[‘red‘,‘green‘]
  23.     instance1.getName();//color1
  24.     instance2.getName();//color2
  25.     instance1.getTime();//1
寄生组合继承的图示如下：
技术分享
 


来自为知笔记(Wiz)


【Javascript设计模式】第一课 Javascript中的继承


联系
我们