簡介

本將會深入講解面向物件在javascript中的應用，并詳細介紹三種物件的生成方式：建構式，原型鏈，類，

什么是物件

雖然說程式員不缺物件，隨時隨地都可以new一個出來，但是在程式的世界中，物件到底是什么呢？

物件是單個實物的抽象，

物件是一個容器，封裝了屬性（property）和方法（method），

而面向物件是相對于面向程序來講的，面向物件方法，把相關的資料和方法組織為一個整體來看待，從更高的層次來進行系統建模，更貼近事物的自然運行模式，

面向物件的好處就是可抽象，封裝和可重用性，同時提供了繼承和多型等非常有用的特性，

而隨著JS的發展，已經超越了最開始的腳本語言，尤其是nodejs的出現之后，更是極大的豐富了js的作業能力，

所以JS也需要進行物件化，

一般來說，在JS中構建物件有三種方式：

• 建構式（constructor）
• 原型鏈（prototype）
• 類(class) —ES6提供

接下來，我們一一來講解，

建構式

建構式是專門用來生成物件的函式，它提供模板，描述物件的基本結構，

一個建構式，可以生成多個物件，這些物件都有相同的結構，建構式的寫法就是一個普通的函式，但是有自己的特征和用法.

var Book  = function () {
    this.name = 'www.flydean.com';
}

Book就是建構式，它提供模板，用來生成實體物件，為了與普通函式區別，建構式名字的第一個字母通常大寫，

建構式的特點

建構式首先是一個函式，也就是說是function開頭的函式，其次函式體內部使用了this關鍵字，代表了所要生成的物件實體，

在使用建構式的時候，必需用new命令，呼叫Book函式，

new命令的作用，就是執行建構式，回傳一個實體物件，

var Book  = function () {
    this.name = 'www.flydean.com';
}

var b1 = new Book();
console.log(b1.name);

上面的例子輸出結果：

www.flydean.com

如果我們忘了使用new，會發生什么情況呢？

var Book  = function () {
    this.name = 'www.flydean.com';
}

var b2 = Book();
console.log(name);
console.log(b2.name);

第一個輸出會輸出www.flydean.com

而第二個則會報一個錯誤：

TypeError: Cannot read property 'name' of undefined

因為這樣呼叫的this指向的是global,所以this.name變成了全域變數，

為了避免這種忘記寫new的問題，可以在第一行加上use strict，在嚴格模式中，函式內部的this不能指向全域物件，默認等于undefined，導致不加new呼叫會報錯，

如果不想使用use strict,則可以在建構式內部判斷是否使用new命令，如果發現沒有使用，則直接回傳一個實體物件，

function Person(firstname,lastname){

    if(!(this instanceof Person)){
        return new Person(firstname,lastname);
    }
    this.firstname= firstname;
    this.firstname = lastname;
}

console.log(Person("jack","ma").firstname);
console.log((new Person("jack","ma")).firstname);

new命令的原理

使用new命令時，它后面的函式呼叫就不是正常的呼叫，而是依次執行下面的步驟:

1. 創建一個空物件，作為將要回傳的物件實體
2. 將這個空物件的原型，指向建構式的prototype屬性
3. 將這個空物件賦值給函式內部的this關鍵字
4. 開始執行建構式內部的代碼

如果建構式內部有return陳述句，而且return后面跟著一個物件，new命令會回傳return陳述句指定的物件；否則，就會不管return陳述句，回傳this物件，

var Book  = function () {
    this.name = 'www.flydean.com';
    return {author:'flydean'};
}

console.log((new Book()).author);

函式內部可以使用new.target屬性，如果當前函式是new命令呼叫，new.target指向當前函式，否則為undefined，

通過new.target我們也可以用來判斷物件是否通過new來創建：

function f(){
    if(! new.target){
        throw new Error('請使用new命令！');
    }
}
f();

建構式作為模板，可以生成實體物件，但是，有時只能拿到實體物件，而該物件根本就不是由建構式生成的，這時可以使用Object.create()方法，直接以某個實體物件作為模板，生成一個新的實體物件，

