javascript的物件導向編碼方式

javascript的物件導向編碼方式

一，建立Null 物件，然後給Null 物件添加屬性和方法

var person = {};//建立了一個Null 物件

給對象添加屬性和方法

person.name="hello";

person.say =function(){

　　alert(person.name);

}

//調用的時候直接可以person.name或者person.say()

二。建立對象的同時，同時添加屬性和方法

ver person={

name:"hello" ,//逗號分割

say:function(){alert(this.name);}//使用this關鍵字引用本對象內的屬性和方法

}

 

三。對象之間的賦值和複製相關

 

var Maming = person;

這個代碼會建立一個新對象Maming，並且把person賦值給Maming

這樣的賦值過程，相當於一個淺複製。Maming和person這兩個對象都是指向同一個引用對象，所以當改變Maming.name的時候，person.name也會發生改變

 

 四。建構函式方式物件導向

建構函式是另一個編寫物件導向JavaScript代碼的方法，

當你需要初始化對象的屬性、方法，或者需要建立多個屬性、方法各不相同的執行個體時，它將是你最佳的選擇。同樣我們先從建立一個Null 物件開始：

 無參數的建構函式方式的例子

var test = function () { }

var t1 = new test();
var t2 = new test();
t1.name = "t1";
t2.name = "t2";
alert(t1.name);
alert(t2.name);

彈出的name值分別是t1，t2

還可以註冊新方法

t1.say = function () {
    alert("t1 say");
}
t1.say();

 

有參數的建構函式方式的例子

//這這個程式碼片段中方法可以在建構函式內直接設定，也可以在建構函式外面通過prototype設定，建構函式中的每句的結尾使用；分號或者，逗號都是可以的
推薦的是混合代碼，欄位屬性想隱私的寫在建構函式方法體內，想公開分享的用prototype寫在 建構函式方法體外面
function Person(name,age){    this.name = name;    this.age = age;
　　this.say = function () {
        alert("name is :" + this.name + ",age is :" + this.age);
    }}Person.prototype = {    GetName: function () {        alert(this.name);    },    GetAge: function () {        alert(this.age);    }}
Person.prototype.constructor = Person;這個代碼可以修正執行個體化的person類的constructor指向錯誤
調用樣本
var p = new Person("hello",20)
p.GetName();//輸出hello
p.GetAge();//輸出20

 

 五。javascript繼承的簡單實現

繼續參照上面的Person類，定義Maming類，繼承Person類

 

function Maming(name, age) {    this.name = name;    this.age = age;}Maming.prototype = new Person();//這個文法實現Maming繼承Person，也就繼承了Person中的GetName，GetAge的方法

調用樣本
var m = new Maming("maming",20);
m.GetName();//maming
m.GetAge();//20

如果在子類中覆蓋父類的方法？

可以在子類中覆蓋父類的方法，調用子類自己的方法，比如Maming類的自己GetName方法

 

function Maming(name, age) {    this.name = name;    this.age = age;}Maming.prototype = new Person();Maming.prototype.GetName = function () {        alert("maming :" + this.name);    }

這樣在調用Maming.GetName的時候輸出就是“maming”+name

六，閉包模式下的一點方法。

這個和jquery有關係

(function($){。。。})(jQuery) 這是閉包的開發代碼模式

閉包的最大用途在於私人化，保護私人方法，屬性等。防止本來只是讓外掛程式自己調用的方法被使用者調用，如果使用者調用了外掛程式專用的方法，肯定需要做更多的處理。

閉包中的代碼會最優先執行，要比jquery中ready方法還靠前，在html dom元素載入之前就已經執行了

所以這個時候或許某個dom屬性只能得到undefined，當然是後期通過方法被調用當然是可以，這裡說的主要是欄位和屬性方式來獲得dom

 

(function ($) {    var Test = {        a: 100,        b: $("#aa").val(),        alert: function () {            alert(this.a);//100            alert(this.b);//undefined        }    }　　window.Test = Test;//非常重要，因為Test是在閉包中定義的類，在$(function () {}方法中得不到Test對象的。但是window本身是全域性的，所以把Test賦值給window.Test屬性
這樣在其他地方都可以使用Test類對象})(jQuery)
$(function () {    Test.alert();})

 

另外一個改進的方式的在閉包中執行ready方法，閉包會先執行，但是ready方法會等等頁面載入完畢才執行，這個時候bb.b就可以獲得dom的值

(function ($) {    $(function () {//多了這個ready方法        var bb = {            a: 100,            b: $("#input_a").val(),            alert: function () {                alert(this.b);            }        }        window.bb = bb;    });})(jQuery)$(function () {    bb.alert();})