理论

对于静态的类来说,JavaScript 对象直接量就已经够用了,但使用继承和实例来创建经典的类往往更有帮助。

JavaScript 是基于原型的编程语言,并没有包含内置类的实现。

但通过JavaScript 可以轻易地模拟出经典的类。

JavaScript 中有构造函数和 new 运算符。构造函数用来给实例对象初始化属性和值。任何JavaScript 函数都可以用做构造函数,构造函数必须使用 new 运算符作为前缀来创建新的实例。

new 运算符改变了函数的执行上下文,同时改变了return 语句的行为。

当使用 new 关键字来调用构造函数时,执行上下文从全局对象(window)变成一个空的上下文{},这个上下文代表了新生成的实例。因此,this 关键字指向当前创建的实例。如果构造函数没有返回值,那么这个新生成的实例就作为默认的返回值。如果指定了返回值,这个新实例就白白浪费了。

  1. var Person = function(name) {
  2. this.name = name;
  3. };
  4. // 实例化一个Person
  5. var alice = new Person('zhang');
  6. if .. 这样
  7. Person('ben dan'); //=> undefined

上面这个例子说明了 new 与不 new 的区别。这个函数只会返回undefined,并且执行上下文是window(全局)对象,无意间创建了一个全局变量name。

实战

  1. /**
  2. * Class build my Own class
  3. * Created by cyk on 14-8-19.
  4. */
  5. var Class = function() {
  6. "use strict";
  7. // in current line, 'this' is : Class {} 对象实例
  8. // in the finally, as we have a return value ,so the Class {} is unused.
  9. // 这样的做法每次都会产生一个'新的' klass 字面量方法
  10. var klass = function() {
  11. // this 均是上下文中新生成的实例
  12. this.init.apply(this, arguments);
  13. };
  14. klass.prototype.init = function() {};
  15. // 定义 prototype 的别名
  16. klass.fn = klass.prototype;
  17. // 定义类的别名
  18. klass.fn.parent = klass;
  19. // 给类添加属性
  20. klass.extend = function ( obj ) {
  21. // 可选的回调方法 extended
  22. var extended = obj.extended;
  23. for( var i in obj ) {
  24. klass[i] = obj[i];
  25. }
  26. if (extended) extended(klass);
  27. };
  28. // 给实例添加属性
  29. klass.include = function ( obj ) {
  30. // 可选的回调方法
  31. var included = obj.included;
  32. for( var i in obj ){
  33. klass.fn[i] = obj[i];
  34. }
  35. if (included) included(klass);
  36. };
  37. /*
  38. * 这里的实现支持extended 和included 回调。
  39. * 将属性传入对象后就会触发这两回调函数
  40. */
  41. return klass;
  42. };
  43. var ORMModule = {
  44. save: function () {
  45. "use strict";
  46. // 共享的函数
  47. }
  48. };
  49. var Person = new Class();
  50. // 虽然和上一行代码一样,但是获得的值却是新 new 出来的,
  51. // 所有 Asset 和 Person 指向的都是 Class 的不同变量,只是变量内容相似罢了
  52. var Asset = new Class();
  53. // 所以 Person 和 Asset 现在指向的并非同一个变量
  54. Person.include(ORMModule);
  55. Asset.include(ORMModule);
  56. Person.include({
  57. find: function() {
  58. console.log(this);
  59. }
  60. });
  61. // person is : Class instance,
  62. // klass {init: function, parent: function, save: function, find: function}
  63. var person = new Person();
  64. var asset = new Asset();
  65. person.find(); // klass
  66. asset.find(); // undefined is not a function

先到这里,下集不见不看。

