摘要：構(gòu)造函數(shù)通常首字母大寫，用于區(qū)分普通函數(shù)。這種關(guān)系常被稱為原型鏈，它解釋了為何一個對象會擁有定義在其他對象中的屬性和方法。中所有的對象，都有一個屬性，指向?qū)嵗龑ο蟮臉?gòu)造函數(shù)原型由于是個非標(biāo)準屬性，因此只有和兩個瀏覽器支持，標(biāo)準方法是。

從這篇文章開始，復(fù)習(xí) MDN 中級教程 的內(nèi)容了，在初級教程中，我和大家分享了一些比較簡單基礎(chǔ)的知識點，并放在我的 【Cute-JavaScript】系列文章中。

關(guān)于【Cute-JavaScript】：
一本可愛的JavaScript小書，內(nèi)容分成三大部分：ES規(guī)范系列、JS基礎(chǔ)系列和面試題系列，目前我還在抓緊更新，喜歡的朋友可以 github 上Star一下呀，下面放一張首頁圖：

正文開始

本文是 重溫基礎(chǔ) 系列文章的第十五篇。
今日感受：耐心為人處世。

本章節(jié)復(fù)習(xí)的是JS中的關(guān)于對象還有原型等相關(guān)知識。

前置知識：
關(guān)于使用對象，可以先閱讀一下我的《12.使用對象》這篇文章。

下面也先重溫一點基礎(chǔ)。

對象是一個包含相關(guān)數(shù)據(jù)和方法的集合，由變量和方法組成，通常稱為對象的屬性和方法，比如：

let me = {
    name : "pingan",
    eat: function(){
        console.log("eat eat eat!!!");
    }
}

其中，name就是me這個對象的一個屬性，eat就是me這個對象的一個方法。
訪問對象的屬性是這樣的：

me.name;   // "pingan"
me.eat();  // "eat eat eat!!!"

另外在訪問對象屬性時，有以下兩種方式：

let me = {
    name : "pingan",
}
// 點表示法
me.name;   // me.name => "pingan"

// 括號表示法
me["name"];// me.name => "pingan"

括號表示法中，必須是字符串。

我們常常這么設(shè)置對象的屬性：

let me = {
    name : "pingan",
}
// 點表示法
me.name = "leo";   // me => {name: "leo"}

// 括號表示法
me["name"] = "leo";// me => {name: "leo"}

這里簡單介紹下JavaScrip的面向?qū)ο缶幊蘋OP。

面向?qū)ο缶幊蹋∣bject Oriented Programming，OOP，面向?qū)ο蟪绦蛟O(shè)計）是一種計算機編程架構(gòu)。OOP 的一條基本原則是計算機程序是由單個能夠起到子程序作用的單元或?qū)ο蠼M合而成。  —— 百度百科

我們這里定義一個簡單的對象模型，比如我，我的身上可能有很多信息（姓名，年齡，身高等等），這時候我們可以將這些信息抽取出來，像這樣：

let leo = {
    name : "leo",
    age  : 26,
    height : 180,
}

這樣我們就將我的信息抽取成一個JS的對象了，但是這樣有個局限性，這樣定義的話，一次只能定義一個人，如果這時候，有一百個人，那么我們就需要定義一百個這樣的對象，顯然這是不可取的。
所以，這里就引入一個重要的函數(shù)——構(gòu)造函數(shù)，將相同的特性封裝成通用的對象，實現(xiàn)定義一次，其他地方都可以使用，這也是OOP的核心思想：

// 傳入 name 參數(shù)使得可以定義任何人作為對象
function Person (name){
    let me = {};
    me.name = name;
    me.doSomething = function(){
        console.log(me.name);
    }
    return me;
}

創(chuàng)建一個函數(shù)“Person”，只要傳入不同的name即可得到不同的對象：

let leo = Person("leo");
leo.name;    // "leo"

let pingan = Person("pingan");
pingan.name; // "pingan"

但是似乎Person對象的定義，顯得不夠精簡，因為還要定義一個空對象來接收各個屬性和方法，幸好JavaScrip在構(gòu)造函數(shù)中提供一個便捷的方法，我們將代碼改造下：

function Person (name){
    this.name = name;
    this.doSomething = function(){
        console.log(this.name);
    }
}

對于this關(guān)鍵詞，即無論是該對象的哪個實例被構(gòu)造函數(shù)創(chuàng)建，它的name屬性都是參數(shù)name的值，doSomething方法中使用的也是參數(shù)name。簡單理解就是用this指代了Person。

構(gòu)造函數(shù)通常首字母大寫，用于區(qū)分普通函數(shù)。

接下來，通過new關(guān)鍵詞，使用前面創(chuàng)建的構(gòu)造函數(shù)（使用構(gòu)造函數(shù)也叫實例化）：

let leo = new Person("leo");
leo.name;    // "leo"

let pingan = new Person("pingan");
pingan.name; // "pingan"

