登录
当前位置： 首页 > 编程笔记 >

JavaScript 继承详解（五）

洪琦
2023-03-14
本文向大家介绍JavaScript 继承详解（五），包括了JavaScript 继承详解（五）的使用技巧和注意事项，需要的朋友参考一下

在本章中，我们将分析John Resig关于JavaScript继承的一个实现 - Simple JavaScript Inheritance。 
John Resig作为jQuery的创始人而声名在外。是《Pro JavaScript Techniques》的作者，而且Resig将会在今年秋天推出一本书《JavaScript Secrets》，非常期待。

调用方式
调用方式非常优雅：
注意：代码中的Class、extend、_super都是自定义的对象，我们会在后面的代码分析中详解。

var Person = Class.extend({
  // init是构造函数
  init: function(name) {
this.name = name;
  },
  getName: function() {
return this.name;
  }
});
// Employee类从Person类继承
var Employee = Person.extend({
  // init是构造函数
  init: function(name, employeeID) {
// 在构造函数中调用父类的构造函数
this._super(name);
this.employeeID = employeeID;
  },
  getEmployeeID: function() {
return this.employeeID;
  },
  getName: function() {
// 调用父类的方法
return "Employee name: " + this._super();
  }
});

var zhang = new Employee("ZhangSan", "1234");
console.log(zhang.getName());  // "Employee name: ZhangSan"

说实话，对于完成本系列文章的目标-继承-而言，真找不到什么缺点。方法一如jQuery一样简洁明了。

代码分析
为了一个漂亮的调用方式，内部实现的确复杂了很多，不过这些也是值得的 - 一个人的思考带给了无数程序员快乐的微笑 - 嘿嘿，有点肉麻。
不过其中的一段代码的确迷惑我一段时间：

fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;

我曾在几天前的博客中写过一篇文章专门阐述这个问题，有兴趣可以向前翻一翻。

// 自执行的匿名函数创建一个上下文，避免引入全局变量
(function() {
  // initializing变量用来标示当前是否处于类的创建阶段，
  // - 在类的创建阶段是不能调用原型方法init的
  // - 我们曾在本系列的第三篇文章中详细阐述了这个问题
  // fnTest是一个正则表达式，可能的取值为（/\b_super\b/ 或 /.*/）
  // - 对 /xyz/.test(function() { xyz; }) 的测试是为了检测浏览器是否支持test参数为函数的情况
  // - 不过我对IE7.0,Chrome2.0,FF3.5进行了测试，此测试都返回true。
  // - 所以我想这样对fnTest赋值大部分情况下也是对的：fnTest = /\b_super\b/;
  var initializing = false, fnTest = /xyz/.test(function() { xyz; }) ? /\b_super\b/ : /.*/;
  // 基类构造函数
  // 这里的this是window，所以这整段代码就向外界开辟了一扇窗户 - window.Class
  this.Class = function() { };
  // 继承方法定义
  Class.extend = function(prop) {
// 这个地方很是迷惑人，还记得我在本系列的第二篇文章中提到的么
// - this具体指向什么不是定义时能决定的，而是要看此函数是怎么被调用的
// - 我们已经知道extend肯定是作为方法调用的，而不是作为构造函数
// - 所以这里this指向的不是Object，而是Function（即是Class），那么this.prototype就是父类的原型对象
// - 注意：_super指向父类的原型对象，我们会在后面的代码中多次碰见这个变量
var _super = this.prototype;
// 通过将子类的原型指向父类的一个实例对象来完成继承
// - 注意：this是基类构造函数（即是Class）
initializing = true;
var prototype = new this();
initializing = false;
// 我觉得这段代码是经过作者优化过的，所以读起来非常生硬，我会在后面详解
for (var name in prop) {
  prototype[name] = typeof prop[name] == "function" &&
typeof _super[name] == "function" && fnTest.test(prop[name]) ?
(function(name, fn) {
  return function() {
var tmp = this._super;
this._super = _super[name];
var ret = fn.apply(this, arguments);
this._super = tmp;
return ret;
  };
})(name, prop[name]) :
prop[name];
}
// 这个地方可以看出，Resig很会伪装哦
// - 使用一个同名的局部变量来覆盖全局变量，很是迷惑人
// - 如果你觉得拗口的话，完全可以使用另外一个名字，比如function F()来代替function Class()
// - 注意：这里的Class不是在最外层定义的那个基类构造函数
function Class() {
  // 在类的实例化时，调用原型方法init
  if (!initializing && this.init)
this.init.apply(this, arguments);
}
// 子类的prototype指向父类的实例（完成继承的关键）
Class.prototype = prototype;
// 修正constructor指向错误
Class.constructor = Class;
// 子类自动获取extend方法，arguments.callee指向当前正在执行的函数
Class.extend = arguments.callee;
return Class;
  };
})();