var book2 = {
    name : '三毛流浪記',
    author : '三毛',
    getName : function () {
        console.log('book name is:' + this.name);
    }
}
var book3 = Object.create(book2);
console.log(book3.name);
book3.getName();

prototype物件

建構式有什么缺點呢？建構式的缺點就是會將建構式內部的物件都復制一份：

function Book(){
    this.name ='www.flydean.com';
    this.getName =function (){
        console.log('flydean');
    }
}

var book1 = new Book();
var book2  = new Book();

console.log(book1.getName  === book2.getName);

輸出結果是 false，說明每次new一個物件，物件中的方法也被拷貝了一份，而這并不是必須的，

JavaScript 的每個物件都繼承另一個物件，后者稱為“原型”（prototype）物件，只有null除外，它沒有自己的原型物件，

原型物件上的所有屬性和方法，都能被派生物件共享，這就是 JavaScript 繼承機制的基本設計，

通過建構式生成實體物件時，會自動為實體物件分配原型物件，每一個建構式都有一個prototype屬性，這個屬性就是實體物件的原型物件，

function Book(name){
    this.name = name;
}

Book.prototype.author ='flydean';
var book1 = new Book();
var book2 = new Book();
console.log(book1.author);
console.log(book2.author);

上面例子中的author屬性會被Book的所有實體所繼承，Book的prototype物件，就是book1和book2的原型物件，

原型物件的屬性不是實體物件自身的屬性，只要修改原型物件，變動就立刻會體現在所有實體物件上，

由于原型本身也是物件，又有自己的原型，所以形成了一條原型鏈（prototype chain），

如果一層層地上溯，所有物件的原型最終都可以上溯到Object.prototype，即Object建構式的prototype屬性指向的那個物件，

Object.prototype物件有沒有它的原型呢？回答可以是有的，就是沒有任何屬性和方法的null物件，而null物件沒有自己的原型，

console.log(Object.getPrototypeOf(Object.prototype));
//null

prototype物件有一個constructor屬性，默認指向prototype物件所在的建構式.

function Book(name){
    this.name = name;
}
var book3 =new Book();
console.log(book3.constructor);
console.log(book3.constructor === Book.prototype.constructor);
console.log(book3.hasOwnProperty(constructor));

還是剛剛的book，book3.constructor就是function Book本身，它也等于Book.prototype.constructor，

constructor屬性的作用，是分辨原型物件到除錯于哪個建構式，

因為prototype是一個物件，所以物件可以被賦值，也就是說prototype可以被改變：

function A(){}
var a = new A();
console.log(a instanceof A);
function B(){}
A.prototype = B.prototype;
console.log(a instanceof A);

上面的例子中，我們修改了A.prototype,最后a instanceof A值是false，

為了保證不會出現這樣錯誤匹配的問題，我們再構建prototype的時候，一定不要直接重寫整個的prototype，只需要修改其中的某個屬性就好：

//不要這樣寫
A.prototype  ={
    method1:function (){}
}

//比較好的寫法
A.prototype  ={
    constructor:A,
    method1:function (){}
}
//更好的寫法
A.prototype.method1 = function (){}

Object的prototype操作

Object.getPrototypeOf

Object.getPrototypeOf方法回傳一個物件的原型，這是獲取原型物件的標準方法.

//空物件的prototype是Object.prototype
console.log(Object.getPrototypeOf({}) === Object.prototype);

//function的prototype是Function.prototype
function f(){}
console.log(Object.getPrototypeOf(f)  === Function.prototype);

function F(){this.name ='flydean'}
var f1 =new F();
console.log(Object.getPrototypeOf(f1) === F.prototype);

var f2 = new f();
console.log(Object.getPrototypeOf(f2) === f.prototype);

上面4個的輸出結果都是true，

Object.setPrototypeOf

Object.setPrototypeOf方法可以為現有物件設定原型，回傳一個新物件，

Object.setPrototypeOf方法接受兩個引數，第一個是現有物件，第二個是原型物件，

var a = {name: 'flydean'};
var b = Object.setPrototypeOf({},a);
console.log(b.name);

