簡介

本將會深入講解面向對象在javascript中的應用，并詳細介紹三種對象的生成方式：構造函數(shù)，原型鏈，類。

什么是對象

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

對象是單個實物的抽象。

對象是一個容器，封裝了屬性（property）和方法（method）。

而面向對象是相對于面向過程來講的，面向對象方法，把相關的數(shù)據(jù)和方法組織為一個整體來看待，從更高的層次來進行系統(tǒng)建模，更貼近事物的自然運行模式。

面向對象的好處就是可抽象，封裝和可重用性，同時提供了繼承和多態(tài)等非常有用的特性。

而隨著JS的發(fā)展，已經(jīng)超越了最開始的腳本語言，尤其是nodejs的出現(xiàn)之后，更是極大的豐富了js的工作能力。

所以JS也需要進行對象化。

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

• 構造函數(shù)（constructor）
• 原型鏈（prototype）
• 類(class) —ES6提供

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

構造函數(shù)

構造函數(shù)是專門用來生成對象的函數(shù)。它提供模板，描述對象的基本結構。

一個構造函數(shù)，可以生成多個對象，這些對象都有相同的結構。構造函數(shù)的寫法就是一個普通的函數(shù)，但是有自己的特征和用法.

Book就是構造函數(shù)，它提供模板，用來生成實例對象。為了與普通函數(shù)區(qū)別，構造函數(shù)名字的第一個字母通常大寫。

構造函數(shù)的特點

構造函數(shù)首先是一個函數(shù)，也就是說是function開頭的函數(shù)。其次函數(shù)體內部使用了this關鍵字，代表了所要生成的對象實例。

在使用構造函數(shù)的時候，必需用new命令，調用Book函數(shù)。

new命令的作用，就是執(zhí)行構造函數(shù)，返回一個實例對象。

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

上面的例子輸出結果：

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

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

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

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

因為這樣調用的this指向的是global,所以this.name變成了全局變量。

為了避免這種忘記寫new的問題，可以在第一行加上use strict，在嚴格模式中，函數(shù)內部的this不能指向全局對象，默認等于undefined，導致不加new調用會報錯。

如果不想使用use strict,則可以在構造函數(shù)內部判斷是否使用new命令，如果發(fā)現(xiàn)沒有使用，則直接返回一個實例對象。

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命令時，它后面的函數(shù)調用就不是正常的調用，而是依次執(zhí)行下面的步驟:

1. 創(chuàng)建一個空對象，作為將要返回的對象實例
2. 將這個空對象的原型，指向構造函數(shù)的prototype屬性
3. 將這個空對象賦值給函數(shù)內部的this關鍵字
4. 開始執(zhí)行構造函數(shù)內部的代碼

如果構造函數(shù)內部有return語句，而且return后面跟著一個對象，new命令會返回return語句指定的對象；否則，就會不管return語句，返回this對象。

函數(shù)內部可以使用new.target屬性。如果當前函數(shù)是new命令調用，new.target指向當前函數(shù)，否則為undefined。

通過new.target我們也可以用來判斷對象是否通過new來創(chuàng)建：

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

構造函數(shù)作為模板，可以生成實例對象。但是，有時只能拿到實例對象，而該對象根本就不是由構造函數(shù)生成的，這時可以使用Object.create()方法，直接以某個實例對象作為模板，生成一個新的實例對象。

prototype對象

構造函數(shù)有什么缺點呢？構造函數(shù)的缺點就是會將構造函數(shù)內部的對象都復制一份：

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 繼承機制的基本設計。

通過構造函數(shù)生成實例對象時，會自動為實例對象分配原型對象。每一個構造函數(shù)都有一個prototype屬性，這個屬性就是實例對象的原型對象。

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

原型對象的屬性不是實例對象自身的屬性。只要修改原型對象，變動就立刻會體現(xiàn)在所有實例對象上。

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

如果一層層地上溯，所有對象的原型最終都可以上溯到Object.prototype，即Object構造函數(shù)的prototype屬性指向的那個對象。

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

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

prototype對象有一個constructor屬性，默認指向prototype對象所在的構造函數(shù).

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

constructor屬性的作用，是分辨原型對象到底屬于哪個構造函數(shù)。

因為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。

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

Object的prototype操作

Object.getPrototypeOf

Object.getPrototypeOf方法返回一個對象的原型。這是獲取原型對象的標準方法.

//空對象的prototype是Object.prototypeconsole.log(Object.getPrototypeOf({}) === Object.prototype);//function的prototype是Function.prototypefunction 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方法可以為現(xiàn)有對象設置原型，返回一個新對象。

Object.setPrototypeOf方法接受兩個參數(shù)，第一個是現(xiàn)有對象，第二個是原型對象。

Object.prototype.isPrototypeOf()

對象實例的isPrototypeOf方法，用來判斷一個對象是否是另一個對象的原型.

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

Object.prototype.proto

proto屬性（前后各兩個下劃線）可以改寫某個對象的原型對象。

還是剛才的例子，這次我們使用proto來改寫對象的原型。

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

因此，應該盡量少用這個屬性，而是用Object.getPrototypeof()（讀?。┖蚈bject.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的指向是可變的，我們看一個例子 ：

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

上面的例子中，我們把book中的getName方法賦值給了car對象，this對象現(xiàn)在就指向了car。

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

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

