JS面向对象编程：对象

一般面向过程的写法都是写很多function，坏处：1.代码复用不好 2.函数名称容易重复冲突

下面介绍面向对象的写法：

在JS中每个函数function都是一个对象。

比如，下面这个就是一个对象，我们在使用的时候就可以当作对象来使用。

function HelloWorld()
{
    alert('hello world!');
}

使用下面测试函数：调用该函数就会弹出'hello world!'

function _test()
{
    var obj = new HelloWorld(); //这里的对象没任何属性和方法 new的时候就调用了构造方法function HelloWorld()
}

如何给对象赋予属性和方法？

在JS中我们使用prototype关键字进行赋值，我们给HelloWorld对象增加一个sayHello()方法和一个name属性：

HelloWorld.prototype ={
name:'javascript',
sayHello:function(){
 alert(this.name);  //this表示当前对象
 }
}

现在我们用面向对象方式来调用：

function _test()
{
    var obj = new HelloWorld(); //执行构造方法HelloWorld() 先弹出'Hello Wordl'
    obj.sayHello(); //再弹出'javascript'
}

总结：

为对象添加属性和对象格式：

对象名称.prototype = {
属性一 : 属性值,
属性二 : 属性值,
方法一 : function(参数列表) {
    方法体;
},
方法二 : function(参数列表) {
    方法体;
}
}

如何给对象添加私有变量？

function HelloWorld2()
{
    var privateProp = 'hello world 2!';
    this.method = function() {
         alert(privateProp);
    }
}

进行调用：

function _test2()
{
    var obj2 = new HelloWorld2();
    obj2.method();   // 调用该方法将打印'hello world 2!
    alert(obj2.privateProp); // 将打印undefined
}

使用prototype方式更加清晰，可读性好，所以一般都采用这种写法。

JS中如何为类定义静态属性和方法？

如下写法即可，访问只能用类名访问，不能用实例访问。

HelloWorld.age = 22;
HelloWorld.hello = function() {
    alert(HelloWorld.age);
}

访问：

function _test()
{
    var obj = new HelloWorld();
    obj.sayHello();     // 正确，实例方法，可以通过实例进行访问
    HelloWorld.hello(); // 正确，静态方法，通过类名进行直接访问
    obj.hello();        // 错误，不能通过实例访问静态方法。会报JS错误！
}

JS面向对象示例写法：

(function() {
    var BaoPay = {
        Config: {   //属性设置
            ajaxUrl: "/Ajax/BaoPayLog.ashx"
        },
        ajax: function(params, callback) {
            var that = this;
            $.ajax({

                type: "post",
                cache: false,
                dataType: "json",
                url: BaoPay.Config.ajaxUrl, //调用属性
                data: params,
                error: function(data) {
                    if (window.console) {
                        console.log("error log: " + data.responseText);
                    }
                },
                beforeSend: function(XMLHttpRequest) {
                    //$("#ploybut").unbind("click");
                },
                success: function(data) {
                    callback.call(that, data);
                }
            });
        },
        ajaxt: function(params, callback) {
            var that = this;
            $.ajax({
                type: "post",
                cache: false,
                async: false,
                dataType: "json",
                url: BaoPay.Config.ajaxUrl,
                data: params,
                error: function(data) {
                    if (window.console) {
                        console.log("error log: " + data.responseText);
                    }
                },
                beforeSend: function(XMLHttpRequest) {
                    //$("#ploybut").unbind("click");
                },
                success: function(data) {
                    callback.call(that, data);
                }
            });
        },
        GetBaoPaysubmit: function() {
            var params = {
                ajaxMethod: "baopaysubmit",
                ApplyMoney: $("#payMoney").val(),
                FirstName: $("#FirstName").val(),
            };
            var callback = function(data) {
                if (data.ReturnCode == 0) {
                    var str = data.ReturnString.split("|");
                    $("#MerchantOrderID").val(str[0]);
                    $("#SubmitTime").val(str[1]);
                    $("#SecureHash").val(str[2]);
                    $("#fromsub").submit();
                }
                else {
                    var str = data.ReturnString;
                    alert(str);
                }
            };
            BaoPay.ajaxt(params, callback); //调用类中函数
        }
    };
    window.BaoPay = BaoPay;
})();
 

前端调用js对象中的方法：

<input type="image"  src="/images/baopay_btn.png" id="submit1" onclick="BaoPay.GetBaoPaysubmit();"  class="ui-btn-text" /> 

站外扩展阅读：

JS面向对象编程之对象