Object.prototype.isPrototypeOf()

物件實體的isPrototypeOf方法，用來判斷一個物件是否是另一個物件的原型.

var a = {name: 'flydean'};
var b = Object.setPrototypeOf({},a);
console.log(a.isPrototypeOf(b));

Object.prototype.proto

__proto__屬性（前后各兩個下劃線）可以改寫某個物件的原型物件，

還是剛才的例子，這次我們使用__proto__來改寫物件的原型，

var a = {name: 'flydean'};

var c ={};
c.__proto__ = a;
console.log(Object.getPrototypeOf(c));

__proto__屬性只有瀏覽器才需要部署，其他環境可以沒有這個屬性，而且前后的兩根下劃線，表示它本質是一個內部屬性，不應該對使用者暴露，

因此，應該盡量少用這個屬性，而是用Object.getPrototypeof()（讀取）和Object.setPrototypeOf()（設定），進行原型物件的讀寫操作，

三種獲取原型物件的方法

綜上，我們有三種獲取原型物件的方法：

• obj.proto
• obj.constructor.prototype
• Object.getPrototypeOf(obj)

this物件

this總是回傳一個物件，簡單說，就是回傳屬性或方法“當前”所在的物件，

var book = {
    name :'flydean',
    getName : function (){
        return '書名：'+ this.name;
    }
}

console.log(book.getName());
//書名：flydean

這里this的指向是可變的，我們看一個例子 ：

var book = {
    name :'flydean',
    getName : function (){
        return '書名：'+ this.name;
    }
}

var car ={
    name :'car'
}

car.getName = book.getName;
console.log(car.getName());
//書名：car

當 A 物件的方法被賦予 B 物件，該方法中的this就從指向 A 物件變成了指向 B 物件

上面的例子中，我們把book中的getName方法賦值給了car物件，this物件現在就指向了car，

如果某個方法位于多層物件的內部，這時this只是指向當前一層的物件，而不會繼承更上面的層，

var book1 = {
    name :'flydean',
    book2: {
        getName : function (){
            return '書名：'+ this.name;
        }
    }
}
console.log(book1.book2.getName());
//書名：undefined

上面的例子中，this是定義在物件中的函式中，如果是在函式中的函式中定義的this，代表什么呢？

var book3 = {
    name :'flydean',
    book4: function(){
        console.log('book4');
        var getName = function (){
            console.log(this); //Window
        }();
    }
}
book3.book4();

如果在函式中的函式中使用了this，那么內層的this指向的是全域的window物件，

所以我們在使用的程序中要避免多層 this，由于this的指向是不確定的，所以切勿在函式中包含多層的this，

如果在全域環境使用this，它指的就是頂層物件window，

陣列的map和foreach方法，允許提供一個函式作為引數，這個函式內部不應該使用this，

var book5 ={
    name : 'flydean',
    author : ['max','jacken'],
    f: function (){
        this.author.forEach(function (item) {
            console.log(this.name+' '+item);
        })
    }
}
book5.f();
//undefined max
//undefined jacken

foreach方法的回呼函式中的this，其實是指向window物件，因此取不到o.v的值，原因跟上一段的多層this是一樣的，就是內層的this不指向外部，而指向頂層物件，

怎么解決呢？我們使用一個中間變數：

var book6 ={
    name : 'flydean',
    author : ['max','jacken'],
    f: function (){
        var that = this;
        this.author.forEach(function (item) {
            console.log(that.name+' '+item);
        })
    }
}
book6.f();
//flydean max
//flydean jacken

或者將this當作foreach方法的第二個引數，固定它的運行環境：

var book7 ={
    name : 'flydean',
    author : ['max','jacken'],
    f: function (){
        this.author.forEach(function (item) {
            console.log(this.name+' '+item);
        },this)
    }
}
book7.f();
//flydean max
//flydean jacken

系結this的方法

JavaScript提供了call、apply、bind這三個方法，來切換/固定this的指向.

call

函式實體的call方法，可以指定函式內部this的指向（即函式執行時所在的作用域），然后在所指定的作用域中，呼叫該函式.

