大家好，這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！

一、面向物件

1、物件建立方式

1.1、呼叫系統函式建立物件

（建立物件的最簡單方式就是建立一個 Object 的例項，然後再為它新增屬性和方法。）

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

缺點：使用同一個介面建立很多物件，會產生大量的重複程式碼。

1.2、自定義建構函式建立物件

工廠模式建立物件：考慮到在 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.3、使用物件字面量表示法

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

如果留空其花括號，則可以定義只包含預設屬性和方法的物件 var person = {}; //與 new Object()相同

缺點：一次性物件，無法修改屬性的值。

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

obj.eat();

2、訪問物件屬性

點表示法 和 方括號表示法

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。

3、訪問物件方法

物件名.函式名();

4、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);
    }
};    

5、字面量的遍歷

物件本身沒有 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 不要加引號）
}

6、值傳遞和引用型別傳遞

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

7、內建物件

Math, Date, String, Array

學習的時候可以查閱線上文件：
MDN 線上文件
菜鳥教程

8、基本包裝型別

本身是基本型別，但是在執行的過程中，如果這種型別的變數呼叫了屬性或者方法，那麼這種型別就不是基本型別了，而是基本包裝型別。這個變數也不是普通變量了，而是基本包裝型別的變數。

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"); // 這才是基本包裝型別