萬字長文深度剖析面向對象的javascript

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"簡介","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"本將會深入講解面向對象在javascript中的應用，並詳細介紹三種對象的生成方式：構造函數，原型鏈，類。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"什麼是對象","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"雖然說程序員不缺對象，隨時隨地都可以new一個出來，但是在程序的世界中，對象到底是什麼呢？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"對象是單個實物的抽象。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"對象是一個容器，封裝了屬性（property）和方法（method）。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"而面向對象是相對於面向過程來講的，面向對象方法，把相關的數據和方法組織爲一個整體來看待，從更高的層次來進行系統建模，更貼近事物的自然運行模式。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"面向對象的好處就是可抽象，封裝和可重用性，同時提供了繼承和多態等非常有用的特性。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"而隨着JS的發展，已經超越了最開始的腳本語言，尤其是nodejs的出現之後，更是極大的豐富了js的工作能力。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以JS也需要進行對象化。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"一般來說，在JS中構建對象有三種方式：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"構造函數（constructor）","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"原型鏈（prototype）","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"類(class) —ES6提供","attrs":{}}]}],"attrs":{}}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"接下來，我們一一來講解。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"構造函數","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"構造函數是專門用來生成對象的函數。它提供模板，描述對象的基本結構。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"一個構造函數，可以生成多個對象，這些對象都有相同的結構。構造函數的寫法就是一個普通的函數，但是有自己的特徵和用法.","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"var Book = function () {\n this.name = 'www.flydean.com';\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Book就是構造函數，它提供模板，用來生成實例對象。爲了與普通函數區別，構造函數名字的第一個字母通常大寫。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"構造函數的特點","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"構造函數首先是一個函數，也就是說是function開頭的函數。其次函數體內部使用了this關鍵字，代表了所要生成的對象實例。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在使用構造函數的時候，必需用new命令，調用Book函數。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"new命令的作用，就是執行構造函數，返回一個實例對象。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"var Book = function () {\n this.name = 'www.flydean.com';\n}\n\nvar b1 = new Book();\nconsole.log(b1.name);\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面的例子輸出結果：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"www.flydean.com\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果我們忘了使用new，會發生什麼情況呢？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"var Book = function () {\n this.name = 'www.flydean.com';\n}\n\nvar b2 = Book();\nconsole.log(name);\nconsole.log(b2.name);\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第一個輸出會輸出www.flydean.com","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"而第二個則會報一個錯誤：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"TypeError: Cannot read property 'name' of undefined\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"因爲這樣調用的this指向的是global,所以this.name變成了全局變量。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"爲了避免這種忘記寫new的問題，可以在第一行加上use strict，在嚴格模式中，函數內部的this不能指向全局對象，默認等於undefined，導致不加new調用會報錯。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果不想使用use strict,則可以在構造函數內部判斷是否使用new命令，如果發現沒有使用，則直接返回一個實例對象。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"function Person(firstname,lastname){\n\n if(!(this instanceof Person)){\n return new Person(firstname,lastname);\n }\n this.firstname= firstname;\n this.firstname = lastname;\n}\n\nconsole.log(Person(\"jack\",\"ma\").firstname);\nconsole.log((new Person(\"jack\",\"ma\")).firstname);\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"new命令的原理","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"使用new命令時，它後面的函數調用就不是正常的調用，而是依次執行下面的步驟:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":null,"normalizeStart":1},"content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"創建一個空對象，作爲將要返回的對象實例","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"將這個空對象的原型，指向構造函數的prototype屬性","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":3,"align":null,"origin":null},"content":[{"type":"text","text":"將這個空對象賦值給函數內部的this關鍵字","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":4,"align":null,"origin":null},"content":[{"type":"text","text":"開始執行構造函數內部的代碼","attrs":{}}]}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果構造函數內部有return語句，而且return後面跟着一個對象，new命令會返回return語句指定的對象；否則，就會不管return語句，返回this對象。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"var Book = function () {\n this.name = 'www.flydean.com';\n return {author:'flydean'};\n}\n\nconsole.log((new Book()).author);\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"函數內部可以使用new.target屬性。如果當前函數是new命令調用，new.target指向當前函數，否則爲undefined。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"通過new.target我們也可以用來判斷對象是否通過new來創建：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"function f(){\n if(! new.target){\n throw new Error('請使用new命令！');\n }\n}\nf();\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"構造函數作爲模板，可以生成實例對象。但是，有時只能拿到實例對象，而該對象根本就不是由構造函數生成的，這時可以使用Object.create()方法，直接以某個實例對象作爲模板，生成一個新的實例對象。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"var book2 = {\n name : '三毛流浪記',\n author : '三毛',\n getName : function () {\n console.log('book name is:' + this.name);\n }\n}\nvar book3 = Object.create(book2);\nconsole.log(book3.name);\nbook3.getName();\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"prototype對象","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"構造函數有什麼缺點呢？構造函數的缺點就是會將構造函數內部的對象都複製一份：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"function Book(){\n this.name ='www.flydean.com';\n this.getName =function (){\n console.log('flydean');\n }\n}\n\nvar book1 = new Book();\nvar book2 = new Book();\n\nconsole.log(book1.getName === book2.getName);\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"輸出結果是 false。說明每次new一個對象，對象中的方法也被拷貝了一份。而這並不是必須的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"JavaScript 的每個對象都繼承另一個對象，後者稱爲“原型”（prototype）對象。只有null除外，它沒有自己的原型對象。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"原型對象上的所有屬性和方法，都能被派生對象共享。這就是 JavaScript 繼承機制的基本設計。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"通過構造函數生成實例對象時，會自動爲實例對象分配原型對象。每一個構造函數都有一個prototype屬性，這個屬性就是實例對象的原型對象。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"function Book(name){\n this.name = name;\n}\n\nBook.prototype.author ='flydean';\nvar book1 = new Book();\nvar book2 = new Book();\nconsole.log(book1.author);\nconsole.log(book2.author);\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面例子中的author屬性會被Book的所有實例所繼承，Book的prototype對象，就是book1和book2的原型對象。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"原型對象的屬性不是實例對象自身的屬性。只要修改原型對象，變動就立刻會體現在所有實例對象上。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"由於原型本身也是對象，又有自己的原型，所以形成了一條原型鏈（prototype chain）。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果一層層地上溯，所有對象的原型最終都可以上溯到Object.prototype，即Object構造函數的prototype屬性指向的那個對象。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Object.prototype對象有沒有它的原型呢？回答可以是有的，就是沒有任何屬性和方法的null對象，而null對象沒有自己的原型。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"console.log(Object.getPrototypeOf(Object.prototype));\n//null\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"prototype對象有一個constructor屬性，默認指向prototype對象所在的構造函數.","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"function Book(name){\n this.name = name;\n}\nvar book3 =new Book();\nconsole.log(book3.constructor);\nconsole.log(book3.constructor === Book.prototype.constructor);\nconsole.log(book3.hasOwnProperty(constructor));\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"還是剛剛的book，book3.constructor就是function Book本身。它也等於Book.prototype.constructor。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"constructor屬性的作用，是分辨原型對象到底屬於哪個構造函數。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"因爲prototype是一個對象，所以對象可以被賦值，也就是說prototype可以被改變：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"function A(){}\nvar a = new A();\nconsole.log(a instanceof A);\nfunction B(){}\nA.prototype = B.prototype;\nconsole.log(a instanceof A);\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面的例子中，我們修改了A.prototype,最後a instanceof A值是false。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"爲了保證不會出現這樣錯誤匹配的問題，我們再構建prototype的時候，一定不要直接重寫整個的prototype，只需要修改其中的某個屬性就好：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"//不要這樣寫\nA.prototype ={\n method1:function (){}\n}\n\n//比較好的寫法\nA.prototype ={\n constructor:A,\n method1:function (){}\n}\n//更好的寫法\nA.prototype.method1 = function (){}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"Object的prototype操作","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"Object.getPrototypeOf","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Object.getPrototypeOf方法返回一個對象的原型。這是獲取原型對象的標準方法.","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"//空對象的prototype是Object.prototype\nconsole.log(Object.getPrototypeOf({}) === Object.prototype);\n\n//function的prototype是Function.prototype\nfunction f(){}\nconsole.log(Object.getPrototypeOf(f) === Function.prototype);\n\nfunction F(){this.name ='flydean'}\nvar f1 =new F();\nconsole.log(Object.getPrototypeOf(f1) === F.prototype);\n\nvar f2 = new f();\nconsole.log(Object.getPrototypeOf(f2) === f.prototype);\n\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面4個的輸出結果都是true。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"Object.setPrototypeOf","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Object.setPrototypeOf方法可以爲現有對象設置原型，返回一個新對象。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Object.setPrototypeOf方法接受兩個參數，第一個是現有對象，第二個是原型對象。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"var a = {name: 'flydean'};\nvar b = Object.setPrototypeOf({},a);\nconsole.log(b.name);\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"Object.prototype.isPrototypeOf()","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"對象實例的isPrototypeOf方法，用來判斷一個對象是否是另一個對象的原型.","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"var a = {name: 'flydean'};\nvar b = Object.setPrototypeOf({},a);\nconsole.log(a.isPrototypeOf(b));\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"Object.prototype.proto","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"proto","attrs":{}},{"type":"text","text":"屬性（前後各兩個下劃線）可以改寫某個對象的原型對象。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"還是剛纔的例子，這次我們使用","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"proto","attrs":{}},{"type":"text","text":"來改寫對象的原型。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"var a = {name: 'flydean'};\n\nvar c ={};\nc.__proto__ = a;\nconsole.log(Object.getPrototypeOf(c));\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"proto","attrs":{}},{"type":"text","text":"屬性只有瀏覽器才需要部署，其他環境可以沒有這個屬性，而且前後的兩根下劃線，表示它本質是一個內部屬性，不應該對使用者暴露。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"因此，應該儘量少用這個屬性，而是用Object.getPrototypeof()（讀取）和Object.setPrototypeOf()（設置），進行原型對象的讀寫操作。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"三種獲取原型對象的方法","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"綜上，我們有三種獲取原型對象的方法：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"obj.","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"proto","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"obj.constructor.prototype","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Object.getPrototypeOf(obj)","attrs":{}}]}],"attrs":{}}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"this對象","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"this總是返回一個對象，簡單說，就是返回屬性或方法“當前”所在的對象。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"var book = {\n name :'flydean',\n getName : function (){\n return '書名：'+ this.name;\n }\n}\n\nconsole.log(book.getName());\n//書名：flydean\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這裏this的指向是可變的，我們看一個例子 ：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"var book = {\n name :'flydean',\n getName : function (){\n return '書名：'+ this.name;\n }\n}\n\nvar car ={\n name :'car'\n}\n\ncar.getName = book.getName;\nconsole.log(car.getName());\n//書名：car\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"當 A 對象的方法被賦予 B 對象，該方法中的this就從指向 A 對象變成了指向 B 對象","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面的例子中，我們把book中的getName方法賦值給了car對象，this對象現在就指向了car。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果某個方法位於多層對象的內部，這時this只是指向當前一層的對象，而不會繼承更上面的層。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"var book1 = {\n name :'flydean',\n book2: {\n getName : function (){\n return '書名：'+ this.name;\n }\n }\n}\nconsole.log(book1.book2.getName());\n//書名：undefined\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面的例子中，this是定義在對象中的函數中，如果是在函數中的函數中定義的this，代表什麼呢？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"var book3 = {\n name :'flydean',\n book4: function(){\n console.log('book4');\n var getName = function (){\n console.log(this); //Window\n }();\n }\n}\nbook3.book4();\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果在函數中的函數中使用了this，那麼內層的this指向的是全局的window對象。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以我們在使用的過程中要避免多層 this。由於this的指向是不確定的，所以切勿在函數中包含多層的this。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果在全局環境使用this，它指的就是頂層對象window。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"數組的map和foreach方法，允許提供一個函數作爲參數。這個函數內部不應該使用this。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"var book5 ={\n name : 'flydean',\n author : ['max','jacken'],\n f: function (){\n this.author.forEach(function (item) {\n console.log(this.name+' '+item);\n })\n }\n}\nbook5.f();\n//undefined max\n//undefined jacken\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"foreach方法的回調函數中的this，其實是指向window對象，因此取不到o.v的值。原因跟上一段的多層this是一樣的，就是內層的this不指向外部，而指向頂層對象。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"怎麼解決呢？我們使用一箇中間變量：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"var book6 ={\n name : 'flydean',\n author : ['max','jacken'],\n f: function (){\n var that = this;\n this.author.forEach(function (item) {\n console.log(that.name+' '+item);\n })\n }\n}\nbook6.f();\n//flydean max\n//flydean jacken\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"或者將this當作foreach方法的第二個參數，固定它的運行環境：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"var book7 ={\n name : 'flydean',\n author : ['max','jacken'],\n f: function (){\n this.author.forEach(function (item) {\n console.log(this.name+' '+item);\n },this)\n }\n}\nbook7.f();\n//flydean max\n//flydean jacken\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"綁定this的方法","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"JavaScript提供了call、apply、bind這三個方法，來切換/固定this的指向.","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"call","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"函數實例的call方法，可以指定函數內部this的指向（即函數執行時所在的作用域），然後在所指定的作用域中，調用該函數.","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"var book = {};\n\nvar f = function () {\n return this;\n}\nf() === this ; //true\nf.call(book) === book; //true\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面例子中，如果直接調用f(),那麼返回的就是全局的window對象。如果傳入book對象，那麼返回的就是book對象。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"call方法的參數，應該是一個對象。如果參數爲空、null和undefined，則默認傳入全局對象。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果call方法的參數是一個原始值，那麼這個原始值會自動轉成對應的包裝對象，然後傳入call方法。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"var f = function () {\n return this;\n}\n\nconsole.log(f.call(100));\n//[Number: 100]\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"call方法還可以接受多個參數.","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"func.call(thisValue,arg1,arg2, ...);\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"call的第一個參數就是this所要指向的那個對象，後面的參數則是函數調用時所需的參數。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"call一般用在調用對象的原始方法：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"var person = {};\n\nperson.hasOwnProperty('getName');//false\n\n//覆蓋person的getName方法\nperson.getName = function(){\n return true;\n}\n\nperson.hasOwnProperty('getName');//true\nObject.prototype.hasOwnProperty.call(person,'getName');//false\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"apply","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"apply方法的作用與call方法類似，也是改變this指向，然後再調用該函數。唯一的區別就是，它接收一個數組作爲函數執行時的參數.","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"func.apply(thisValue,[arg1,arg2,...])\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"bind","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"call和apply是改變this的指向，然後調用該函數，而bind方法用於將函數體內的this綁定到某個對象，然後返回一個新函數.","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"var d = new Date();\n\nconsole.log(d.getTime()); //1600755862787\n\nvar getTime= d.getTime;\nconsole.log(getTime());//TypeError: this is not a Date object.\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面的例子中，getTime方法裏面調用了this，如果直接把d.getTime賦值給getTime變量，那麼this將會指向全局的window對象，導致運行錯誤。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們可以這樣修改：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"var d = new Date();\n\nconsole.log(d.getTime()); //1600755862787\n\nvar getTime2= d.getTime.bind(d);\nconsole.log(getTime2());\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"bind比call方法和apply方法更進一步的是，除了綁定this以外，還可以綁定原函數的參數。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"var add = function(x,y){\n return x +this.m + y + this.n;\n}\nvar addObj ={\n m: 10,\n n: 10\n}\n\nvar newAdd = add.bind(addObj,2);\nconsole.log(newAdd(3));//25\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面的例子中，bind將兩個參數的add方法，替換成了1個參數的add方法。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"italic","attrs":{}}],"text":"注意，bind每次調用都會返回一個新的函數，從而導致無法取消之前的綁定。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"繼承","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"構造函數的繼承","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"構造函數的繼承第一步是在子類的構造函數中，調用父類的構造函數,讓子類實例具有父類實例的屬性。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然後讓子類的原型指向父類的原型，這樣子類就可以繼承父類原型。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"function Person (){\n this.name = 'person';\n}\n\nfunction Boy(){\n Person.call(this);\n this.title = 'boy';\n}\n\nBoy.prototype= Object.create(Person.prototype);\nBoy.prototype.constructor=Boy;\nBoy.prototype.getTitle=function (){console.log(this.title)};\n\nvar b =new Boy();\nb.getTitle();\nconsole.log(b);\n~~\n\n調用父類的構造函數是初始化實例對象的屬性。子類的原型指向父類的原型是爲了基礎父類的原型對象的屬性。\n\n另外一種寫法是Boy.prototype等於一個父類實例：\n\n~~~js\nBoy.prototype = new Person();\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面這種寫法也有繼承的效果，但是子類會具有父類實例的方法。有時，這可能不是我們需要的，所以不推薦使用這種寫法.","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"JavaScript 不提供多重繼承功能，即不允許一個對象同時繼承多個對象。但是，可以通過變通方法，實現這個功能:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"function Person1 (){\n this.name = 'person';\n}\nfunction Person2 (){\n this.sex = '男';\n}\n\nfunction Boy(){\n Person1.call(this);\n Person2.call(this);\n this.title = 'boy';\n}\n\n//繼承Person1\nBoy.prototype= Object.create(Person1.prototype);\n//繼承鏈加上Person2\nObject.assign(Boy.prototype,Person2.prototype);\n\nBoy.prototype.constructor=Boy;\nBoy.prototype.getTitle=function (){console.log(this.title)};\n\nvar b =new Boy();\nb.getTitle();\nconsole.log(b);\n//Boy { name: 'person', sex: '男', title: 'boy' }\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"class","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"ES6 的class可以看作只是一個語法糖，它的絕大部分功能，ES5 都可以做到，新的class寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法而已.","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"class Person {\n constructor(name,sex) {\n this.name=name;\n this.sex =sex;\n }\n\n toString(){\n return this.name + ' '+ this.sex;\n }\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"構造函數的prototype屬性，在ES6 的“類”上面繼續存在。事實上，類的所有方法都定義在類的prototype屬性上面。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面的類等同於：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"Person.prototype = {\n constructor(name,sex) {\n this.name=name;\n this.sex =sex;\n }\n\n toString(){\n return this.name + ' '+ this.sex;\n } \n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"表達式屬性名","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"class還支持動態的表達式屬性名：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"let methodName = 'getName';\n\nclass Person {\n constructor(name,sex) {\n this.name=name;\n this.sex =sex;\n }\n\n toString(){\n return this.name + ' '+ this.sex;\n }\n\n [methodName](){\n return this.name;\n }\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"靜態方法","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"類相當於實例的原型，所有在類中定義的方法，都會被實例繼承。如果在一個方法前，加上static關鍵字，就表示該方法不會被實例繼承，而是直接通過類來調用，這就稱爲“靜態方法”。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"class Person {\n constructor(name,sex) {\n this.name=name;\n this.sex =sex;\n }\n\n static getSex(){\n return '男';\n }\n}\n\nconsole.log(Person.getSex()); //男\n\nlet p = new Person();\nconsole.log(p.getSex());//TypeError: p.getSex is not a function\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"靜態屬性","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"靜態屬性指的是 Class 本身的屬性，即Class.propName，而不是定義在實例對象（this）上的屬性.","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"class Person {\n constructor(name,sex) {\n this.name=name;\n this.sex =sex;\n }\n}\nPerson.address ='address';\nconsole.log(Person.address);\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"目前，只有這種寫法可行，因爲 ES6 明確規定，Class 內部只有靜態方法，沒有靜態屬性.","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"class的繼承","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"class的繼承一般使用extends關鍵字：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"class Boy extends Person{\n constructor(name,sex,address) {\n super(name,sex); //調用父類的構造函數\n this.address =address;\n }\n\n toString() {\n return super.toString();//調用父類的方法\n }\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在子類的構造函數中，只有調用super之後，纔可以使用this關鍵字，否則會報錯。這是因爲子類實例的構建，是基於對父類實例加工，只有super方法才能返回父類實例。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"super作爲函數調用時，代表父類的構造函數。ES6 要求，子類的構造函數必須執行一次super函數。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"super作爲對象時，在普通方法中，指向父類的原型對象；在靜態方法中，指向父類。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面的例子，我們在子類Boy中的toString普通方法中，調用了super.toString(),之前我們也講了，類的所有方法都定義在類的prototype屬性上面。所以super.toString就是Person中定義的toString方法。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"由於super指向父類的原型對象，所以定義在父類實例上的方法或屬性，是無法通過super調用的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"定義在父類實例上的方法或屬性就是指在constructor中定義的方法或者屬性。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Person類，在constructor中定義了name屬性。我們看一下在Boy中的普通方法中訪問會有什麼問題：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"class Boy extends Person{\n constructor(name,sex,address) {\n super(name,sex); //調用父類的構造函數\n console.log(super.name); //undefined\n console.log(this.name); //hanmeimei\n this.address =address;\n }\n\n toString() {\n return super.toString();//調用父類的方法\n }\n\n getName(){\n console.log(super.name); //undefined\n console.log(this.name); //hanmeimei\n }\n}\n\nvar b =new Boy('hanmeimei','女','北京');\nb.getName();\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"總結","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"JS中的面向對象主要有構造函數，原型鏈，類三種方式，希望大家能夠喜歡。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"italic","attrs":{}}],"text":"本文作者：flydean程序那些事","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"italic","attrs":{}}],"text":"本文鏈接：","attrs":{}},{"type":"link","attrs":{"href":"http://www.flydean.com/object-oriented-js/","title":null},"content":[{"type":"text","text":"http://www.flydean.com/object-oriented-js/","attrs":{}}],"marks":[{"type":"italic"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"italic","attrs":{}}],"text":"本文來源：flydean的博客","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"italic","attrs":{}}],"text":"歡迎關注我的公衆號:「程序那些事」最通俗的解讀，最深刻的乾貨，最簡潔的教程，衆多你不知道的小技巧等你來發現！","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}