讨论一下JS的基于原型的面向对象

icekiller110 2012-06-24
个人觉得使用Javascript的时候创建自定义的类,没必要非得像Java、ruby等面向对象的语言那样创建一个类,然后使用new关键字,生成类的实例。因为JS是使用原型链的继承方式。那我们直接使用此方式即可,下面是小弟的代码,欢迎大家抛砖。

var module = (function(m){  
    var m_name, m_sex;  
  
    m.custom_obj = function(name, sex){  
        m_name = name;   
        m_sex = sex;  
        return new custom_obj();  
    }  
  
    function custom_obj(){  
    }  
  
    custom_obj.prototype.get_name = function(){  
        return m_name;  
    }  
  
    custom_obj.prototype.get_sex = function(){  
        return m_sex;  
    }  
  
    return m;   
}(module || {}));  
  
var obj = module.custom_obj("icekiller", "man");  
console.log(obj);  
console.log(obj.get_name());  
console.log(obj.get_sex());  



-------------------------------
1. 创建module。
2. 创建自定义类custom_obj,并且创建其原型方法get_name和get_sex。
3. 再module上添加自定义了同名的方法,将参数赋值给闭包的局部变量;使用new返回自定义对象。

稍微解释一下,虽然在 第三部也是用了new,但是这个new只是为了将当前对象的prototype指向自定义对象,和将this指针指向自定义对象,并不是创建类的实例的意思。
hoodng 2012-11-02
对于Java程序员,甚至C/C++程序员来说,估计下面的代码风格,更容易理解、上手和维护。

$package("js.awt");

/**
 * Define Button component
 * 
 * @param def:{
 *   className: string, required
 * 
 *   id: request,
 *   
 *   iconImage: "",
 *   iconAlign: "left"|"right"|"top"|"bottom" 
 *   labelText: "Button",   
 * 
 *   state:optional,
 *   toggle:boolean, required
 * 
 * }
 */
js.awt.Button = function(def, Runtime){

    var CLASS = js.awt.Button, thi$ = CLASS.prototype;
    if(CLASS.__defined__){
        this._init.apply(this, arguments);
        return;
    }
    CLASS.__defined__ = true;

    var Class = js.lang.Class, Event = js.util.Event, DOM = J$VM.DOM,
    System = J$VM.System;
    
    thi$.setIconImage = function(state){
        // TODO: 
    };

    thi$.getIconImage = function(){
        // TODO: 
    };
    
    thi$.setText = function(text){
        // TODO: 
    };
    
    thi$.getText = function(){
        // TODO: 
    };

    thi$.setToolTipText = function(s){
        // TODO: 
    }.$override(this.setToolTipText);


    var _onmousedown = function(e){
        // TODO: 
    };

    var _onmouseup = function(e){
        // TODO: 
    };

    var _onmouseover = function(e){
        // TODO: 
    };

    var _onmouseout = function(e){
        // TODO: 
    };

    thi$.destroy = function(){
        // TODO ...        
        arguments.callee.__super__.apply(this, arguments);

    }.$override(this.destroy);
    
    thi$._init = function(def, Runtime, view){
        if(typeof def !== "object") return;
        
        def.classType = def.classType || "js.awt.Button";
        def.className = def.className || "jsvm_button";

        arguments.callee.__super__.apply(this, [def, Runtime, view]);
        
        // TODO .....

        this.attachEvent("mouseover", 0, this, _onmouseover);
        this.attachEvent("mouseout",  0, this, _onmouseout);
        this.attachEvent("mousedown", 0, this, _onmousedown);
        this.attachEvent("mouseup",   0, this, _onmouseup);

    }.$override(this._init);

    this._init.apply(this, arguments);
    
}.$extend(js.awt.Component);

Global site tag (gtag.js) - Google Analytics