從零開始學 Web 之 JavaScript（五）面向對象

你們好，這裏是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公衆號，歡迎你們訂閱關注。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的冒險之旅吧！

1、面向對象

一、對象建立方式

1.一、調用系統函數建立對象

（建立對象的最簡單方式就是建立一個 Object 的實例，而後再爲它添加屬性和方法。）

var obj = new Object();
obj.name = "Daotin";
obj.age = 18;
obj.eat = function () {
　　console.log("我很能吃");
);

缺點：使用同一個接口建立不少對象，會產生大量的重複代碼。

1.二、自定義構造函數建立對象

工廠模式建立對象：考慮到在 ECMAScript 中沒法建立類，開發人員就發明了一種函數，用函數來封裝以特定接口建立對象的細節（把建立一個函數的過程封裝在一個函數裏面），缺點：建立的對象屬性都是同樣的。

function creatObject() {
    var obj = new Object();
    obj.name = "Daotin";
    obj.age = 18;
    obj.eat = function () {
        console.log("我很能吃");
    };
    return obj;
}

var person = creatObject();
person.eat();

工廠模式建立對象進階版：能夠修改屬性

function creatObject(name, age) {
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.eat = function () {
        console.log("我很能吃");
    };
    return obj;
}java

var person = creatObject("Daotin", 18);
person.eat();

自定義構造函數：（函數和構造函數的區別：沒有區別，可是一般構造函數首字母大寫）

特色：

• 沒有顯式地建立對象；
• 直接將屬性和方法賦給了 this 對象；
• 沒有 return 語句。

function CreatObject() { // 首字母大寫
    this.name = "Daotin";
    this.age = 18;
    this.eat = function () {
        console.log("我很能吃");
    };
}

var person = new CreatObject();
person.eat();

進階（傳參數）：

function CreatObject(name, age) {
    this.name = name;
    this.age = age;
    this.eat = function () {
        console.log("我很能吃");
    };
}

var person = new CreatObject();
person.eat();

構造函數的問題

構造函數模式雖然好用，但也並不是沒有缺點。使用構造函數的主要問題，就是每一個方法都要在每一個實例上從新建立一遍。在前面的例子中， person1 和 person2 都有一個名爲 sayName()的方法，但那兩個方法不是同一個 Function 的實例。不要忘了——ECMAScript 中的函數是對象，所以每定義一個函數，也就是實例化了一個對象。從邏輯角度講，此時的構造函數也能夠這樣義。

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = new Function("alert(this.name)"); // 與聲明函數在邏輯上是等價的
}

從這個角度上來看構造函數，更容易明白每一個 Person 實例都包含一個不一樣的 Function 實例（以顯示 name 屬性）的本質。說明白些，以這種方式建立函數，會致使不一樣的做用域鏈和標識符解析，但建立 Function 新實例的機制仍然是相同的。所以，不一樣實例上的同名函數是不相等的，如下代碼能夠證實這一點：alert(person1.sayName == person2.sayName); //false

然而，建立兩個完成一樣任務的 Function 實例的確沒有必要；何況有 this 對象在，根本不用在執行代碼前就把函數綁定到特定對象上面。所以，大可像下面這樣，經過把函數定義轉移到構造函數外部來解決這個問題。

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = sayName;
}

function sayName(){
    alert(this.name);
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

在這個例子中，咱們把 sayName() 函數的定義轉移到了構造函數外部。而在構造函數內部，咱們將 sayName 屬性設置成等於全局的 sayName 函數。這樣一來，因爲 sayName 包含的是一個指向函數的指針，所以 person1 和 person2 對象就共享了在全局做用域中定義的同一個 sayName() 函數。

1.三、使用對象字面量表示法

對象字面量是對象定義的一種簡寫形式，目的在於簡化建立包含大量屬性的對象的過程。

若是留空其花括號，則能夠定義只包含默認屬性和方法的對象 var person = {}; //與 new Object()相同

缺點：一次性對象，沒法修改屬性的值。

var obj = {
    name:"Daotin",  // 注意是屬性賦值是冒號
    age: 18,
    eat: function () {
        console.log("我很能吃");
    }   // 最後一個後面沒有逗號
};

obj.eat();

二、訪問對象屬性

點表示法 和 方括號表示法

alert(person["name"]); //"Nicholas"
alert(person.name); //"Nicholas"

從功能上看，這兩種訪問對象屬性的方法沒有任何區別。但方括號語法的主要優勢是能夠經過變量來訪問屬性（屬性綁定），例如：

var propertyName = "name";
alert(person[propertyName]); //"Nicholas"

若是屬性名中包含會致使語法錯誤的字符，或者屬性名使用的是關鍵字或保留字，也可使用方括號表示法。

例如：person["first name"] = "Nicholas";
因爲"first name"中包含一個空格，因此不能使用點表示法來訪問它。然而，屬性名中是能夠包含非字母非數字的，這時候就可使用方括號表示法來訪問它們。一般，除非必須使用變量來訪問屬性，不然咱們建議使用點表示法。

PS： 若是訪問一個沒有的屬性的值，那麼這個值爲 undefined，而不是報錯？

由於 js 是一門動態類型的語言，無論使用點表示法仍是方括號表示法，若是沒有這個屬性，就至關於在建立這個屬性，然而這個時候沒有賦值，因此就是 undefined。

三、訪問對象方法

對象名.函數名();

四、JSON

什麼是JSON?

JSON 的全稱爲：JavaScript Object Notation（JavaScript對象表示形式：就是對象字面量）

JSON格式的數據：通常都是成對的，鍵值對。

JSON和對象字面量的區別？
json 和對象（對象字面量）的區別僅僅在於，json 格式的數據中的鍵必須用雙引號括起來；

var json = {
    "name" : "zs",
    "age" : 18,
    "sex" : true,
    "sayHi" : function() {
        console.log(this.name);
    }
};

五、字面量的遍歷

對象自己沒有 length，因此不能用 for 循環遍歷。要使用 for...in...

var json = {「aaa」: 1, 「bbb」: 2, 「ccc」: 3, 「ddd」: 4}

for(var key in json){
    //key表明aaa,bbb.....等
    //json[key]表明1,2,3....等（k 不要加引號）
}

六、值傳遞和引用類型傳遞

分析值傳遞和址傳遞最好的方法就是畫圖分析，最簡單。

七、內置對象

Math, Date, String, Array

學習的時候能夠查閱在線文檔：
MDN 在線文檔
菜鳥教程

八、基本包裝類型

自己是基本類型，可是在執行的過程當中，若是這種類型的變量調用了屬性或者方法，那麼這種類型就不是基本類型了，而是基本包裝類型。這個變量也不是普通變量了，而是基本包裝類型的變量。

var str = "hello";
str = str.replace("he", "wo");
console.log(str); // wollo

須要注意的地方：
若是一個對象&&true，那麼結果是true
若是一個true&&對象，那麼結果是對象。

var flag = new Boolean(false);
var result = flag && true;
var result1 = true && flag;

console.log(result); // true
console.log(result1); // Boolean

var num = 10; // 基本類型
var num2 = Number("10"); // 不是基本包裝類型，而是轉換，這裏換成 Boolean 也成立
var num3 = new Number("10"); // 這纔是基本包裝類型