\u57fa\u7840\u7528\u6cd5<\/strong><\/div>\n
\u7c7b\u5b9a\u4e49<\/strong><\/span><\/div>\n
\u7c7b\u8868\u8fbe\u5f0f\u53ef\u4ee5\u4e3a\u533f\u540d\u6216\u547d\u540d\u3002<\/p>\n
\/\/ \u533f\u540d\u7c7b\r\nlet Example = class {\r\n constructor(a) {\r\n this.a = a;\r\n }\r\n}\r\n\/\/ \u547d\u540d\u7c7b\r\nlet Example = class Example {\r\n constructor(a) {\r\n this.a = a;\r\n }\r\n}<\/pre>\n
\u7c7b\u58f0\u660e<\/strong><\/span><\/div>\n
class Example {\r\n constructor(a) {\r\n this.a = a;\r\n }\r\n}<\/pre>\n
\u6ce8\u610f\u8981\u70b9\uff1a\u4e0d\u53ef\u91cd\u590d\u58f0\u660e\u3002<\/p>\n
class Example{}\r\nclass Example{}\r\n\/\/ Uncaught SyntaxError: Identifier 'Example' has already been \r\n\/\/ declared\r\n \r\nlet Example1 = class{}\r\nclass Example{}\r\n\/\/ Uncaught SyntaxError: Identifier 'Example' has already been \r\n\/\/ declared<\/pre>\n
\u6ce8\u610f\u8981\u70b9<\/strong><\/span><\/div>\n
\u7c7b\u5b9a\u4e49\u4e0d\u4f1a\u88ab\u63d0\u5347\uff0c\u8fd9\u610f\u5473\u7740\uff0c\u5fc5\u987b\u5728\u8bbf\u95ee\u524d\u5bf9\u7c7b\u8fdb\u884c\u5b9a\u4e49\uff0c\u5426\u5219\u5c31\u4f1a\u62a5\u9519\u3002<\/p>\n
\u7c7b\u4e2d\u65b9\u6cd5\u4e0d\u9700\u8981 function \u5173\u952e\u5b57\u3002<\/p>\n
\u65b9\u6cd5\u95f4\u4e0d\u80fd\u52a0\u5206\u53f7\u3002<\/p>\n
new Example(); \r\nclass Example {}<\/pre>\n
\u7c7b\u7684\u4e3b\u4f53<\/strong><\/span><\/div>\n
\u5c5e\u6027<\/strong><\/p>\n
prototype<\/p>\n
ES6 \u4e2d\uff0cprototype \u4ecd\u65e7\u5b58\u5728\uff0c\u867d\u7136\u53ef\u4ee5\u76f4\u63a5\u81ea\u7c7b\u4e2d\u5b9a\u4e49\u65b9\u6cd5\uff0c\u4f46\u662f\u5176\u5b9e\u65b9\u6cd5\u8fd8\u662f\u5b9a\u4e49\u5728 prototype \u4e0a\u7684\u3002 \u8986\u76d6\u65b9\u6cd5 \/ \u521d\u59cb\u5316\u65f6\u6dfb\u52a0\u65b9\u6cd5<\/p>\n
Example.prototype={\r\n \/\/methods\r\n}<\/pre>\n
\u6dfb\u52a0\u65b9\u6cd5<\/p>\n
Object.assign(Example.prototype,{\r\n \/\/methods\r\n})<\/pre>\n
\u9759\u6001\u5c5e\u6027<\/p>\n
\u9759\u6001\u5c5e\u6027\uff1aclass \u672c\u8eab\u7684\u5c5e\u6027\uff0c\u5373\u76f4\u63a5\u5b9a\u4e49\u5728\u7c7b\u5185\u90e8\u7684\u5c5e\u6027\uff08 Class.propname \uff09\uff0c\u4e0d\u9700\u8981\u5b9e\u4f8b\u5316\u3002 ES6 \u4e2d\u89c4\u5b9a\uff0cClass \u5185\u90e8\u53ea\u6709\u9759\u6001\u65b9\u6cd5\uff0c\u6ca1\u6709\u9759\u6001\u5c5e\u6027\u3002<\/p>\n
class Example {\r\n\/\/ \u65b0\u63d0\u6848\r\n static a = 2;\r\n}\r\n\/\/ \u76ee\u524d\u53ef\u884c\u5199\u6cd5\r\nExample.b = 2;<\/pre>\n
\u516c\u5171\u5c5e\u6027<\/p>\n
class Example{}\r\nExample.prototype.a = 2;<\/pre>\n
\u5b9e\u4f8b\u5c5e\u6027<\/p>\n
\u5b9e\u4f8b\u5c5e\u6027\uff1a\u5b9a\u4e49\u5728\u5b9e\u4f8b\u5bf9\u8c61\uff08 this \uff09\u4e0a\u7684\u5c5e\u6027\u3002<\/p>\n
class Example {\r\n a = 2;\r\n constructor () {\r\n console.log(this.a);\r\n }\r\n}<\/pre>\n
name \u5c5e\u6027<\/p>\n
\u8fd4\u56de\u8ddf\u5728 class \u540e\u7684\u7c7b\u540d(\u5b58\u5728\u65f6)\u3002<\/p>\n
let Example=class Exam {\r\n constructor(a) {\r\n this.a = a;\r\n }\r\n}\r\nconsole.log(Example.name); \/\/ Exam\r\n \r\nlet Example=class {\r\n constructor(a) {\r\n this.a = a;\r\n }\r\n}\r\nconsole.log(Example.name); \/\/ Example<\/pre>\n
\u65b9\u6cd5<\/strong><\/p>\n
constructor \u65b9\u6cd5<\/p>\n
constructor \u65b9\u6cd5\u662f\u7c7b\u7684\u9ed8\u8ba4\u65b9\u6cd5\uff0c\u521b\u5efa\u7c7b\u7684\u5b9e\u4f8b\u5316\u5bf9\u8c61\u65f6\u88ab\u8c03\u7528\u3002<\/p>\n
class Example{\r\n constructor(){\r\n console.log('\u6211\u662fconstructor');\r\n }\r\n}\r\nnew Example(); \/\/ \u6211\u662fconstructor<\/pre>\n
\u8fd4\u56de\u5bf9\u8c61<\/p>\n
class Test {\r\n constructor(){\r\n \/\/ \u9ed8\u8ba4\u8fd4\u56de\u5b9e\u4f8b\u5bf9\u8c61 this\r\n }\r\n}\r\nconsole.log(new Test() instanceof Test); \/\/ true\r\n \r\nclass Example {\r\n constructor(){\r\n \/\/ \u6307\u5b9a\u8fd4\u56de\u5bf9\u8c61\r\n return new Test();\r\n }\r\n}\r\nconsole.log(new Example() instanceof Example); \/\/ false<\/pre>\n
\u9759\u6001\u65b9\u6cd5<\/p>\n
class Example{\r\n static sum(a, b) {\r\n console.log(a+b);\r\n }\r\n}\r\nExample.sum(1, 2); \/\/ 3<\/pre>\n
\u539f\u578b\u65b9\u6cd5<\/p>\n
class Example {\r\n sum(a, b) {\r\n console.log(a + b);\r\n }\r\n}\r\nlet exam = new Example();\r\nexam.sum(1, 2); \/\/ 3<\/pre>\n
\u5b9e\u4f8b\u65b9\u6cd5<\/p>\n
class Example {\r\n constructor() {\r\n this.sum = (a, b) => {\r\n console.log(a + b);\r\n }\r\n }\r\n}<\/pre>\n
\u7c7b\u7684\u5b9e\u4f8b\u5316<\/strong><\/span><\/div>\n
new<\/strong><\/p>\n
class \u7684\u5b9e\u4f8b\u5316\u5fc5\u987b\u901a\u8fc7 new \u5173\u952e\u5b57\u3002<\/p>\n
class Example {}\r\n \r\nlet exam1 = Example(); \r\n\/\/ Class constructor Example cannot be invoked without 'new'<\/pre>\n
\u5b9e\u4f8b\u5316\u5bf9\u8c61<\/strong><\/p>\n
\u5171\u4eab\u539f\u578b\u5bf9\u8c61<\/p>\n
class Example {\r\n constructor(a, b) {\r\n this.a = a;\r\n this.b = b;\r\n console.log('Example');\r\n }\r\n sum() {\r\n return this.a + this.b;\r\n }\r\n}\r\nlet exam1 = new Example(2, 1);\r\nlet exam2 = new Example(3, 1);\r\nconsole.log(exam1._proto_ == exam2._proto_); \/\/ true\r\n \r\nexam1._proto_.sub = function() {\r\n return this.a - this.b;\r\n}\r\nconsole.log(exam1.sub()); \/\/ 1\r\nconsole.log(exam2.sub()); \/\/ 2<\/pre>\n
decorator<\/strong><\/span><\/div>\n
decorator \u662f\u4e00\u4e2a\u51fd\u6570\uff0c\u7528\u6765\u4fee\u6539\u7c7b\u7684\u884c\u4e3a\uff0c\u5728\u4ee3\u7801\u7f16\u8bd1\u65f6\u4ea7\u751f\u4f5c\u7528\u3002<\/p>\n
\u7c7b\u4fee\u9970<\/strong><\/span><\/div>\n
\u4e00\u4e2a\u53c2\u6570<\/p>\n
\u7b2c\u4e00\u4e2a\u53c2\u6570 target\uff0c\u6307\u5411\u7c7b\u672c\u8eab\u3002<\/p>\n
function testable(target) {\r\n target.isTestable = true;\r\n}\r\n@testable\r\nclass Example {}\r\nExample.isTestable; \/\/ true<\/pre>\n
\u591a\u4e2a\u53c2\u6570\u2014\u2014\u5d4c\u5957\u5b9e\u73b0<\/p>\n
function testable(isTestable) {\r\n return function(target) {\r\n target.isTestable=isTestable;\r\n }\r\n}\r\n@testable(true)\r\nclass Example {}\r\nExample.isTestable; \/\/ true<\/pre>\n
\u5b9e\u4f8b\u5c5e\u6027<\/p>\n
\u4e0a\u9762\u4e24\u4e2a\u4f8b\u5b50\u6dfb\u52a0\u7684\u662f\u9759\u6001\u5c5e\u6027\uff0c\u82e5\u8981\u6dfb\u52a0\u5b9e\u4f8b\u5c5e\u6027\uff0c\u5728\u7c7b\u7684 prototype \u4e0a\u64cd\u4f5c\u5373\u53ef\u3002<\/p>\n
\u65b9\u6cd5\u4fee\u9970<\/strong><\/span><\/div>\n
3\u4e2a\u53c2\u6570\uff1atarget\uff08\u7c7b\u7684\u539f\u578b\u5bf9\u8c61\uff09\u3001name\uff08\u4fee\u9970\u7684\u5c5e\u6027\u540d\uff09\u3001descriptor\uff08\u8be5\u5c5e\u6027\u7684\u63cf\u8ff0\u5bf9\u8c61\uff09\u3002<\/p>\n
class Example {\r\n @writable\r\n sum(a, b) {\r\n return a + b;\r\n }\r\n}\r\nfunction writable(target, name, descriptor) {\r\n descriptor.writable = false;\r\n return descriptor; \/\/ \u5fc5\u987b\u8fd4\u56de\r\n}<\/pre>\n
\u4fee\u9970\u5668\u6267\u884c\u987a\u5e8f<\/p>\n
\u7531\u5916\u5411\u5185\u8fdb\u5165\uff0c\u7531\u5185\u5411\u5916\u6267\u884c\u3002<\/p>\n
class Example {\r\n @logMethod(1)\r\n @logMthod(2)\r\n sum(a, b){\r\n return a + b;\r\n }\r\n}\r\nfunction logMethod(id) {\r\n console.log('evaluated logMethod'+id);\r\n return (target, name, desctiptor) => console.log('excuted logMethod '+id);\r\n}\r\n\/\/ evaluated logMethod 1\r\n\/\/ evaluated logMethod 2\r\n\/\/ excuted logMethod 2\r\n\/\/ excuted logMethod 1<\/pre>\n
\u5c01\u88c5\u4e0e\u7ee7\u627f<\/strong><\/div>\n
getter \/ setter<\/strong><\/span><\/div>\n
\u5b9a\u4e49<\/p>\n
class Example{\r\n constructor(a, b) {\r\n this.a = a; \/\/ \u5b9e\u4f8b\u5316\u65f6\u8c03\u7528 set \u65b9\u6cd5\r\n this.b = b;\r\n }\r\n get a(){\r\n console.log('getter');\r\n return this.a;\r\n }\r\n set a(a){\r\n console.log('setter');\r\n this.a = a; \/\/ \u81ea\u8eab\u9012\u5f52\u8c03\u7528\r\n }\r\n}\r\nlet exam = new Example(1,2); \/\/ \u4e0d\u65ad\u8f93\u51fa setter \uff0c\u6700\u7ec8\u5bfc\u81f4 RangeError\r\nclass Example1{\r\n constructor(a, b) {\r\n this.a = a;\r\n this.b = b;\r\n }\r\n get a(){\r\n console.log('getter');\r\n return this._a;\r\n }\r\n set a(a){\r\n console.log('setter');\r\n this._a = a;\r\n }\r\n}\r\nlet exam1 = new Example1(1,2); \/\/ \u53ea\u8f93\u51fa setter , \u4e0d\u4f1a\u8c03\u7528 getter \u65b9\u6cd5\r\nconsole.log(exam._a); \/\/ 1, \u53ef\u4ee5\u76f4\u63a5\u8bbf\u95ee<\/pre>\n
getter \u4e0d\u53ef\u5355\u72ec\u51fa\u73b0<\/p>\n
class Example {\r\n constructor(a) {\r\n this.a = a; \r\n }\r\n get a() {\r\n return this.a;\r\n }\r\n}\r\nlet exam = new Example(1); \/\/ Uncaught TypeError: Cannot set property \/\/ a of # which has only a getter<\/example><\/pre>\n
getter \u4e0e setter \u5fc5\u987b\u540c\u7ea7\u51fa\u73b0<\/p>\n
class Father {\r\n constructor(){}\r\n get a() {\r\n return this._a;\r\n }\r\n}\r\nclass Child extends Father {\r\n constructor(){\r\n super();\r\n }\r\n set a(a) {\r\n this._a = a;\r\n }\r\n}\r\nlet test = new Child();\r\ntest.a = 2;\r\nconsole.log(test.a); \/\/ undefined\r\n \r\nclass Father1 {\r\n constructor(){}\r\n \/\/ \u6216\u8005\u90fd\u653e\u5728\u5b50\u7c7b\u4e2d\r\n get a() {\r\n return this._a;\r\n }\r\n set a(a) {\r\n this._a = a;\r\n }\r\n}\r\nclass Child1 extends Father1 {\r\n constructor(){\r\n super();\r\n }\r\n}\r\nlet test1 = new Child1();\r\ntest1.a = 2;\r\nconsole.log(test1.a); \/\/ 2<\/pre>\n
extends<\/strong><\/span><\/div>\n
\u901a\u8fc7 extends \u5b9e\u73b0\u7c7b\u7684\u7ee7\u627f\u3002<\/p>\n
class Child extends Father { ... }<\/pre>\n
super<\/strong><\/span><\/div>\n
\u5b50\u7c7b constructor \u65b9\u6cd5\u4e2d\u5fc5\u987b\u6709 super \uff0c\u4e14\u5fc5\u987b\u51fa\u73b0\u5728 this \u4e4b\u524d\u3002<\/p>\n
class Father {\r\n constructor() {}\r\n}\r\nclass Child extends Father {\r\n constructor() {}\r\n \/\/ or \r\n \/\/ constructor(a) {\r\n \/\/ this.a = a;\r\n \/\/ super();\r\n \/\/ }\r\n}\r\nlet test = new Child(); \/\/ Uncaught ReferenceError: Must call super \r\n\/\/ constructor in derived class before accessing 'this' or returning \r\n\/\/ from derived constructor<\/pre>\n
\u8c03\u7528\u7236\u7c7b\u6784\u9020\u51fd\u6570,\u53ea\u80fd\u51fa\u73b0\u5728\u5b50\u7c7b\u7684\u6784\u9020\u51fd\u6570\u3002<\/p>\n
class Father {\r\n test(){\r\n return 0;\r\n }\r\n static test1(){\r\n return 1;\r\n }\r\n}\r\nclass Child extends Father {\r\n constructor(){\r\n super();\r\n }\r\n}\r\nclass Child1 extends Father {\r\n test2() {\r\n super(); \/\/ Uncaught SyntaxError: 'super' keyword unexpected \r\n \/\/ here\r\n }\r\n}<\/pre>\n
\u8c03\u7528\u7236\u7c7b\u65b9\u6cd5, super \u4f5c\u4e3a\u5bf9\u8c61\uff0c\u5728\u666e\u901a\u65b9\u6cd5\u4e2d\uff0c\u6307\u5411\u7236\u7c7b\u7684\u539f\u578b\u5bf9\u8c61\uff0c\u5728\u9759\u6001\u65b9\u6cd5\u4e2d\uff0c\u6307\u5411\u7236\u7c7b<\/p>\n
class Child2 extends Father {\r\n constructor(){\r\n super();\r\n \/\/ \u8c03\u7528\u7236\u7c7b\u666e\u901a\u65b9\u6cd5\r\n console.log(super.test()); \/\/ 0\r\n }\r\n static test3(){\r\n \/\/ \u8c03\u7528\u7236\u7c7b\u9759\u6001\u65b9\u6cd5\r\n return super.test1+2;\r\n }\r\n}\r\nChild2.test3(); \/\/ 3<\/pre>\n
\u6ce8\u610f\u8981\u70b9<\/strong><\/div>\n
\u4e0d\u53ef\u7ee7\u627f\u5e38\u89c4\u5bf9\u8c61\u3002<\/p>\n
var Father = {\r\n \/\/ ...\r\n}\r\nclass Child extends Father {\r\n \/\/ ...\r\n}\r\n\/\/ Uncaught TypeError: Class extends value #