`
dftwilson
  • 浏览: 23774 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

象使用java类一样使用javscript类,javascript 类机制实现源码

 
阅读更多
1 象使用java类一样使用javscript类,javascript 类机制实现源码
    习惯了使用java, 转入到javascript后, 一直苦恼为什么不能象java那样建立类及其对象呢。
尝试了很多方式, 最近在网上看到一段代码, 才发现原来在js中可以如此简单高效的实行类机制。
也打消了我对javascript类机制会特别消耗性能的顾虑,让我放心的使用javascript类机制。

代码比较短,只用了js的基本特性。参考价值比较高,在这里show一下代码。

实现类机制代码如下:

javascript代码
(function(){
  var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;

  // The base Class implementation (does nothing)
  this.Class = function(){};

  // Create a new Class that inherits from this class
  Class.extend = function(prop) {
    var _super = this.prototype;
  
  
    // Instantiate a base class (but only create the instance,
    // don't run the init constructor)
    initializing = true;
    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
      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
      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
    Class.extend = arguments.callee;
  
    return Class;
  };
})();

测试代码如下:
javascript代码
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

// Should all be true
p instanceof Person && p instanceof Class &&
n instanceof Ninja && n instanceof Person && n instanceof Class
分享到:
评论

相关推荐

    Javscript高性能编程+Javascript异步编程

    6. **内存管理**:理解JavaScript的垃圾回收机制,及时解除引用,防止内存泄漏。 7. **缓存和预加载**:使用缓存策略(如localStorage或Service Worker)可以加速页面加载,预加载技术则能提前获取所需资源。 二、...

    JavScript完全自学手册

    在面向对象编程方面,JavaScript支持基于原型的继承和类的概念(ES6引入)。理解对象的创建、属性和方法的访问,以及如何使用构造函数和原型链进行继承,这些都是JavaScript OOP的关键。 事件处理是JavaScript与...

    photoshop-javscript-脚本指南2019

    Photoshop JavaScript 脚本指南2019是Adobe Photoshop CC的一个重要参考资料,它深入讲解了如何使用JavaScript语言来自动化和扩展Photoshop的功能。在现代设计工作中,掌握JavaScript脚本能力能够极大地提升工作效率...

    JavaScript学习资料全面整理

    JavaScript,作为全球最广泛使用的编程语言之一,是前端开发的核心技术。它允许开发者在用户的浏览器上动态地操作网页,提供丰富的交互体验。本资源包"JavaScript学习资料全面整理"显然是为了帮助初学者和进阶者深入...

    javascript 资料

    在“源码”这个标签下,我们可以预期这篇博文可能探讨了JavaScript的源代码解析、函数实现或者特定库或框架的内部工作原理。源码分析是提升编程技能的重要方式,通过阅读和理解源码,开发者可以学习到更高效、更专业...

    JavaScript植物大战僵尸

    JavaScript植物大战僵尸是一款基于Web的互动游戏,利用JavaScript编程语言实现了原版《植物大战僵尸》的部分核心玩法。在这个项目中,开发者用JavaScript构建了一个小型的游戏环境,玩家可以在浏览器上体验到类似的...

    javascript做的谷歌吃豆游戏

    【标题】"javascript做的谷歌吃豆游戏" 描述了一款完全使用JavaScript开发的电子游戏,模仿了经典的“吃豆人”玩法。JavaScript是一种广泛应用于网页和互联网应用开发的编程语言,以其灵活性和强大的功能在创建交互...

    精通Javscript+jQuery

    而 jQuery 是一个 JavaScript 库,简化了 JavaScript 的使用,使得开发者能够快速实现常见的网页效果和操作。 ### JavaScript 基础 JavaScript 的核心概念包括变量、数据类型(如字符串、数字、布尔值、null 和 ...

    javscript调试工具包

    JavaScript是Web开发中不可或缺的一部分,而调试JavaScript代码是开发者日常工作中至关重要的环节。"javascript调试工具包"集合了专门用于JavaScript调试的工具,包括针对Internet Explorer(IE)浏览器的调试解决...

    获取Javascript函数名称

    获取Javascript函数名称 获取Javscript执行函数名称的方法

    photoshop-cc-javascript参考2019

    Photoshop CC JavaScript参考2019是一个针对Adobe Photoshop CC的编程指南,主要聚焦于使用JavaScript进行脚本开发,以实现自动化工作流程、增强用户界面(UI)以及扩展软件功能。JavaScript在Photoshop中的应用是...

    Javscript调用ASP.NET后台方法(示例)

    要实现JavaScript调用ASP.NET后台方法,我们通常使用AJAX(Asynchronous JavaScript and XML)技术。尽管名称中包含XML,但现在更多的数据格式如JSON被广泛使用。下面是一个基本的步骤: 1. **创建ASP.NET Web方法*...

    JavaScript_高级编程

    JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个...

    JavaScript 使用ActiveX实现在Excel文件中插入图片

    JavaScript 使用ActiveX实现在Excel文件中插入图片

    现代 javscript 编程.rar

    首先,它会介绍ES6(ECMAScript 6,也称ES2015)及后续版本的新特性,如箭头函数、模板字符串、let和const变量声明、类与模块等,这些都是现代JavaScript的基础。通过学习这些新特性,开发者可以编写出更简洁、更易...

    Javascript典型应用例程(源程序)

    再者,JavaScript的事件处理机制对于创建动态网页至关重要。事件监听、事件触发和事件冒泡都是需要掌握的概念。例如,如何使用addEventListener或attachEvent来绑定事件,以及如何使用removeEventListener或...

    JavScript经典实例

    JavaScript中的原型链机制使得对象可以继承其他对象的属性和方法,实现了面向对象编程。ES6引入了类(Class)的概念,使得面向对象的编写更加直观。 数组是另一种常用的数据结构,JavaScript提供了丰富的数组方法,...

    javscript学习文档

    2. **面向对象**:JavaScript支持面向对象编程,通过构造函数、原型链、类(ES6新增)来创建和操作对象。理解对象、原型、继承、封装是掌握JavaScript面向对象的关键。 3. **数组和对象方法**:JavaScript的数组和...

    七个精典JS写的游戏源码

    在本压缩包中,包含的是七个经典的游戏源码,这些源码是使用JavaScript编写的,非常适合那些想要学习或提升JS游戏开发技能的人。下面我们将深入探讨这些知识点: 1. **JavaScript基础**:在开发JavaScript游戏时,...

Global site tag (gtag.js) - Google Analytics