下面我会对其中的for-in循环进行解读，把自执行的匿名方法用一个局部函数来替换， 这样有利于我们看清真相：

(function() {
      var initializing = false, fnTest = /xyz/.test(function() { xyz; }) ? /\b_super\b/ : /.*/;
      this.Class = function() { };
      Class.extend = function(prop) {
        var _super = this.prototype;
        initializing = true;
        var prototype = new this();
        initializing = false;

        // 如果父类和子类有同名方法，并且子类中此方法（name）通过_super调用了父类方法
        // - 则重新定义此方法
        function fn(name, fn) {
          return function() {
            // 将实例方法_super保护起来。
            // 个人觉得这个地方没有必要，因为每次调用这样的函数时都会对this._super重新定义。
            var tmp = this._super;
            // 在执行子类的实例方法name时，添加另外一个实例方法_super，此方法指向父类的同名方法
            this._super = _super[name];
            // 执行子类的方法name，注意在方法体内this._super可以调用父类的同名方法
            var ret = fn.apply(this, arguments);
            this._super = tmp;
            
            // 返回执行结果
            return ret;
          };
        }
        // 拷贝prop中的所有属性到子类原型中
        for (var name in prop) {
          // 如果prop和父类中存在同名的函数，并且此函数中使用了_super方法，则对此方法进行特殊处理 - fn
          // 否则将此方法prop[name]直接赋值给子类的原型
          if (typeof prop[name] === "function" &&
              typeof _super[name] === "function" && fnTest.test(prop[name])) {
            prototype[name] = fn(name, prop[name]);
          } else {
            prototype[name] = prop[name];
          }
        }

        function Class() {
          if (!initializing && this.init) {
            this.init.apply(this, arguments);
          }
        }
        Class.prototype = prototype;
        Class.constructor = Class;
        Class.extend = arguments.callee;
        return Class;
      };
    })();

写到这里，大家是否觉得Resig的实现和我们在第三章一步一步实现的jClass很类似。 其实在写这一系列的文章之前，我已经对prototype、mootools、extjs、 jQuery-Simple-Inheritance、Crockford-Classical-Inheritance这些实现有一定的了解，并且大部分都在实际项目中使用过。 在第三章中实现jClass也参考了Resig的实现，在此向Resig表示感谢。
下来我们就把jClass改造成和这里的Class具有相同的行为。

我们的实现
将我们在第三章实现的jClass改造成目前John Resig所写的形式相当简单，只需要修改其中的两三行就行了：

 (function() {
      // 当前是否处于创建类的阶段
      var initializing = false;
      jClass = function() { };
      jClass.extend = function(prop) {
        // 如果调用当前函数的对象（这里是函数）不是Class，则是父类
        var baseClass = null;
        if (this !== jClass) {
          baseClass = this;
        }
        // 本次调用所创建的类（构造函数）
        function F() {
          // 如果当前处于实例化类的阶段，则调用init原型函数
          if (!initializing) {
            // 如果父类存在，则实例对象的baseprototype指向父类的原型
            // 这就提供了在实例对象中调用父类方法的途径
            if (baseClass) {
              this._superprototype = baseClass.prototype;
            }
            this.init.apply(this, arguments);
          }
        }
        // 如果此类需要从其它类扩展
        if (baseClass) {
          initializing = true;
          F.prototype = new baseClass();
          F.prototype.constructor = F;
          initializing = false;
        }
        // 新创建的类自动附加extend函数
        F.extend = arguments.callee;

        // 覆盖父类的同名函数
        for (var name in prop) {
          if (prop.hasOwnProperty(name)) {
            // 如果此类继承自父类baseClass并且父类原型中存在同名函数name
            if (baseClass &&
            typeof (prop[name]) === "function" &&
            typeof (F.prototype[name]) === "function" &&
            /\b_super\b/.test(prop[name])) {
              // 重定义函数name - 
              // 首先在函数上下文设置this._super指向父类原型中的同名函数
              // 然后调用函数prop[name]，返回函数结果
              // 注意：这里的自执行函数创建了一个上下文，这个上下文返回另一个函数，
              // 此函数中可以应用此上下文中的变量，这就是闭包（Closure）。
              // 这是JavaScript框架开发中常用的技巧。
              F.prototype[name] = (function(name, fn) {
                return function() {
                  this._super = baseClass.prototype[name];
                  return fn.apply(this, arguments);
                };
              })(name, prop[name]);
            } else {
              F.prototype[name] = prop[name];
            }
          }
        }
        return F;
      };
    })();
    // 经过改造的jClass
    var Person = jClass.extend({
      init: function(name) {
        this.name = name;
      },
      getName: function(prefix) {
        return prefix + this.name;
      }
    });
    var Employee = Person.extend({
      init: function(name, employeeID) {
        // 调用父类的方法
        this._super(name);
        this.employeeID = employeeID;
      },
      getEmployeeIDName: function() {
        // 注意：我们还可以通过这种方式调用父类中的其他函数
        var name = this._superprototype.getName.call(this, "Employee name: ");
        return name + ", Employee ID: " + this.employeeID;
      },
      getName: function() {
        // 调用父类的方法
        return this._super("Employee name: ");
      }
    });

    var zhang = new Employee("ZhangSan", "1234");
    console.log(zhang.getName());  // "Employee name: ZhangSan"
    console.log(zhang.getEmployeeIDName()); // "Employee name: ZhangSan, Employee ID: 1234"