浅说如何制作javascript类库的更多相关文章

  1. 编写Javascript类库(jQuery版

    编写Javascript类库(jQuery版) - 进阶者系列 - 学习者系列文章 Posted on 2014-11-13 09:29 lzhdim 阅读(653) 评论(1) 编辑 收藏 本系列文 ...

  2. 《连载 | 物联网框架ServerSuperIO教程》- 5.轮询通讯模式开发及注意事项。附:网友制作的类库说明(CHM)

    1.C#跨平台物联网通讯框架ServerSuperIO(SSIO)介绍 <连载 | 物联网框架ServerSuperIO教程>1.4种通讯模式机制. <连载 | 物联网框架Serve ...

  3. javascript 框架、根基技巧、布局、CSS、控件 JavaScript 类库

    预筹备之 JavaScript 今朝支流的 JavaScript 框架排名中,jQuery 和 Ext 可算是佼佼者,得到了用户的普遍好评.海内的一些框架许多也是模仿 jQuery 对 JavaScr ...

  4. 编写Javascript类库(jQuery版) - 进阶者系列 - 学习者系列文章

    这些年主要关注于项目管理方面的工作,编码就比较少了.这几天比较空闲,就想把原来的经验沉淀下来,一个是做好记录,以后如果忘记了还能尽快找回来,第二个是写写博文,算是练练手笔吧. 言归正传,这次写的是Ja ...

  5. 支持Json进行操作的Javascript类库TAFFY DB

    前段时间工作中用到Json数据,希望将一些简单的增删改查放到客户端来做,这样也能减少服务器端的压力.分别查找了几个可以对Json进行操作的javascript 类库,最终选定了TAFFY DB.原因如 ...

  6. 5款帮助简化的HTML5 Audio开发的Javascript类库

    HTML5的audio标签提供了我们方便控制声音的功能,可是使用原生的HTML5来开发声音或者音乐相关的项目仍旧很的麻烦.在今天这篇文章中,我们将介绍5款帮助你简化开发的javascript audi ...

  7. 超酷的实时颜色数据跟踪javascript类库 - Tracking.js

    来源:GBin1.com 今天介绍这款超棒的Javascript类库是 - Tracking.js,它能够独立不依赖第三方类库帮助开发人员动态跟踪摄像头输出相关数据. 这些数据包括了颜色或者是人, 这 ...

  8. 12个非常不错的javascript类库

    Javascript是一个解释性的编程语言.最初作为浏览器的一部份在浏览器中运行,可以和用户交互,并且控制浏览器,异步通讯,修改显示的document.在这篇文章中,我们收集了12款最新的Javasc ...

  9. 【javascript类库】zepto和jquery的md5加密插件

    [javascript类库]zepto和jquery的md5加密插件 相信很多人对jQuery并不陌生,这款封装良好的插件被很多开发者使用. zepto可以说是jQuery在移动端的替代产品,它比jQ ...

随机推荐

  1. 详解Node解析URL网址

    前提给大家声明一下,我操作的环境是Mac终端下操作的.(前提是你先要下载好node.js) 说道URL 恐怕都不陌生,但是要说URL,就 必须先说下URI URI是统一资源标识符,是一个用于标识某一互 ...

  2. [转载]jquery版小型婚礼(可动态添加祝福语)

    原文链接:http://www.cnblogs.com/tattoo/p/3788019.html 前两天在网上不小心看到“js许愿墙”这几个字,我的神经就全部被调动了.然后就开始我 的百度生涯,一直 ...

  3. BZOJ 3527: [Zjoi2014]力

    Description 求 \(E_i=\sum _{j=0}^{i-1} \frac {q_j} {(i-j)^2}-\sum _{j=i+1}^{n-1} \frac{q_j} {(i-j)^2} ...

  4. Unity 编译错误记录

    1. 相关代码: NetworkView.RPC ("ReceiveMessage", RPCMode.All, message); 编译输出: Assets/cs/ClientC ...

  5. Android issues

    1. Android studio 2.0 Error:Exception in thread "main" java.lang.UnsupportedClassVersionEr ...

  6. MySQL 5.6 OOM 问题解决分享【转】

    本文来自:杨德华的原创分享 | MySQL 5.6 OOM 问题解决分享 延伸阅读:Linux的内存回收和交换 当遇到应用程序OOM的时候,大多数时候只能用头疼来形容,应用程序还可以通过引流来临时重启 ...

  7. links and softwares

    links 普通 http://www.ncpa-classic.com//special/2014gejujie/index.shtml ; 中国大剧院 http://tieba.baidu.com ...

  8. GridView模版列中设置

    在GridView模版列中设置如下<asp:TemplateField HeaderText="删除">    <ItemTemplate>         ...

  9. HDU 1754 I Hate It 线段树单点更新求最大值

    题目链接 线段树入门题,线段树单点更新求最大值问题. #include <iostream> #include <cstdio> #include <cmath> ...

  10. phpcms v9 中的数据库操作函数

    1.查询 $this->select($where = '', $data = '*', $limit = '', $order = '', $group = '', $key='')   返回 ...