var book = {};

var f = function () {
    return this;
}
f()  === this ; //true
f.call(book) === book; //true

上面例子中，如果直接呼叫f(),那么回傳的就是全域的window物件，如果傳入book物件，那么回傳的就是book物件，

call方法的引數，應該是一個物件，如果引數為空、null和undefined，則默認傳入全域物件，

如果call方法的引數是一個原始值，那么這個原始值會自動轉成對應的包裝物件，然后傳入call方法，

var f = function () {
    return this;
}

console.log(f.call(100));
//[Number: 100]

call方法還可以接受多個引數.

func.call(thisValue,arg1,arg2, ...);

call的第一個引數就是this所要指向的那個物件，后面的引數則是函式呼叫時所需的引數，

call一般用在呼叫物件的原始方法：

var person =  {};

person.hasOwnProperty('getName');//false

//覆寫person的getName方法
person.getName  = function(){
    return true;
}

person.hasOwnProperty('getName');//true
Object.prototype.hasOwnProperty.call(person,'getName');//false

apply

apply方法的作用與call方法類似，也是改變this指向，然后再呼叫該函式，唯一的區別就是，它接收一個陣列作為函式執行時的引數.

func.apply(thisValue,[arg1,arg2,...])

bind

call和apply是改變this的指向，然后呼叫該函式，而bind方法用于將函式體內的this系結到某個物件，然后回傳一個新函式.

var d = new Date();

console.log(d.getTime()); //1600755862787

var getTime= d.getTime;
console.log(getTime());//TypeError: this is not a Date object.

上面的例子中，getTime方法里面呼叫了this，如果直接把d.getTime賦值給getTime變數，那么this將會指向全域的window物件，導致運行錯誤，

我們可以這樣修改：

var d = new Date();

console.log(d.getTime()); //1600755862787

var getTime2= d.getTime.bind(d);
console.log(getTime2());

bind比call方法和apply方法更進一步的是，除了系結this以外，還可以系結原函式的引數，

var add = function(x,y){
    return x +this.m +  y + this.n;
}
var addObj ={
    m: 10,
    n: 10
}

var newAdd = add.bind(addObj,2);
console.log(newAdd(3));//25

上面的例子中，bind將兩個引數的add方法，替換成了1個引數的add方法，

注意，bind每次呼叫都會回傳一個新的函式，從而導致無法取消之前的系結，

繼承

建構式的繼承

建構式的繼承第一步是在子類的建構式中，呼叫父類的建構式,讓子類實體具有父類實體的屬性，

然后讓子類的原型指向父類的原型，這樣子類就可以繼承父類原型，

function Person (){
    this.name = 'person';
}

function Boy(){
    Person.call(this);
    this.title = 'boy';
}

Boy.prototype= Object.create(Person.prototype);
Boy.prototype.constructor=Boy;
Boy.prototype.getTitle=function (){console.log(this.title)};

var b =new Boy();
b.getTitle();
console.log(b);
~~

呼叫父類的建構式是初始化實體物件的屬性，子類的原型指向父類的原型是為了基礎父類的原型物件的屬性，

另外一種寫法是Boy.prototype等于一個父類實體：

~~~js
Boy.prototype = new Person();

上面這種寫法也有繼承的效果，但是子類會具有父類實體的方法，有時，這可能不是我們需要的，所以不推薦使用這種寫法.

JavaScript 不提供多重繼承功能，即不允許一個物件同時繼承多個物件，但是，可以通過變通方法，實作這個功能:

function Person1 (){
    this.name = 'person';
}
function Person2 (){
    this.sex = '男';
}

function Boy(){
    Person1.call(this);
    Person2.call(this);
    this.title = 'boy';
}

//繼承Person1
Boy.prototype= Object.create(Person1.prototype);
//繼承鏈加上Person2
Object.assign(Boy.prototype,Person2.prototype);

Boy.prototype.constructor=Boy;
Boy.prototype.getTitle=function (){console.log(this.title)};

