簡(jiǎn)介

本將會(huì)深入講解面向?qū)ο笤趈avascript中的應(yīng)用，并詳細(xì)介紹三種對(duì)象的生成方式：構(gòu)造函數(shù)，原型鏈，類。

什么是對(duì)象

雖然說(shuō)程序員不缺對(duì)象，隨時(shí)隨地都可以new一個(gè)出來(lái)，但是在程序的世界中，對(duì)象到底是什么呢？

對(duì)象是單個(gè)實(shí)物的抽象。

對(duì)象是一個(gè)容器，封裝了屬性（property）和方法（method）。

而面向?qū)ο笫窍鄬?duì)于面向過(guò)程來(lái)講的，面向?qū)ο蠓椒ǎ严嚓P(guān)的數(shù)據(jù)和方法組織為一個(gè)整體來(lái)看待，從更高的層次來(lái)進(jìn)行系統(tǒng)建模，更貼近事物的自然運(yùn)行模式。

面向?qū)ο蟮暮锰幘褪强沙橄?，封裝和可重用性，同時(shí)提供了繼承和多態(tài)等非常有用的特性。

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

所以JS也需要進(jìn)行對(duì)象化。

一般來(lái)說(shuō)，在JS中構(gòu)建對(duì)象有三種方式：

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

接下來(lái)，我們一一來(lái)講解。

構(gòu)造函數(shù)

構(gòu)造函數(shù)是專門用來(lái)生成對(duì)象的函數(shù)。它提供模板，描述對(duì)象的基本結(jié)構(gòu)。

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

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

構(gòu)造函數(shù)的特點(diǎn)

構(gòu)造函數(shù)首先是一個(gè)函數(shù)，也就是說(shuō)是function開(kāi)頭的函數(shù)。其次函數(shù)體內(nèi)部使用了this關(guān)鍵字，代表了所要生成的對(duì)象實(shí)例。

在使用構(gòu)造函數(shù)的時(shí)候，必需用new命令，調(diào)用Book函數(shù)。

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

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

上面的例子輸出結(jié)果：

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

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

第一個(gè)輸出會(huì)輸出www.flydean.com

而第二個(gè)則會(huì)報(bào)一個(gè)錯(cuò)誤：

因?yàn)檫@樣調(diào)用的this指向的是global,所以this.name變成了全局變量。

為了避免這種忘記寫new的問(wèn)題，可以在第一行加上use strict，在嚴(yán)格模式中，函數(shù)內(nèi)部的this不能指向全局對(duì)象，默認(rèn)等于undefined，導(dǎo)致不加new調(diào)用會(huì)報(bào)錯(cuò)。

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

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

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

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

函數(shù)內(nèi)部可以使用new.target屬性。如果當(dāng)前函數(shù)是new命令調(diào)用，new.target指向當(dāng)前函數(shù)，否則為undefined。

通過(guò)new.target我們也可以用來(lái)判斷對(duì)象是否通過(guò)new來(lái)創(chuàng)建：

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

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

prototype對(duì)象

構(gòu)造函數(shù)有什么缺點(diǎn)呢？構(gòu)造函數(shù)的缺點(diǎn)就是會(huì)將構(gòu)造函數(shù)內(nèi)部的對(duì)象都復(fù)制一份：

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);

輸出結(jié)果是 false。說(shuō)明每次new一個(gè)對(duì)象，對(duì)象中的方法也被拷貝了一份。而這并不是必須的。

JavaScript 的每個(gè)對(duì)象都繼承另一個(gè)對(duì)象，后者稱為“原型”（prototype）對(duì)象。只有null除外，它沒(méi)有自己的原型對(duì)象。

原型對(duì)象上的所有屬性和方法，都能被派生對(duì)象共享。這就是 JavaScript 繼承機(jī)制的基本設(shè)計(jì)。

通過(guò)構(gòu)造函數(shù)生成實(shí)例對(duì)象時(shí)，會(huì)自動(dòng)為實(shí)例對(duì)象分配原型對(duì)象。每一個(gè)構(gòu)造函數(shù)都有一個(gè)prototype屬性，這個(gè)屬性就是實(shí)例對(duì)象的原型對(duì)象。

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

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

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

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

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

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

prototype對(duì)象有一個(gè)constructor屬性，默認(rèn)指向prototype對(duì)象所在的構(gòu)造函數(shù).

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

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

因?yàn)閜rototype是一個(gè)對(duì)象，所以對(duì)象可以被賦值，也就是說(shuō)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。

為了保證不會(huì)出現(xiàn)這樣錯(cuò)誤匹配的問(wèn)題，我們?cè)贅?gòu)建prototype的時(shí)候，一定不要直接重寫整個(gè)的prototype，只需要修改其中的某個(gè)屬性就好：

Object的prototype操作

Object.getPrototypeOf

Object.getPrototypeOf方法返回一個(gè)對(duì)象的原型。這是獲取原型對(duì)象的標(biāo)準(zhǔn)方法.

//空對(duì)象的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個(gè)的輸出結(jié)果都是true。

Object.setPrototypeOf

