JS物件導向編程：對象

標籤：style   blog   http   color   io   os   使用   java   ar   

一般面向過程的寫法都是寫很多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物件導向編程之對象

 

JS物件導向編程：對象