然后一個簡單的構(gòu)造函數(shù)就寫好了，通常在開發(fā)的時候，可能會有很多的參數(shù)：

function Man(name, age, height, weight){
    this.name = name;
    this.age = age + "歲";
    this.HeightAndWeight = {
        height,
        weight
    };
    this.doSomething = function (){
        console.log(`
            ${this.name}: height:${this.HeightAndWeight.height}m, 
            weight:${this.HeightAndWeight.weight}Kg!!`
        );
    };
}

let leo = new Man("leo",25,1.8,68);
leo.doSomething();  // leo: height:1.8m, weight:68Kg!!

這里需要先了解一下Object和Function,這兩個函數(shù)都是JS的自帶函數(shù)，Object繼承自己，Function繼承自己，相互繼承對方，即Object和Function既是函數(shù)也是對象。

console.log(Function instanceof Object); // true
console.log(Object instanceof Function); // true

Object 是 Function的實例，而Function是它自己的實例。

console.log(Function.prototype); // ? () { [native code] }
console.log(Object.prototype);  // Object

另外，只有通過Function創(chuàng)建的函數(shù)都是函數(shù)對象，其他都是普通對象（通常由Object創(chuàng)建）：

function f1(){};
typeof f1 //"function"
 
 
var o1 = new f1();
typeof o1 //"object"
 
var o2 = {};
typeof o2 //"object"

理論知識：

JavaScript 常被描述為一種基于原型的語言 (prototype-based language)——每個對象擁有一個原型對象，對象以其原型為模板、從原型繼承方法和屬性。
原型對象也可能擁有原型，并從中繼承方法和屬性，一層一層、以此類推。這種關(guān)系常被稱為原型鏈 (prototype chain)，它解釋了為何一個對象會擁有定義在其他對象中的屬性和方法。
準確地說，這些屬性和方法定義在Object的構(gòu)造器函數(shù)(constructor functions)之上的prototype屬性上，而非對象實例本身。

個人理解：

JS中所有的函數(shù)對象，都有一個prototype屬性，對應(yīng)當(dāng)前對象的原型，但普通對象沒有，而prototype屬性下還有一個constructor，指向這個函數(shù)。

var p = {};
p.prototype;         // undefined
p instanceof Object; // true

function f (){}; 
f.prototype;         // object {constructor: ?}
f === f.prototype.constructor;           // true
Object === Object.prototype.constructor; // true

JS中所有的對象，都有一個_proto_屬性，指向實例對象的構(gòu)造函數(shù)原型（由于_proto_是個非標(biāo)準屬性，因此只有ff和chrome兩個瀏覽器支持，標(biāo)準方法是Object.getPrototypeOf()）。

var p = new Person(); 
p._proto === Person.prototype;  //true

修改原型：
經(jīng)常我們也需要對原型進行修改：

function Person (name){
    this.name = name;
}
// 添加一個getName方法
Person.prototype.getName = function(){
    return "名字：" + this.name;
}
var p = new Person("leo"); 
p.getName();   // "名字：leo"

這里也說明了原型進行繼承，p繼承Person原型中新增的函數(shù)屬性getName。

概念：
javascript中，每個對象都會在內(nèi)部生成一個 proto 屬性，當(dāng)我們訪問一個對象屬性時，如果這個對象不存在就會去 proto 指向的對象里面找，一層一層找下去，直到找到為止，如果到了原型鏈頂端，還沒找到，則返回undefined，這就是javascript原型鏈的概念。

總結(jié)：

除了Object的prototype的原型是null，所有對象和原型都有自己的原型，對象的原型指向原型對象。

JS中所有的東西都是對象,所有的東西都由Object衍生而來, 即所有東西原型鏈的終點指向null。

更加詳細的介紹，可以查看下面參考文章。

1.MDN JavaScript 對象入門

2.基于js中的原型

本部分內(nèi)容到這結(jié)束

系列目錄：

【復(fù)習(xí)資料】ES6/ES7/ES8/ES9資料整理(個人整理)

【重溫基礎(chǔ)】1.語法和數(shù)據(jù)類型

【重溫基礎(chǔ)】2.流程控制和錯誤處理

【重溫基礎(chǔ)】3.循環(huán)和迭代

【重溫基礎(chǔ)】4.函數(shù)

【重溫基礎(chǔ)】5.表達式和運算符

【重溫基礎(chǔ)】6.數(shù)字

【重溫基礎(chǔ)】7.時間對象

【重溫基礎(chǔ)】8.字符串

【重溫基礎(chǔ)】9.正則表達式

【重溫基礎(chǔ)】10.數(shù)組

【重溫基礎(chǔ)】11.Map和Set對象

【重溫基礎(chǔ)】12.使用對象

【重溫基礎(chǔ)】13.迭代器和生成器

【重溫基礎(chǔ)】14.元編程

歡迎關(guān)注微信公眾號【前端自習(xí)課】每天早晨，與您一起學(xué)習(xí)一篇優(yōu)秀的前端技術(shù)博文 .