上面的例子中，this是定義在對象中的函數(shù)中，如果是在函數(shù)中的函數(shù)中定義的this，代表什么呢？

如果在函數(shù)中的函數(shù)中使用了this，那么內層的this指向的是全局的window對象。

所以我們在使用的過程中要避免多層 this。由于this的指向是不確定的，所以切勿在函數(shù)中包含多層的this。

如果在全局環(huán)境使用this，它指的就是頂層對象window。

數(shù)組的map和foreach方法，允許提供一個函數(shù)作為參數(shù)。這個函數(shù)內部不應該使用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方法的回調函數(shù)中的this，其實是指向window對象，因此取不到o.v的值。原因跟上一段的多層this是一樣的，就是內層的this不指向外部，而指向頂層對象。

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

或者將this當作foreach方法的第二個參數(shù)，固定它的運行環(huán)境：

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

函數(shù)實例的call方法，可以指定函數(shù)內部this的指向（即函數(shù)執(zhí)行時所在的作用域），然后在所指定的作用域中，調用該函數(shù).

上面例子中，如果直接調用f(),那么返回的就是全局的window對象。如果傳入book對象，那么返回的就是book對象。

call方法的參數(shù)，應該是一個對象。如果參數(shù)為空、null和undefined，則默認傳入全局對象。

如果call方法的參數(shù)是一個原始值，那么這個原始值會自動轉成對應的包裝對象，然后傳入call方法。

var f = function () {    return this;}console.log(f.call(100));//[Number: 100]

call方法還可以接受多個參數(shù).

call的第一個參數(shù)就是this所要指向的那個對象，后面的參數(shù)則是函數(shù)調用時所需的參數(shù)。

call一般用在調用對象的原始方法：

var person =  {};person.hasOwnProperty('getName');//false//覆蓋person的getName方法person.getName  = function(){    return true;}person.hasOwnProperty('getName');//trueObject.prototype.hasOwnProperty.call(person,'getName');//false

apply

apply方法的作用與call方法類似，也是改變this指向，然后再調用該函數(shù)。唯一的區(qū)別就是，它接收一個數(shù)組作為函數(shù)執(zhí)行時的參數(shù).

bind

call和apply是改變this的指向，然后調用該函數(shù)，而bind方法用于將函數(shù)體內的this綁定到某個對象，然后返回一個新函數(shù).

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

上面的例子中，getTime方法里面調用了this，如果直接把d.getTime賦值給getTime變量，那么this將會指向全局的window對象，導致運行錯誤。

我們可以這樣修改：

bind比call方法和apply方法更進一步的是，除了綁定this以外，還可以綁定原函數(shù)的參數(shù)。

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將兩個參數(shù)的add方法，替換成了1個參數(shù)的add方法。

注意，bind每次調用都會返回一個新的函數(shù)，從而導致無法取消之前的綁定。

繼承

構造函數(shù)的繼承

構造函數(shù)的繼承第一步是在子類的構造函數(shù)中，調用父類的構造函數(shù),讓子類實例具有父類實例的屬性。

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

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

JavaScript 不提供多重繼承功能，即不允許一個對象同時繼承多個對象。但是，可以通過變通方法，實現(xiàn)這個功能:

function Person1 (){    this.name = 'person';}function Person2 (){    this.sex = '男';}function Boy(){    Person1.call(this);    Person2.call(this);    this.title = 'boy';}//繼承Person1Boy.prototype= Object.create(Person1.prototype);//繼承鏈加上Person2Object.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寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法而已.

構造函數(shù)的prototype屬性，在ES6 的“類”上面繼續(xù)存在。事實上，類的所有方法都定義在類的prototype屬性上面。

上面的類等同于：

Person.prototype = {       constructor(name,sex) {        this.name=name;        this.sex =sex;    }    toString(){        return this.name + ' '+ this.sex;    } }

表達式屬性名

class還支持動態(tài)的表達式屬性名：

靜態(tài)方法

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

class Person {    constructor(name,sex) {        this.name=name;        this.sex =sex;    }    static getSex(){        return '男';    }}console.log(Person.getSex()); //男l(wèi)et  p  = new Person();console.log(p.getSex());//TypeError: p.getSex is not a function

靜態(tài)屬性

靜態(tài)屬性指的是 Class 本身的屬性，即Class.propName，而不是定義在實例對象（this）上的屬性.

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

class的繼承

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

class Boy extends Person{    constructor(name,sex,address) {        super(name,sex); //調用父類的構造函數(shù)        this.address =address;    }    toString() {        return super.toString();//調用父類的方法    }}

在子類的構造函數(shù)中，只有調用super之后，才可以使用this關鍵字，否則會報錯。這是因為子類實例的構建，是基于對父類實例加工，只有super方法才能返回父類實例。

super作為函數(shù)調用時，代表父類的構造函數(shù)。ES6 要求，子類的構造函數(shù)必須執(zhí)行一次super函數(shù)。

super作為對象時，在普通方法中，指向父類的原型對象；在靜態(tài)方法中，指向父類。

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

由于super指向父類的原型對象，所以定義在父類實例上的方法或屬性，是無法通過super調用的。

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

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

總結

JS中的面向對象主要有構造函數(shù)，原型鏈，類三種方式，希望大家能夠喜歡。