Object.setPrototypeOf方法可以為現(xiàn)有對(duì)象設(shè)置原型，返回一個(gè)新對(duì)象。

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

Object.prototype.isPrototypeOf()

對(duì)象實(shí)例的isPrototypeOf方法，用來(lái)判斷一個(gè)對(duì)象是否是另一個(gè)對(duì)象的原型.

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

Object.prototype.proto

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

還是剛才的例子，這次我們使用proto來(lái)改寫對(duì)象的原型。

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

因此，應(yīng)該盡量少用這個(gè)屬性，而是用Object.getPrototypeof()（讀?。┖蚈bject.setPrototypeOf()（設(shè)置），進(jìn)行原型對(duì)象的讀寫操作。

三種獲取原型對(duì)象的方法

綜上，我們有三種獲取原型對(duì)象的方法：

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

this對(duì)象

this總是返回一個(gè)對(duì)象，簡(jiǎn)單說(shuō)，就是返回屬性或方法“當(dāng)前”所在的對(duì)象。

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

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

當(dāng) A 對(duì)象的方法被賦予 B 對(duì)象，該方法中的this就從指向 A 對(duì)象變成了指向 B 對(duì)象

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

如果某個(gè)方法位于多層對(duì)象的內(nèi)部，這時(shí)this只是指向當(dāng)前一層的對(duì)象，而不會(huì)繼承更上面的層。

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

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

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

所以我們?cè)谑褂玫倪^(guò)程中要避免多層 this。由于this的指向是不確定的，所以切勿在函數(shù)中包含多層的this。

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

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

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

或者將this當(dāng)作foreach方法的第二個(gè)參數(shù)，固定它的運(yùn)行環(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這三個(gè)方法，來(lái)切換/固定this的指向.

call

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

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

call方法的參數(shù)，應(yīng)該是一個(gè)對(duì)象。如果參數(shù)為空、null和undefined，則默認(rèn)傳入全局對(duì)象。

如果call方法的參數(shù)是一個(gè)原始值，那么這個(gè)原始值會(huì)自動(dòng)轉(zhuǎn)成對(duì)應(yīng)的包裝對(duì)象，然后傳入call方法。

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

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

call的第一個(gè)參數(shù)就是this所要指向的那個(gè)對(duì)象，后面的參數(shù)則是函數(shù)調(diào)用時(shí)所需的參數(shù)。

call一般用在調(diào)用對(duì)象的原始方法：

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指向，然后再調(diào)用該函數(shù)。唯一的區(qū)別就是，它接收一個(gè)數(shù)組作為函數(shù)執(zhí)行時(shí)的參數(shù).

bind

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

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

上面的例子中，getTime方法里面調(diào)用了this，如果直接把d.getTime賦值給getTime變量，那么this將會(huì)指向全局的window對(duì)象，導(dǎo)致運(yùn)行錯(cuò)誤。

我們可以這樣修改：

bind比call方法和apply方法更進(jìn)一步的是，除了綁定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將兩個(gè)參數(shù)的add方法，替換成了1個(gè)參數(shù)的add方法。

注意，bind每次調(diào)用都會(huì)返回一個(gè)新的函數(shù)，從而導(dǎo)致無(wú)法取消之前的綁定。

繼承

構(gòu)造函數(shù)的繼承

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

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

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

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

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可以看作只是一個(gè)語(yǔ)法糖，它的絕大部分功能，ES5 都可以做到，新的class寫法只是讓對(duì)象原型的寫法更加清晰、更像面向?qū)ο缶幊痰恼Z(yǔ)法而已.

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

上面的類等同于：

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

表達(dá)式屬性名

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

靜態(tài)方法

類相當(dāng)于實(shí)例的原型，所有在類中定義的方法，都會(huì)被實(shí)例繼承。如果在一個(gè)方法前，加上static關(guān)鍵字，就表示該方法不會(huì)被實(shí)例繼承，而是直接通過(guò)類來(lái)調(diào)用，這就稱為“靜態(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，而不是定義在實(shí)例對(duì)象（this）上的屬性.

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

class的繼承

class的繼承一般使用extends關(guān)鍵字：

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

在子類的構(gòu)造函數(shù)中，只有調(diào)用super之后，才可以使用this關(guān)鍵字，否則會(huì)報(bào)錯(cuò)。這是因?yàn)樽宇悓?shí)例的構(gòu)建，是基于對(duì)父類實(shí)例加工，只有super方法才能返回父類實(shí)例。

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

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

上面的例子，我們?cè)谧宇怋oy中的toString普通方法中，調(diào)用了super.toString(),之前我們也講了，類的所有方法都定義在類的prototype屬性上面。所以super.toString就是Person中定義的toString方法。

由于super指向父類的原型對(duì)象，所以定義在父類實(shí)例上的方法或?qū)傩?，是無(wú)法通過(guò)super調(diào)用的。

定義在父類實(shí)例上的方法或?qū)傩跃褪侵冈赾onstructor中定義的方法或者屬性。

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

總結(jié)

JS中的面向?qū)ο笾饕袠?gòu)造函數(shù)，原型鏈，類三種方式，希望大家能夠喜歡。