zoukankan      html  css  js  c++  java
  • 浅说如何制作javascript类库

    理论

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

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

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

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

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

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

    var Person = function(name) {
    this.name = name;
    };
    // 实例化一个Person
    var 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(); // klass
    
    asset.find();  // undefined is not a function
    

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

  • 相关阅读:
    线性表的相关操作
    jq实现登陆页面的拖拽功能
    js实现登陆页面的拖拽功能
    HTML5存储
    js函数声明
    js打字机效果实现
    js日期显示效果
    js实现倒计时效果
    js中如何去获取外部css样式
    面向对象的几种方法详解(后)
  • 原文地址:https://www.cnblogs.com/yakun/p/3923572.html
Copyright © 2011-2022 走看看