`
lcyangily
  • 浏览: 22259 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

简单实现JavaScript继承

 
阅读更多

    看John Resig 的JavaScript实现继承的文章,对大神的实现代码拿来跟大家一起读下源码,因为英语太菜就不翻译了,直接根据源码来分析了。原文地址:http://ejohn.org/blog/simple-javascript-inheritance/

 

首先来看本继承所要达到的效果,知道效果来看源码更能容易理解。(先要知其然,然后知其所以然)。

 

var Person = Class.extend({
  init: function(isDancing){
    this.dancing = isDancing;
  },
  dance: function(){
    return this.dancing;
  }
});
var Ninja = Person.extend({
  init: function(){
    this._super( false );
  },
  dance: function(){
    // Call the inherited version of dance()
    return this._super();
  },
  swingSword: function(){
    return true;
  }
});

var p = new Person(true);
p.dance(); // => true

var n = new Ninja();
n.dance(); // => false
n.swingSword(); // => true

 

 继承需要做到以下几点:

1.定义一个简单的结构,有一个初始化方法(生成对象时调用的函数,类似Java的构造方法)

2.子类的生成,必须要继承一个父类。

3.所有类的原型都是派生自Class.(就像Java类最终都派生自Object一样)

4.在子类中提供一种方法能访问到父类中被覆盖的方法。通过this._super().(如:在类Ninja的init方法中调用this._super()就是调用父类Person的init方法)

 

下面来看看代码是怎么实现继承的:

/* Simple JavaScript Inheritance
 * By John Resig http://ejohn.org/
 * MIT Licensed.
 */
// Inspired by base2 and Prototype
(function(){
  var initializing = false, 
      fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;
      //fnTest是一正则表达式,匹配函数里是否有调_super方法。
  // The base Class implementation (does nothing)
  this.Class = function(){}; // 定义一个全局变量Class类/函数。
  
  // Create a new Class that inherits from this class
  Class.extend = function(prop) {
    /** 保存当前对象的原型(也就父类的原型),
     *  Class.extend()调用时this是Class,Person.extend调用时this是Person
     *  js里一切都是对象,Class函数也是对象,所以this这里是一个函数。
     */
    var _super = this.prototype;    
    
    // Instantiate a base class (but only create the instance,
    // don't run the init constructor)
    initializing = true;
    /**父类的实例作为子类的原型(典型的原型继承)
     * 但是这里实例化跟普通的生成对象不一样,这里不调用父类的init方法。
     * 类就是一模板,所以子类在以父类对象为原型的时候,不应调用初始化方法,仅仅是生成一个模板
     * 这边就是用initializing变量来标识实例父类是否是赋值给子类的原型。
     * 用闭包来隐藏了initializing 作为全局变量的污染
     */
    var prototype = new this();
    initializing = false;
    
    // Copy the properties over onto the new prototype
    for (var name in prop) {
      // Check if we're overwriting an existing function
      /** 当子类新方法父类中有同名函数,而且子类中调用了父类方法(函数中有_super的调用)
       *  这里使用了代理模式,在调用函数前先将this._super用tmp保存起来(也可能没有_super方法)
       *  在将this._super 赋值为父类中同名函数。调用结束再将原来的this._super还原
       */
      prototype[name] = typeof prop[name] == "function" && 
        typeof _super[name] == "function" && fnTest.test(prop[name]) ?
        (function(name, fn){
          return function() {
            var tmp = this._super;
            
            // Add a new ._super() method that is the same method
            // but on the super-class
            this._super = _super[name];
            
            // The method only need to be bound temporarily, so we
            // remove it when we're done executing
            var ret = fn.apply(this, arguments);        
            this._super = tmp;
            
            return ret;
          };
        })(name, prop[name]) :
        prop[name];
    }
    
    // The dummy class constructor
    function Class() {
      // All construction is actually done in the init method
      /**如果定义了初始化方法init,则调用init初始化
       * 注意:这里的this不是Class或者Person等类/函数对象
       * 而是实例化后的对象var p = new Person() 这里的this 是p
       */
      if ( !initializing && this.init )
        this.init.apply(this, arguments);
    }
    
    // Populate our constructed prototype object
    Class.prototype = prototype; //子类原型复制
    
    // Enforce the constructor to be what we expect
    Class.prototype.constructor = Class; //子类构造函数定义

    // And make this class extendable
    //定义类的继承方法,保证每个新类也都有extend.
    //这里也可写成 Class.extend = this.extend;
    Class.extend = arguments.callee;
    
    return Class;
  };
})();

 看这些代码最重要的一点是时刻要清楚this是哪个对象。

 

好了,上面就是文章的全部了,希望对大家有帮助,有疑问请留言,有什么解释不对和不清楚的地方也望大家指正。

 

分享到:
评论

相关推荐

    详解Javascript继承的实现

    本文将深入探讨JavaScript继承的实现方式,以及其中的问题和解决方案。 首先,我们来看混合方式的实现,这种方式结合了原型链和对象冒充。在JavaScript中,构造函数是用于创建特定类型对象的函数。例如,`Employee`...

    JavaScript继承机制研究.pdf

    在本文中,我们将深入探讨JavaScript继承机制的实现方式,并对基于原型的继承、构造函数方式继承、组合继承、寄生式继承等继承机制进行了总结归纳和分析。 基于原型的继承 JavaScript是一门基于原型的语言,它不像...

    学习javascript面向对象 javascript实现继承的方式

    本文将详细介绍六种实现JavaScript继承的方法。 1. 原型链继承 原型链继承是通过改变子类型的原型对象来实现继承的。子类型构造函数的原型被替换为超类型构造函数的一个实例,这样子类型就可以继承超类型的所有属性...

    JavaScript 继承详解(六)

    在本章中,我们将分析Prototypejs中关于JavaScript继承的实现。 Prototypejs是最早的JavaScript类库,可以说是JavaScript类库的鼻祖。 我在几年前接触的第一个JavaScript类库就是这位,因此Prototypejs有着广泛的...

    JavaScript继承的特性与实践应用深入详解

    这里我们将深入探讨JavaScript继承的特性以及实践应用。 首先,JavaScript的继承基于原型链。每个对象都有一个`__proto__`属性,指向创建它的构造函数的原型对象。当试图访问对象的一个属性时,JavaScript会沿着...

    javascript用函数实现继承详解javascript技巧docx.docx

    本文将详细介绍如何利用函数实现JavaScript的继承,并结合属性特性和描述符来深入理解这一过程。 首先,我们要了解JavaScript中的属性类型。属性分为两种主要类型:数据属性和存取器属性。数据属性包含`value`...

    13、JavaScript继承实现(二) —— zInherit、xbObjects

    zInherit是一种常用的JavaScript继承实现方式,它通过修改对象的`__proto__`属性来实现继承。`__proto__`指向父对象的原型,从而使得子对象能够访问父对象的属性和方法。但是,`__proto__`并不是所有浏览器都支持的...

    浅谈Javascript实现继承的方法

    在Javascript中实现继承是面向对象编程的一个核心概念,它允许一个对象能够继承另一个对象的属性和方法。Javascript是一种基于原型的语言,这与基于类的语言如Java和C++有所不同,因此它的继承机制也显得特别独特。...

    JavaScript中继承原理与用法实例入门

    在JavaScript中,由于其动态类型和基于原型的特性,实现继承的方式比传统的面向对象语言更为灵活,但也相对复杂。本文将深入探讨JavaScript中的继承原理与用法,并通过实例进行讲解。 首先,JavaScript的对象由两...

    javascript继承基础

    ### JavaScript继承基础 在面向对象(OO)编程领域中,封装、继承与多态被认为是三大核心特性。尽管JavaScript并非一种纯粹的面向对象语言,但其确实支持这些特性,并且能够实现对象之间的继承关系。本文将重点介绍...

    JavaScript中的继承之类继承_.docx

    本文将详细介绍JavaScript中的类继承概念,包括基本原理、实现方式以及一些高级用法。 #### 二、继承概述 在JavaScript中,继承主要通过原型链来实现。每个对象都有一个`prototype`属性,指向它的原型对象。当尝试...

    js继承实现示例代码

    ### JavaScript继承实现示例 #### 知识点概述 在JavaScript中,继承是一种常见的对象间关系,它允许一个对象(子类)继承另一个对象(父类或超类)的属性和方法。通过继承,可以复用代码、提高程序的可维护性,并...

    实现JavaScript中继承的三种方式

    在JavaScript中,实现继承是一个非常重要的概念,因为它可以让我们重用代码并构建复杂的应用程序。继承的方式有多种,而本文将详细探讨JavaScript实现继承的三种常用方式。 首先,我们来了解原型链继承。这是最传统...

    用JavaScript实现单继承和多继承的简单方法

    这样,我们可以通过简单地修改原型链来实现单继承,而不需要额外的库或修改内置对象。 ### 多继承的实现 JavaScript不直接支持多继承,但可以通过混合(Mixin)或者使用原型链的组合来模拟多继承效果。一种常见的...

    【JavaScript源代码】简单谈谈JavaScript寄生式组合继承.docx

    ### JavaScript寄生式组合继承详解 #### 一、引言 在JavaScript中,对象继承机制是一种非常重要的设计模式。常见的继承方式包括原型链继承、构造函数继承等。今天我们要探讨的是寄生式组合继承——一种结合了原型...

    JavaScript mixin实现多继承的方法详解

    JavaScript Mixin 是一种实现多继承的技术,它允许一个对象(或类)继承多个其他对象(或类)的特性。在JavaScript这种仅支持单一原型链继承的语言中,通过Mixin可以模拟多继承的效果。以下是对JavaScript Mixin实现...

Global site tag (gtag.js) - Google Analytics