var b =new Boy();
b.getTitle();
console.log(b);
//Boy { name: 'person', sex: '男', title: 'boy' }

class

ES6 的class可以看作只是一個語法糖，它的絕大部分功能，ES5 都可以做到，新的class寫法只是讓物件原型的寫法更加清晰、更像面向物件編程的語法而已.

class Person {
    constructor(name,sex) {
        this.name=name;
        this.sex =sex;
    }

    toString(){
        return this.name + ' '+ this.sex;
    }
}

建構式的prototype屬性，在ES6 的“類”上面繼續存在，事實上，類的所有方法都定義在類的prototype屬性上面，

上面的類等同于：

Person.prototype = {
       constructor(name,sex) {
        this.name=name;
        this.sex =sex;
    }

    toString(){
        return this.name + ' '+ this.sex;
    } 
}

運算式屬性名

class還支持動態的運算式屬性名：

let methodName = 'getName';

class Person {
    constructor(name,sex) {
        this.name=name;
        this.sex =sex;
    }

    toString(){
        return this.name + ' '+ this.sex;
    }

    [methodName](){
        return this.name;
    }
}

靜態方法

類相當于實體的原型，所有在類中定義的方法，都會被實體繼承，如果在一個方法前，加上static關鍵字，就表示該方法不會被實體繼承，而是直接通過類來呼叫，這就稱為“靜態方法”，

class Person {
    constructor(name,sex) {
        this.name=name;
        this.sex =sex;
    }

    static getSex(){
        return '男';
    }
}

console.log(Person.getSex()); //男

let  p  = new Person();
console.log(p.getSex());//TypeError: p.getSex is not a function

靜態屬性

靜態屬性指的是 Class 本身的屬性，即Class.propName，而不是定義在實體物件（this）上的屬性.

class Person {
    constructor(name,sex) {
        this.name=name;
        this.sex =sex;
    }
}
Person.address ='address';
console.log(Person.address);

目前，只有這種寫法可行，因為 ES6 明確規定，Class 內部只有靜態方法，沒有靜態屬性.

class的繼承

class的繼承一般使用extends關鍵字：

class Boy extends Person{
    constructor(name,sex,address) {
        super(name,sex); //呼叫父類的建構式
        this.address =address;
    }

    toString() {
        return super.toString();//呼叫父類的方法
    }
}

在子類的建構式中，只有呼叫super之后，才可以使用this關鍵字，否則會報錯，這是因為子類實體的構建，是基于對父類實體加工，只有super方法才能回傳父類實體，

super作為函式呼叫時，代表父類的建構式，ES6 要求，子類的建構式必須執行一次super函式，

super作為物件時，在普通方法中，指向父類的原型物件；在靜態方法中，指向父類，

上面的例子，我們在子類Boy中的toString普通方法中，呼叫了super.toString(),之前我們也講了，類的所有方法都定義在類的prototype屬性上面，所以super.toString就是Person中定義的toString方法，

由于super指向父類的原型物件，所以定義在父類實體上的方法或屬性，是無法通過super呼叫的，

定義在父類實體上的方法或屬性就是指在constructor中定義的方法或者屬性，

Person類，在constructor中定義了name屬性，我們看一下在Boy中的普通方法中訪問會有什么問題：

class Boy extends Person{
    constructor(name,sex,address) {
        super(name,sex); //呼叫父類的建構式
        console.log(super.name);  //undefined
        console.log(this.name);  //hanmeimei
        this.address =address;
    }

    toString() {
        return super.toString();//呼叫父類的方法
    }

    getName(){
        console.log(super.name);  //undefined
        console.log(this.name);    //hanmeimei
    }
}

var b =new Boy('hanmeimei','女','北京');
b.getName();

總結

JS中的面向物件主要有建構式，原型鏈，類三種方式，希望大家能夠喜歡，

本文作者：flydean程式那些事

本文鏈接：http://www.flydean.com/object-oriented-js/

本文來源：flydean的博客

歡迎關注我的公眾號:「程式那些事」最通俗的解讀，最深刻的干貨，最簡潔的教程，眾多你不知道的小技巧等你來發現！