本將會(huì )深入講解面向對象在javascript中的應用，并詳細介紹三種對象的生成方式：構造函數，原型鏈，類(lèi)。
雖然說(shuō)程序員不缺對象，隨時(shí)隨地都可以new一個(gè)出來(lái)，但是在程序的世界中，對象到底是什么呢？
對象是單個(gè)實(shí)物的抽象。
對象是一個(gè)容器，封裝了屬性（property）和方法（method）。
而面向對象是相對于面向過(guò)程來(lái)講的，面向對象方法，把相關(guān)的數據和方法組織為一個(gè)整體來(lái)看待，從更高的層次來(lái)進(jìn)行系統建模，更貼近事物的自然運行模式。
面向對象的好處就是可抽象，封裝和可重用性，同時(shí)提供了繼承和多態(tài)等非常有用的特性。
而隨著(zhù)JS的發(fā)展，已經(jīng)超越了最開(kāi)始的腳本語(yǔ)言，尤其是nodejs的出現之后，更是極大的豐富了js的工作能力。
所以JS也需要進(jìn)行對象化。
一般來(lái)說(shuō)，在JS中構建對象有三種方式：
接下來(lái)，我們一一來(lái)講解。
構造函數是專(zhuān)門(mén)用來(lái)生成對象的函數。它提供模板，描述對象的基本結構。
一個(gè)構造函數，可以生成多個(gè)對象，這些對象都有相同的結構。構造函數的寫(xiě)法就是一個(gè)普通的函數，但是有自己的特征和用法.
var Book = function () { this.name = 'www.flydean.com';}Book就是構造函數，它提供模板，用來(lái)生成實(shí)例對象。為了與普通函數區別，構造函數名字的第一個(gè)字母通常大寫(xiě)。
構造函數首先是一個(gè)函數，也就是說(shuō)是function開(kāi)頭的函數。其次函數體內部使用了this關(guān)鍵字，代表了所要生成的對象實(shí)例。
在使用構造函數的時(shí)候，必需用new命令，調用Book函數。
new命令的作用，就是執行構造函數，返回一個(gè)實(shí)例對象。
var Book = function () { this.name = 'www.flydean.com';}var b1 = new Book();console.log(b1.name);上面的例子輸出結果：
www.flydean.com如果我們忘了使用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ì )報一個(gè)錯誤：
TypeError: Cannot read property 'name' of undefined因為這樣調用的this指向的是global,所以this.name變成了全局變量。
為了避免這種忘記寫(xiě)new的問(wèn)題，可以在第一行加上use strict，在嚴格模式中，函數內部的this不能指向全局對象，默認等于undefined，導致不加new調用會(huì )報錯。
如果不想使用use strict,則可以在構造函數內部判斷是否使用new命令，如果發(fā)現沒(méi)有使用，則直接返回一個(gè)實(shí)例對象。
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命令時(shí)，它后面的函數調用就不是正常的調用，而是依次執行下面的步驟:
如果構造函數內部有return語(yǔ)句，而且return后面跟著(zhù)一個(gè)對象，new命令會(huì )返回return語(yǔ)句指定的對象；否則，就會(huì )不管return語(yǔ)句，返回this對象。
var Book = function () { this.name = 'www.flydean.com'; return {author:'flydean'};}console.log((new Book()).author);函數內部可以使用new.target屬性。如果當前函數是new命令調用，new.target指向當前函數，否則為undefined。
通過(guò)new.target我們也可以用來(lái)判斷對象是否通過(guò)new來(lái)創(chuàng )建：
function f(){ if(! new.target){ throw new Error('請使用new命令！'); }}f();構造函數作為模板，可以生成實(shí)例對象。但是，有時(shí)只能拿到實(shí)例對象，而該對象根本就不是由構造函數生成的，這時(shí)可以使用Object.create()方法，直接以某個(gè)實(shí)例對象作為模板，生成一個(gè)新的實(shí)例對象。
var book2 = { name : '三毛流浪記', author : '三毛', getName : function () { console.log('book name is:' + this.name); }}var book3 = Object.create(book2);console.log(book3.name);book3.getName();構造函數有什么缺點(diǎn)呢？構造函數的缺點(diǎn)就是會(huì )將構造函數內部的對象都復制一份：
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。說(shuō)明每次new一個(gè)對象，對象中的方法也被拷貝了一份。而這并不是必須的。
JavaScript 的每個(gè)對象都繼承另一個(gè)對象，后者稱(chēng)為“原型”（prototype）對象。只有null除外，它沒(méi)有自己的原型對象。
原型對象上的所有屬性和方法，都能被派生對象共享。這就是 JavaScript 繼承機制的基本設計。
通過(guò)構造函數生成實(shí)例對象時(shí)，會(huì )自動(dòng)為實(shí)例對象分配原型對象。每一個(gè)構造函數都有一個(gè)prototype屬性，這個(gè)屬性就是實(shí)例對象的原型對象。
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屬性會(huì )被Book的所有實(shí)例所繼承，Book的prototype對象，就是book1和book2的原型對象。
原型對象的屬性不是實(shí)例對象自身的屬性。只要修改原型對象，變動(dòng)就立刻會(huì )體現在所有實(shí)例對象上。
由于原型本身也是對象，又有自己的原型，所以形成了一條原型鏈（prototype chain）。
如果一層層地上溯，所有對象的原型最終都可以上溯到Object.prototype，即Object構造函數的prototype屬性指向的那個(gè)對象。
Object.prototype對象有沒(méi)有它的原型呢？回答可以是有的，就是沒(méi)有任何屬性和方法的null對象，而null對象沒(méi)有自己的原型。
console.log(Object.getPrototypeOf(Object.prototype));//nullprototype對象有一個(gè)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屬性的作用，是分辨原型對象到底屬于哪個(gè)構造函數。
因為prototype是一個(gè)對象，所以對象可以被賦值，也就是說(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ì )出現這樣錯誤匹配的問(wèn)題，我們再構建prototype的時(shí)候，一定不要直接重寫(xiě)整個(gè)的prototype，只需要修改其中的某個(gè)屬性就好：
//不要這樣寫(xiě)A.prototype ={ method1:function (){}}//比較好的寫(xiě)法A.prototype ={ constructor:A, method1:function (){}}//更好的寫(xiě)法A.prototype.method1 = function (){}Object.getPrototypeOf方法返回一個(gè)對象的原型。這是獲取原型對象的標準方法.
//空對象的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è)的輸出結果都是true。
Object.setPrototypeOf方法可以為現有對象設置原型，返回一個(gè)新對象。
Object.setPrototypeOf方法接受兩個(gè)參數，第一個(gè)是現有對象，第二個(gè)是原型對象。
var a = {name: 'flydean'};var b = Object.setPrototypeOf({},a);console.log(b.name);對象實(shí)例的isPrototypeOf方法，用來(lái)判斷一個(gè)對象是否是另一個(gè)對象的原型.
var a = {name: 'flydean'};var b = Object.setPrototypeOf({},a);console.log(a.isPrototypeOf(b));proto屬性（前后各兩個(gè)下劃線(xiàn)）可以改寫(xiě)某個(gè)對象的原型對象。
還是剛才的例子，這次我們使用proto來(lái)改寫(xiě)對象的原型。
var a = {name: 'flydean'};var c ={};c.__proto__ = a;console.log(Object.getPrototypeOf(c));proto屬性只有瀏覽器才需要部署，其他環(huán)境可以沒(méi)有這個(gè)屬性，而且前后的兩根下劃線(xiàn)，表示它本質(zhì)是一個(gè)內部屬性，不應該對使用者暴露。
因此，應該盡量少用這個(gè)屬性，而是用Object.getPrototypeof()（讀?。┖蚈bject.setPrototypeOf()（設置），進(jìn)行原型對象的讀寫(xiě)操作。
綜上，我們有三種獲取原型對象的方法：
this總是返回一個(gè)對象，簡(jiǎn)單說(shuō)，就是返回屬性或方法“當前”所在的對象。
var book = { name :'flydean', getName : function (){ return '書(shū)名：'+ this.name; }}console.log(book.getName());//書(shū)名：flydean這里this的指向是可變的，我們看一個(gè)例子 ：
var book = { name :'flydean', getName : function (){ return '書(shū)名：'+ this.name; }}var car ={ name :'car'}car.getName = book.getName;console.log(car.getName());//書(shū)名：car當 A 對象的方法被賦予 B 對象，該方法中的this就從指向 A 對象變成了指向 B 對象
上面的例子中，我們把book中的getName方法賦值給了car對象，this對象現在就指向了car。
如果某個(gè)方法位于多層對象的內部，這時(shí)this只是指向當前一層的對象，而不會(huì )繼承更上面的層。
var book1 = { name :'flydean', book2: { getName : function (){ return '書(shū)名：'+ this.name; } }}console.log(book1.book2.getName());//書(shū)名：undefined上面的例子中，this是定義在對象中的函數中，如果是在函數中的函數中定義的this，代表什么呢？
var book3 = { name :'flydean', book4: function(){ console.log('book4'); var getName = function (){ console.log(this); //Window }(); }}book3.book4();如果在函數中的函數中使用了this，那么內層的this指向的是全局的window對象。
所以我們在使用的過(guò)程中要避免多層 this。由于this的指向是不確定的，所以切勿在函數中包含多層的this。
如果在全局環(huán)境使用this，它指的就是頂層對象window。
數組的map和foreach方法，允許提供一個(gè)函數作為參數。這個(gè)函數內部不應該使用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 jackenforeach方法的回調函數中的this，其實(shí)是指向window對象，因此取不到o.v的值。原因跟上一段的多層this是一樣的，就是內層的this不指向外部，而指向頂層對象。
怎么解決呢？我們使用一個(gè)中間變量：
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方法的第二個(gè)參數，固定它的運行環(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 jackenJavaScript提供了call、apply、bind這三個(gè)方法，來(lái)切換/固定this的指向.
函數實(shí)例的call方法，可以指定函數內部this的指向（即函數執行時(shí)所在的作用域），然后在所指定的作用域中，調用該函數.
var book = {};var f = function () { return this;}f() === this ; //truef.call(book) === book; //true上面例子中，如果直接調用f(),那么返回的就是全局的window對象。如果傳入book對象，那么返回的就是book對象。
call方法的參數，應該是一個(gè)對象。如果參數為空、null和undefined，則默認傳入全局對象。
如果call方法的參數是一個(gè)原始值，那么這個(gè)原始值會(huì )自動(dòng)轉成對應的包裝對象，然后傳入call方法。
var f = function () { return this;}console.log(f.call(100));//[Number: 100]call方法還可以接受多個(gè)參數.
func.call(thisValue,arg1,arg2, ...);call的第一個(gè)參數就是this所要指向的那個(gè)對象，后面的參數則是函數調用時(shí)所需的參數。
call一般用在調用對象的原始方法：
var person = {};person.hasOwnProperty('getName');//false//覆蓋person的getName方法person.getName = function(){ return true;}person.hasOwnProperty('getName');//trueObject.prototype.hasOwnProperty.call(person,'getName');//falseapply方法的作用與call方法類(lèi)似，也是改變this指向，然后再調用該函數。唯一的區別就是，它接收一個(gè)數組作為函數執行時(shí)的參數.
func.apply(thisValue,[arg1,arg2,...])call和apply是改變this的指向，然后調用該函數，而bind方法用于將函數體內的this綁定到某個(gè)對象，然后返回一個(gè)新函數.
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將會(huì )指向全局的window對象，導致運行錯誤。
我們可以這樣修改：
var d = new Date();console.log(d.getTime()); //1600755862787var getTime2= d.getTime.bind(d);console.log(getTime2());bind比call方法和apply方法更進(jìn)一步的是，除了綁定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將兩個(gè)參數的add方法，替換成了1個(gè)參數的add方法。
注意，bind每次調用都會(huì )返回一個(gè)新的函數，從而導致無(wú)法取消之前的綁定。
構造函數的繼承第一步是在子類(lèi)的構造函數中，調用父類(lèi)的構造函數,讓子類(lèi)實(shí)例具有父類(lèi)實(shí)例的屬性。
然后讓子類(lèi)的原型指向父類(lèi)的原型，這樣子類(lèi)就可以繼承父類(lèi)原型。
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);~~調用父類(lèi)的構造函數是初始化實(shí)例對象的屬性。子類(lèi)的原型指向父類(lèi)的原型是為了基礎父類(lèi)的原型對象的屬性。另外一種寫(xiě)法是Boy.prototype等于一個(gè)父類(lèi)實(shí)例：~~~jsBoy.prototype = new Person();上面這種寫(xiě)法也有繼承的效果，但是子類(lèi)會(huì )具有父類(lèi)實(shí)例的方法。有時(shí)，這可能不是我們需要的，所以不推薦使用這種寫(xiě)法.
JavaScript 不提供多重繼承功能，即不允許一個(gè)對象同時(shí)繼承多個(gè)對象。但是，可以通過(guò)變通方法，實(shí)現這個(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' }ES6 的class可以看作只是一個(gè)語(yǔ)法糖，它的絕大部分功能，ES5 都可以做到，新的class寫(xiě)法只是讓對象原型的寫(xiě)法更加清晰、更像面向對象編程的語(yǔ)法而已.
class Person { constructor(name,sex) { this.name=name; this.sex =sex; } toString(){ return this.name + ' '+ this.sex; }}構造函數的prototype屬性，在ES6 的“類(lèi)”上面繼續存在。事實(shí)上，類(lèi)的所有方法都定義在類(lèi)的prototype屬性上面。
上面的類(lèi)等同于：
Person.prototype = { constructor(name,sex) { this.name=name; this.sex =sex; } toString(){ return this.name + ' '+ this.sex; } }class還支持動(dòng)態(tài)的表達式屬性名：
let methodName = 'getName';class Person { constructor(name,sex) { this.name=name; this.sex =sex; } toString(){ return this.name + ' '+ this.sex; } [methodName](){ return this.name; }}類(lèi)相當于實(shí)例的原型，所有在類(lèi)中定義的方法，都會(huì )被實(shí)例繼承。如果在一個(gè)方法前，加上static關(guān)鍵字，就表示該方法不會(huì )被實(shí)例繼承，而是直接通過(guò)類(lèi)來(lái)調用，這就稱(chēng)為“靜態(tài)方法”。
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靜態(tài)屬性指的是 Class 本身的屬性，即Class.propName，而不是定義在實(shí)例對象（this）上的屬性.
class Person { constructor(name,sex) { this.name=name; this.sex =sex; }}Person.address ='address';console.log(Person.address);目前，只有這種寫(xiě)法可行，因為 ES6 明確規定，Class 內部只有靜態(tài)方法，沒(méi)有靜態(tài)屬性.
class的繼承一般使用extends關(guān)鍵字：
class Boy extends Person{ constructor(name,sex,address) { super(name,sex); //調用父類(lèi)的構造函數 this.address =address; } toString() { return super.toString();//調用父類(lèi)的方法 }}在子類(lèi)的構造函數中，只有調用super之后，才可以使用this關(guān)鍵字，否則會(huì )報錯。這是因為子類(lèi)實(shí)例的構建，是基于對父類(lèi)實(shí)例加工，只有super方法才能返回父類(lèi)實(shí)例。
super作為函數調用時(shí)，代表父類(lèi)的構造函數。ES6 要求，子類(lèi)的構造函數必須執行一次super函數。
super作為對象時(shí)，在普通方法中，指向父類(lèi)的原型對象；在靜態(tài)方法中，指向父類(lèi)。
上面的例子，我們在子類(lèi)Boy中的toString普通方法中，調用了super.toString(),之前我們也講了，類(lèi)的所有方法都定義在類(lèi)的prototype屬性上面。所以super.toString就是Person中定義的toString方法。
由于super指向父類(lèi)的原型對象，所以定義在父類(lèi)實(shí)例上的方法或屬性，是無(wú)法通過(guò)super調用的。
定義在父類(lèi)實(shí)例上的方法或屬性就是指在constructor中定義的方法或者屬性。
Person類(lèi)，在constructor中定義了name屬性。我們看一下在Boy中的普通方法中訪(fǎng)問(wèn)會(huì )有什么問(wèn)題：
class Boy extends Person{ constructor(name,sex,address) { super(name,sex); //調用父類(lèi)的構造函數 console.log(super.name); //undefined console.log(this.name); //hanmeimei this.address =address; } toString() { return super.toString();//調用父類(lèi)的方法 } getName(){ console.log(super.name); //undefined console.log(this.name); //hanmeimei }}var b =new Boy('hanmeimei','女','北京');b.getName();JS中的面向對象主要有構造函數，原型鏈，類(lèi)三種方式，希望大家能夠喜歡。
聯(lián)系客服
