首页 > 网站 > WEB开发 > 正文

浅说如何制作javascript类库

2024-04-27 14:20:07
字体:
来源:转载
供稿:网友

浅说如何制作javascript类库

理论

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

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

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

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

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

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

var Person = function(name) {this.name = name;};// 实例化一个Personvar alice = new Person('zhang'); if .. 这样Person('ben dan'); //=> undefined

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

实战

/** * Class build my Own class * Created by cyk on 14-8-19. */var Class = function() {    "use strict";    // in current line, 'this' is : Class {} 对象实例    // in the finally, as we have a return value ,so the Class {} is unused.    // 这样的做法每次都会产生一个'新的' klass 字面量方法    var klass = function() {        // this 均是上下文中新生成的实例        this.init.apply(this, arguments);    };    klass.PRototype.init = function() {};    // 定义 prototype 的别名    klass.fn = klass.prototype;    // 定义类的别名    klass.fn.parent = klass;    // 给类添加属性    klass.extend  = function ( obj ) {        // 可选的回调方法 extended        var extended = obj.extended;        for( var i in obj ) {            klass[i] = obj[i];        }        if (extended) extended(klass);    };    // 给实例添加属性    klass.include = function ( obj ) {        // 可选的回调方法        var included = obj.included;        for( var i in obj ){            klass.fn[i] = obj[i];        }        if (included) included(klass);    };    /*     * 这里的实现支持extended 和included 回调。     * 将属性传入对象后就会触发这两回调函数     */    return klass;};var ORMModule = {   save: function () {       "use strict";       // 共享的函数   }};var Person = new Class();// 虽然和上一行代码一样,但是获得的值却是新 new 出来的,// 所有 Asset 和 Person 指向的都是 Class 的不同变量,只是变量内容相似罢了var Asset  = new Class();// 所以 Person 和 Asset 现在指向的并非同一个变量Person.include(ORMModule);Asset.include(ORMModule);Person.include({    find: function() {       console.log(this);    }});// person is : Class instance,// klass {init: function, parent: function, save: function, find: function}var person = new Person();var asset = new Asset();person.find(); // klassasset.find();  // undefined is not a function

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


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表