这篇文章就接受到这了，下面还有一个系列的文章，大家都可以看下

 类似资料：
  • JavaScript 继承详解（六）

    本文向大家介绍JavaScript 继承详解（六），包括了JavaScript 继承详解（六）的使用技巧和注意事项，需要的朋友参考一下 在本章中，我们将分析Prototypejs中关于JavaScript继承的实现。 Prototypejs是最早的JavaScript类库，可以说是JavaScript类库的鼻祖。 我在几年前接触的第一个JavaScript类库就是这位，因此Prototypejs有

  • 继承详解

    C语言面向对象编程（二）：继承详解 在 C语言面向对象编程（一） 里说到继承，这里再详细说一下。 C++ 中的继承，从派生类与基类的关系来看（出于对比 C 与 C++，只说公有继承）： 派生类内部可以直接使用基类的 public 、protected 成员（包括变量和函数） 使用派生类的对象，可以像访问派生类自己的成员一样访问基类的成员 对于被派生类覆盖的基类的非虚函数，在派生类中可以通过基类名和

  • JavaScript的原型继承详解

    本文向大家介绍JavaScript的原型继承详解，包括了JavaScript的原型继承详解的使用技巧和注意事项，需要的朋友参考一下 JavaScript是一门面向对象的语言。在JavaScript中有一句很经典的话，万物皆对象。既然是面向对象的，那就有面向对象的三大特征：封装、继承、多态。这里讲的是JavaScript的继承，其他两个容后再讲。 JavaScript的继承和C++的继承不大一样，C

  • javascript 中的继承实例详解

    本文向大家介绍javascript 中的继承实例详解，包括了javascript 中的继承实例详解的使用技巧和注意事项，需要的朋友参考一下 javascript 中的继承实例详解 阅读目录 原型链继承 借用构造函数 组合继承 寄生组合式继承 后记 继承有两种方式：接口继承和实现继承。接口继承只继承方法签名，而实现继承则继承实际的方法。 由于函数没有签名，在ECMAScript中无法实现接口继承。E

  • javascript继承机制实例详解

    本文向大家介绍javascript继承机制实例详解，包括了javascript继承机制实例详解的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了javascript继承机制。分享给大家供大家参考。具体分析如下： 初学javascript一般很难理解Javascript语言的继承机制它没有"子类"和"父类"的概念，也没有"类"（class）和"实例"（instance）的区分，全靠一种很奇特的

  • JavaScript中的继承方式详解

    本文向大家介绍JavaScript中的继承方式详解，包括了JavaScript中的继承方式详解的使用技巧和注意事项，需要的朋友参考一下 js继承的概念 js里常用的如下两种继承方式： 原型链继承（对象间的继承） 类式继承（构造函数间的继承） 由于js不像java那样是真正面向对象的语言，js是基于对象的，它没有类的概念。所以，要想实现继承，可以用js的原型prototype机制或者用apply和c

相关阅读

JavaScript中的继承方式详解JavaScript中的原型和继承详解(图文)理解javascript对象继承jQuery继承extend用法详解JavaScript原型继承和原型链原理详解

相关文章

Maven继承JavaScript精华知识之继承部分Objective-C继承Spring Bean继承JPA继承简介

相关问答

javascript - js中的class继承怎么使用？Springfox swagger继承支持解决方法Java多重继承JPA枚举继承Hibernate单表继承

相关工具

Background JavaScriptJavaScript jSQLcocos2d javascriptJavaScript CollieJavascript Patterns

相关文档

Laravel 源码详解HAProxy 用法详解Android Animation 动画详解深入理解 JavaScript 系列Python 初级教程：入门详解
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.