理解JS面向對象

js中面向對象和純面嚮對象語言中的對象是不同的, js中的對象是: 無序屬性的集合, 其屬性可以包含基本值 ,對象或者函數.

js可以像java一樣寫代碼, 能夠面向對象編程. 在js中 每一個function其實就是個對象. 可以基於Object對象創建, 還可以基於對象字面量方式

一 基於函數創建對象


1. 定義對象

function Load(){
   console.log('我是一個方法也是一個對象 我叫: Load');
}
console.log('---產生一個對象---');
var obj = new Load();

上面的程序 在瀏覽器運行之後在控制檯會顯示出來結果是:

—產生一個對象—
我是一個方法也是一個對象 我叫: Load

2. 給對象添加實例方法和屬性

使用 prototype原型關鍵字添加的是公共的,可以理解是pubic類型的

格式:有點像json的感覺, 注: 參數列表 直接 寫變量名 如 aa 不要加var 如var aa 這樣就錯了.

對象名稱.prototype = {
    屬性名 : 屬性值,
    方法名 : function(參數列表) {
        方法體;
    }
}
Load.prototype = {
    sex:'女',
    address:'河南新鄉',
    fun1:function(){
        console.log('這個fun1是Load對象的公共方法');
    }
};
console.log('---輸出類的公共的方法和屬性---');
obj.fun1();
console.log('obj 中 sex 是: ' + obj.sex + '; obj 中 address 是: '+ obj.address);

結果是:

—輸出類的公共的方法和屬性—
這個fun1是Load對象的公共方法
obj 中 sex 是: 女; obj 中 address 是: 河南新鄉

3. 給對象添加靜態方法和屬性

直接使用類名定義, 必須用類名調用 使用對象調用會報錯

//添加靜態屬性和方法
Load.staticName = 'load name is wangming staic';
Load.static1 = function(){
      console.log('this is load method static')
};
console.log('---輸出Load類的靜態方法和靜態屬性, 和java相似,必須用類名調用---');
console.log(Load.staticName);
Load.static1();

結果:

—輸出Load類的靜態方法和靜態屬性, 和java相似,必須用類名調用—
object.html:43 load name is wangming staic
object.html:35 this is load method static

4. 對象添加私有屬性和方法

直接在對象定義的屬性和方法就是私有的.

function Load(){
    console.log('我是一個方法也是一個對象 我叫: Load');

    //添加私有的屬性和方法
    var privateProto = '我是一個Load中的私有的屬性';
    this.publicFun1 = function(){  //對外提供共有的方法,可用於輸出對象中的私有屬性值
        console.log('對象Load的私有屬性privateProto 是: ' + privateProto);
    };
    function privateFun2(){
        console.log('我是Load中的第二個私有的方法 我叫 privateFun2');
    }
    privateFun2();  //私有屬性
}

console.log('---輸出類的私有的方法和屬性---');
obj.publicFun1();
//obj.privateFun2();    //不能調用私有的方法  js會提示錯誤
console.log(obj.privateProto);  //不能調用私有的成員屬性 所以是爲: undefined

結果是:

—輸出類的私有的方法和屬性—
對象Load的私有屬性privateProto 是: 我是一個Load中的私有的屬性
undefined

全部的代碼爲

<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
<script type="text/javascript">
    //Load方法也可以是對象
    function Load(){
        console.log('我是一個方法也是一個對象 我叫: Load');

        //添加私有的屬性和方法
        var privateProto = '我是一個Load中的私有的屬性';
        this.publicFun1 = function(){  //對外提供共有的方法,可用於輸出對象中的私有屬性值
            console.log('對象Load的私有屬性privateProto 是: ' + privateProto);
        };
        function privateFun2(){
            console.log('我是Load中的第二個私有的方法 我叫 privateFun2');
        }
        privateFun2();  //私有屬性
    }

    //給對象添加實例方法和屬性 使用 prototype原型關鍵字
    Load.prototype = {
        sex:'女',
        address:'河南新鄉',
        fun1:function(){
            console.log('這個fun1是Load對象的公共方法');
        }
    };

    //添加靜態屬性和方法
    Load.staticName = 'load name is wangming staic';
    Load.static1 = function(){
          console.log('this is load method static')
    };

    //測試方法
    function test(){
        console.log('---產生一個對象---');
        var obj = new Load();
        console.log('---輸出Load類的靜態方法和靜態屬性, 和java相似,必須用類名調用---');
        console.log(Load.staticName);
        Load.static1();
        console.log('---輸出類的公共的方法和屬性---');
        obj.fun1();
        console.log('obj 中 sex 是: ' + obj.sex + '; obj 中 address 是: '+ obj.address);
        console.log('---輸出類的私有的方法和屬性---');
        obj.publicFun1();
//        obj.privateFun2();    //不能調用私有的方法  js會提示錯誤
        console.log(obj.privateProto);  //不能調用私有的成員屬性 所以是爲: undefined
    }
    window.onload = test();
</script>
</body>
</html>

注: 打開瀏覽器的控制檯, 按F12鍵
這裏寫圖片描述

二 基於Object對象


var person = new Object();
person.name = 'My Name';
person.age = 18;
person.getName = function(){
    return this.name;
};
console.log(person.getName()); //My Name
console.log(person.age);    //18
console.log(person.name);   //My Name

三 基於對象字面量方式(比較清楚的查找對象包含的屬性及方法)


var person = {
    name : 'My name',
    age : 18,
    getName : function(){
        return this.name;
    }
}

以上三種方式 都可以使用 ‘.’ 操作符來動態的添加屬性, 可以使用delete操作符將屬性設置爲 undefined 來刪除屬性

person.newAtt= 'new Attr';//添加屬性
console.log(person.newAtt);//new Attr
delete person.age;
console.log(person.age);//undefined(刪除屬性後值爲undefined);

參考 http://www.cnblogs.com/gaojun/archive/2013/10/24/3386552.html
參考 http://www.cnblogs.com/keke/archive/2010/08/17/1801363.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章