JS中的對象

對象
JavaScript 提供多個內建對象，比如 Object、String、Date、Array 等等，此外 JavaScript 允許自定義對象。

對象只是帶有屬性和方法的特殊數據類型。

1.創建 JavaScript 對象
1.1 通過new關鍵字創建對象

var obj = new Object();
// 添加屬性
obj.name = "小明";
// 添加方法
obj.sleep = function () {
    console.log(this.name + "在睡覺");
};

1.2 通過字面量創建對象

var obj = {
    name : "xiaoming",
    age : "18",
    show : function (girlfriend) {
        console.log(this.name + "的女朋友是" + girlfriend);
    }
};

注意: 屬性名字可以加雙引號也可以不加雙引號。

1.3 通過構造函數創建對象

// 注意：此處建議方法名首字母大寫
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.say = function(name) {
        console.log("你好: " + name + "!");
    };
}

// 創建兩個Person對象
var person1 = Person("ande", 18);
var person2 = Person("dahuan", 28);

2.訪問對象的屬性
2.1 通過點語法訪問對象屬性

var obj = {
    name : "xiaoming",
    age : 18,
    show : function (girlfriend) {
        console.log(this.name + "的女朋友是" + girlfriend);
    }
};
// 訪問屬性值
console.log(obj.name);   // 輸出："xiaoming"
console.log(obj.age);    // 輸出：18

2.2 通過中括號法訪問對象屬性
中括號法可以用變量作為屬性名，而點方法不可以；
中括號法可以用數字作為屬性名，而點語法不可以。

var obj = {
    name : "xiaoming",
    age : 18,
    110 : "110",
    show : function (girlfriend) {
        console.log(this.name + "的女朋友是" + girlfriend);
    }
};
// 訪問屬性值
console.log(obj["name"]);   // 輸出："xiaoming"
var age = "age";
console.log(obj[age]);      // 輸出：18
console.log(obj["110"]);    // 輸出："110"

 

3.訪問對象的方法

var obj = {
    name : "xiaoming",
    age : 18,
    show : function (girlfriend) {
        console.log("xiaoming的女朋友是" + girlfriend);
    },
    sleep : function () {
        console.log("xiaoming在睡覺")
    }
};
// 訪問對象方法
obj.show("小紅");
obj.sleep();

4. this關鍵字
this是JavaScript語言的一個關鍵字。

它代表函數運行時，自動生成的一個內部對象，只能在函數內部使用。

隨着函數使用場合的不同，this的值會發生變化。但是有一個總的原則，那就是this指的是，調用函數的那個對象。

4.1 純粹的函數調用
這是函數的最通常用法，屬於全局性調用，因此this就代表全局對象(Global)。

var index = 0;
function fun() {
    // 此處的this代表就是全局對象window
    this.index = 1;
}
fun();
console.log(index);   // 輸出：1

因為我們使用window.fun()來調用函數，調用函數的那個對象是window，所以this指向的也是window。

4.2 作為對象方法的調用
作為對象方法的調用，this 指向當前實例對象。

var point = {
    x : 0,
    y : 0,
    moveTo : function(x, y) {
        this.x += x;
        this.y += y;
    }
};

point.moveTo(10, 10);
console.log("x: " + point.x + " y: " + point.y);  // 輸出：x: 10 y: 10

因為使用point.moveTo()來調用函數，調用函數的那個對象是point，所以this指向的也是point。

4.3 作為構造函數調用
所謂構造函數，就是通過這個函數生成一個新對象(object)，這時this就指這個新對象。

function Student() {
    this.name = "ande";
}
var stu = new Student();
console.log(stu.name);        // 輸出："ande"

5. for…in 循環
for…in 語句用於對數組或者對象的屬性進行循環操作。

for … in 循環中的代碼每執行一次，就會對數組的元素或者對象的屬性進行一次操作。

【語法格式】

for (變量 in 對象) {
// 在此執行代碼
}

for (變量 in 對象) {
    // 在此執行代碼
}

“變量”用來指定變量，指定的變量可以是數組元素，也可以是對象的屬性。

// 1、遍歷對象
var obj = {
    name : "xiaoming",
    age : 18,
    sex : "男",
    tel : "18911450210"
};
// for...in循環遍歷
for(var attr in obj) {
    if (typeof obj[attr] != "function") {
        console.log("屬性操作：" + obj[attr]);
    }
}
// 2.遍歷數組
var arr = ["11", "22", "33", "44", "55"];
for(var attr in arr) {
    console.log(arr[attr]);
}

6. eval()函數
eval()函數會將傳入的字符串當做JavaScript代碼進行執行，例如：eval(“2+3”) 返回的是5。。

把JSON字符串轉化為js認識的對象：

var json = '[{"name" : "dahuan", "age" : 18}, {"name" : "xiaohuan", "age" : 20}]';
// 把json字符串轉化為js對象
var arr = eval(json);
// 對數據做解析
for (var i = 0; i < arr.length; i++) {
    console.log("name: " + arr[i].name);
    console.log("age: " + arr[i].age);
}

注意：eval()是一個危險的函數，從安全性來講不建議使用！