{"id":659,"date":"2024-06-19T16:05:47","date_gmt":"2024-06-19T08:05:47","guid":{"rendered":"https:\/\/levin.ink\/?p=659"},"modified":"2024-06-19T16:05:47","modified_gmt":"2024-06-19T08:05:47","slug":"js-3-8-%e7%b1%bb","status":"publish","type":"post","link":"https:\/\/levin.ink\/?p=659","title":{"rendered":"JS – 3-8 \u7c7b"},"content":{"rendered":"

Class \u57fa\u672c\u8bed\u6cd5<\/h1>\n

\u5728\u65e5\u5e38\u5f00\u53d1\u4e2d\uff0c\u6211\u4eec\u7ecf\u5e38\u9700\u8981\u521b\u5efa\u8bb8\u591a\u76f8\u540c\u7c7b\u578b\u7684\u5bf9\u8c61\uff0c\u4f8b\u5982\u7528\u6237\uff08users\uff09\u3001\u5546\u54c1\uff08goods\uff09\u6216\u8005\u4efb\u4f55\u5176\u4ed6\u4e1c\u897f\u3002
\n\u6b63\u5982\u6211\u4eec\u5728\u00a0\u6784\u9020\u5668\u548c\u64cd\u4f5c\u7b26 "new"<\/a>\u00a0\u4e00\u7ae0\u4e2d\u5df2\u7ecf\u5b66\u5230\u7684\uff0cnew function<\/code>\u00a0\u53ef\u4ee5\u5e2e\u52a9\u6211\u4eec\u5b9e\u73b0\u8fd9\u79cd\u9700\u6c42\u3002
\n\u4f46\u5728\u73b0\u4ee3 JavaScript \u4e2d\uff0c\u8fd8\u6709\u4e00\u4e2a\u66f4\u9ad8\u7ea7\u7684\u201c\u7c7b\uff08class\uff09\u201d\u6784\u9020\u65b9\u5f0f\uff0c\u5b83\u5f15\u5165\u8bb8\u591a\u975e\u5e38\u68d2\u7684\u65b0\u529f\u80fd\uff0c\u8fd9\u4e9b\u529f\u80fd\u5bf9\u4e8e\u9762\u5411\u5bf9\u8c61\u7f16\u7a0b\u5f88\u6709\u7528\u3002<\/p>\n

\u201cclass\u201d\u8bed\u6cd5<\/h2>\n
class MyClass {\n  \/\/ class \u65b9\u6cd5\n  constructor() { ... }\n  method1() { ... }\n  method2() { ... }\n  method3() { ... }\n  ...\n}\n<\/code><\/pre>\n
\u7136\u540e\u4f7f\u7528\u00a0new MyClass()<\/code>\u00a0\u6765\u521b\u5efa\u5177\u6709\u4e0a\u8ff0\u5217\u51fa\u7684\u6240\u6709\u65b9\u6cd5\u7684\u65b0\u5bf9\u8c61\u3002
\nnew<\/code>\u00a0\u4f1a\u81ea\u52a8\u8c03\u7528\u00a0constructor()<\/code>\u00a0\u65b9\u6cd5\uff0c\u56e0\u6b64\u6211\u4eec\u53ef\u4ee5\u5728\u00a0constructor()<\/code>\u00a0\u4e2d\u521d\u59cb\u5316\u5bf9\u8c61\u3002<\/p>\n
class User {\n\n  constructor(name) {\n    this.name = name;\n  }\n\n  sayHi() {\n    alert(this.name);\n  }\n\n}\n\n\/\/ \u7528\u6cd5\uff1a\nlet user = new User("John");\nuser.sayHi();\n<\/code><\/pre>\n
\u5f53 new User("John") \u88ab\u8c03\u7528\uff1a
\n\u4e00\u4e2a\u65b0\u5bf9\u8c61\u88ab\u521b\u5efa\u3002
\nconstructor \u4f7f\u7528\u7ed9\u5b9a\u7684\u53c2\u6570\u8fd0\u884c\uff0c\u5e76\u5c06\u5176\u8d4b\u503c\u7ed9 this.name\u3002
\n\u2026\u2026\u7136\u540e\u6211\u4eec\u5c31\u53ef\u4ee5\u8c03\u7528\u5bf9\u8c61\u65b9\u6cd5\u4e86\uff0c\u4f8b\u5982 user.sayHi\u3002<\/p>\n
\n
\u7c7b\u7684\u65b9\u6cd5\u4e4b\u95f4\u6ca1\u6709\u9017\u53f7
\n\u5bf9\u4e8e\u65b0\u624b\u5f00\u53d1\u4eba\u5458\u6765\u8bf4\uff0c\u5e38\u89c1\u7684\u9677\u9631\u662f\u5728\u7c7b\u7684\u65b9\u6cd5\u4e4b\u95f4\u653e\u7f6e\u9017\u53f7\uff0c\u8fd9\u4f1a\u5bfc\u81f4\u8bed\u6cd5\u9519\u8bef\u3002
\n\u4e0d\u8981\u628a\u8fd9\u91cc\u7684\u7b26\u53f7\u4e0e\u5bf9\u8c61\u5b57\u9762\u91cf\u76f8\u6df7\u6dc6\u3002\u5728\u7c7b\u4e2d\uff0c\u4e0d\u9700\u8981\u9017\u53f7\u3002<\/p>\n<\/blockquote>\n
\u4ec0\u4e48\u662f class\uff1f<\/h2>\n
\u8fd9\u4e0d\u662f\u4e00\u4e2a\u5168\u65b0\u7684\u8bed\u8a00\u7ea7\u5b9e\u4f53\u3002\u5728 JavaScript \u4e2d\uff0c\u7c7b\u662f\u4e00\u79cd\u51fd\u6570\u3002<\/p>\n
class User {\n  constructor(name) { this.name = name; }\n  sayHi() { alert(this.name); }\n}\n\n\/\/ \u4f50\u8bc1\uff1aUser \u662f\u4e00\u4e2a\u51fd\u6570\nalert(typeof User); \/\/ function\n<\/code><\/pre>\n
class User {...}<\/code>\u00a0\u6784\u9020\u5b9e\u9645\u4e0a\u505a\u4e86\u5982\u4e0b\u7684\u4e8b\u513f\uff1a<\/p>\n
    \n
  1. \u521b\u5efa\u4e00\u4e2a\u540d\u4e3a\u00a0User<\/code>\u00a0\u7684\u51fd\u6570\uff0c\u8be5\u51fd\u6570\u6210\u4e3a\u7c7b\u58f0\u660e\u7684\u7ed3\u679c\u3002\u8be5\u51fd\u6570\u7684\u4ee3\u7801\u6765\u81ea\u4e8e\u00a0constructor<\/code>\u00a0\u65b9\u6cd5\uff08\u5982\u679c\u6211\u4eec\u4e0d\u7f16\u5199\u8fd9\u79cd\u65b9\u6cd5\uff0c\u90a3\u4e48\u5b83\u5c31\u88ab\u5047\u5b9a\u4e3a\u7a7a\uff09\u3002<\/li>\n
  2. \u5b58\u50a8\u7c7b\u4e2d\u7684\u65b9\u6cd5\uff0c\u4f8b\u5982\u00a0User.prototype<\/code>\u00a0\u4e2d\u7684\u00a0sayHi<\/code>\u3002
    \n\u5f53\u00a0new User<\/code>\u00a0\u5bf9\u8c61\u88ab\u521b\u5efa\u540e\uff0c\u5f53\u6211\u4eec\u8c03\u7528\u5176\u65b9\u6cd5\u65f6\uff0c\u5b83\u4f1a\u4ece\u539f\u578b\u4e2d\u83b7\u53d6\u5bf9\u5e94\u7684\u65b9\u6cd5\uff0c\u6b63\u5982\u6211\u4eec\u5728\u00a0    F.prototype<\/a>\u00a0\u4e00\u7ae0\u4e2d\u6240\u8bb2\u7684\u90a3\u6837\u3002\u56e0\u6b64\uff0c\u5bf9\u8c61\u00a0new User<\/code>\u00a0\u53ef\u4ee5\u8bbf\u95ee\u7c7b\u4e2d\u7684\u65b9\u6cd5\u3002
    \n\u6211\u4eec\u53ef\u4ee5\u5c06\u00a0class User<\/code>\u00a0\u58f0\u660e\u7684\u7ed3\u679c\u89e3\u91ca\u4e3a
    \n\"Pasted<\/li>\n<\/ol>\n
    class User {\n  constructor(name) { this.name = name; }\n  sayHi() { alert(this.name); }\n}\n\n\/\/ class \u662f\u4e00\u4e2a\u51fd\u6570\nalert(typeof User); \/\/ function\n\n\/\/ ...\u6216\u8005\uff0c\u66f4\u786e\u5207\u5730\u8bf4\uff0c\u662f constructor \u65b9\u6cd5\nalert(User === User.prototype.constructor); \/\/ true\n\n\/\/ \u65b9\u6cd5\u5728 User.prototype \u4e2d\uff0c\u4f8b\u5982\uff1a\nalert(User.prototype.sayHi); \/\/ sayHi \u65b9\u6cd5\u7684\u4ee3\u7801\n\n\/\/ \u5728\u539f\u578b\u4e2d\u5b9e\u9645\u4e0a\u6709\u4e24\u4e2a\u65b9\u6cd5\nalert(Object.getOwnPropertyNames(User.prototype)); \/\/ constructor, sayHi\n<\/code><\/pre>\n
    \u4e0d\u4ec5\u4ec5\u662f\u8bed\u6cd5\u7cd6<\/h2>\n
    \u4eba\u4eec\u5e38\u8bf4\u00a0class<\/code>\u00a0\u662f\u4e00\u4e2a\u8bed\u6cd5\u7cd6\uff08\u65e8\u5728\u4f7f\u5185\u5bb9\u66f4\u6613\u9605\u8bfb\uff0c\u4f46\u4e0d\u5f15\u5165\u4efb\u4f55\u65b0\u5185\u5bb9\u7684\u8bed\u6cd5\uff09\uff0c\u56e0\u4e3a\u6211\u4eec\u5b9e\u9645\u4e0a\u53ef\u4ee5\u5728\u4e0d\u4f7f\u7528\u00a0class<\/code>\u00a0\u7684\u60c5\u51b5\u4e0b\u58f0\u660e\u76f8\u540c\u7684\u5185\u5bb9<\/p>\n
    \/\/ \u7528\u7eaf\u51fd\u6570\u91cd\u5199 class User\n\n\/\/ 1. \u521b\u5efa\u6784\u9020\u5668\u51fd\u6570\nfunction User(name) {\n  this.name = name;\n}\n\/\/ \u51fd\u6570\u7684\u539f\u578b\uff08prototype\uff09\u9ed8\u8ba4\u5177\u6709 "constructor" \u5c5e\u6027\uff0c\n\/\/ \u6240\u4ee5\uff0c\u6211\u4eec\u4e0d\u9700\u8981\u521b\u5efa\u5b83\n\n\/\/ 2. \u5c06\u65b9\u6cd5\u6dfb\u52a0\u5230\u539f\u578b\nUser.prototype.sayHi = function() {\n  alert(this.name);\n};\n\n\/\/ \u7528\u6cd5\uff1a\nlet user = new User("John");\nuser.sayHi();\n<\/code><\/pre>\n
    \u8fd9\u4e2a\u5b9a\u4e49\u7684\u7ed3\u679c\u4e0e\u4f7f\u7528\u7c7b\u5f97\u5230\u7684\u7ed3\u679c\u57fa\u672c\u76f8\u540c\u3002\u56e0\u6b64\uff0c\u8fd9\u786e\u5b9e\u662f\u5c06\u00a0class<\/code>\u00a0\u89c6\u4e3a\u4e00\u79cd\u5b9a\u4e49\u6784\u9020\u5668\u53ca\u5176\u539f\u578b\u65b9\u6cd5\u7684\u8bed\u6cd5\u7cd6\u7684\u7406\u7531\u3002
    \n\u5c3d\u7ba1\uff0c\u5b83\u4eec\u4e4b\u95f4\u5b58\u5728\u7740\u91cd\u5927\u5dee\u5f02\uff1a<\/p>\n
      \n
    1. \u9996\u5148\uff0c\u901a\u8fc7\u00a0class<\/code>\u00a0\u521b\u5efa\u7684\u51fd\u6570\u5177\u6709\u7279\u6b8a\u7684\u5185\u90e8\u5c5e\u6027\u6807\u8bb0\u00a0[[IsClassConstructor]]: true<\/code>\u3002\u56e0\u6b64\uff0c\u5b83\u4e0e\u624b\u52a8\u521b\u5efa\u5e76\u4e0d\u5b8c\u5168\u76f8\u540c\u3002
      \n\u7f16\u7a0b\u8bed\u8a00\u4f1a\u5728\u8bb8\u591a\u5730\u65b9\u68c0\u67e5\u8be5\u5c5e\u6027\u3002\u4f8b\u5982\uff0c\u4e0e\u666e\u901a\u51fd\u6570\u4e0d\u540c\uff0c\u5fc5\u987b\u4f7f\u7528\u00a0new<\/code>\u00a0\u6765\u8c03\u7528\u5b83<\/li>\n<\/ol>\n
      class User {\n  constructor() {}\n}\n\nalert(typeof User); \/\/ function\nUser(); \/\/ Error: Class constructor User cannot be invoked without 'new'\n<\/code><\/pre>\n
        \n
      1. \u6b64\u5916\uff0c\u5927\u591a\u6570 JavaScript \u5f15\u64ce\u4e2d\u7684\u7c7b\u6784\u9020\u5668\u7684\u5b57\u7b26\u4e32\u8868\u793a\u5f62\u5f0f\u90fd\u4ee5 \u201cclass\u2026\u201d \u5f00\u5934<\/li>\n<\/ol>\n
        class User {\n  constructor() {}\n}\n\nalert(User); \/\/ class User { ... }\n<\/code><\/pre>\n
          \n
        1. \u7c7b\u65b9\u6cd5\u4e0d\u53ef\u679a\u4e3e\u3002 \u7c7b\u5b9a\u4e49\u5c06\u00a0"prototype"<\/code>\u00a0\u4e2d\u7684\u6240\u6709\u65b9\u6cd5\u7684\u00a0enumerable<\/code>\u00a0\u6807\u5fd7\u8bbe\u7f6e\u4e3a\u00a0false<\/code>\u3002
          \n\u8fd9\u5f88\u597d\uff0c\u56e0\u4e3a\u5982\u679c\u6211\u4eec\u5bf9\u4e00\u4e2a\u5bf9\u8c61\u8c03\u7528\u00a0for..in<\/code>\u00a0\u65b9\u6cd5\uff0c\u6211\u4eec\u901a\u5e38\u4e0d\u5e0c\u671b class \u65b9\u6cd5\u51fa\u73b0\u3002<\/li>\n
        2. \u7c7b\u603b\u662f\u4f7f\u7528\u00a0use strict<\/code>\u3002 \u5728\u7c7b\u6784\u9020\u4e2d\u7684\u6240\u6709\u4ee3\u7801\u90fd\u5c06\u81ea\u52a8\u8fdb\u5165\u4e25\u683c\u6a21\u5f0f\u3002<\/li>\n<\/ol>\n
          \u7c7b\u8868\u8fbe\u5f0f<\/h2>\n
          \u5c31\u50cf\u51fd\u6570\u4e00\u6837\uff0c\u7c7b\u53ef\u4ee5\u5728\u53e6\u5916\u4e00\u4e2a\u8868\u8fbe\u5f0f\u4e2d\u88ab\u5b9a\u4e49\uff0c\u88ab\u4f20\u9012\uff0c\u88ab\u8fd4\u56de\uff0c\u88ab\u8d4b\u503c\u7b49\u3002<\/p>\n
          let User = class {\n  sayHi() {\n    alert("Hello");\n  }\n};\n<\/code><\/pre>\n
          \u7c7b\u4f3c\u4e8e\u547d\u540d\u51fd\u6570\u8868\u8fbe\u5f0f\uff08Named Function Expressions\uff09\uff0c\u7c7b\u8868\u8fbe\u5f0f\u53ef\u80fd\u4e5f\u5e94\u8be5\u6709\u4e00\u4e2a\u540d\u5b57\u3002
          \n\u5982\u679c\u7c7b\u8868\u8fbe\u5f0f\u6709\u540d\u5b57\uff0c\u90a3\u4e48\u8be5\u540d\u5b57\u4ec5\u5728\u7c7b\u5185\u90e8\u53ef\u89c1\uff1a<\/p>\n
          \/\/ \u201c\u547d\u540d\u7c7b\u8868\u8fbe\u5f0f\uff08Named Class Expression\uff09\u201d\n\/\/ (\u89c4\u8303\u4e2d\u6ca1\u6709\u8fd9\u6837\u7684\u672f\u8bed\uff0c\u4f46\u662f\u5b83\u548c\u547d\u540d\u51fd\u6570\u8868\u8fbe\u5f0f\u7c7b\u4f3c)\nlet User = class MyClass {\n  sayHi() {\n    alert(MyClass); \/\/ MyClass \u8fd9\u4e2a\u540d\u5b57\u4ec5\u5728\u7c7b\u5185\u90e8\u53ef\u89c1\n  }\n};\n\nnew User().sayHi(); \/\/ \u6b63\u5e38\u8fd0\u884c\uff0c\u663e\u793a MyClass \u4e2d\u5b9a\u4e49\u7684\u5185\u5bb9\n\nalert(MyClass); \/\/ error\uff0cMyClass \u5728\u5916\u90e8\u4e0d\u53ef\u89c1\n<\/code><\/pre>\n
          \u6211\u4eec\u751a\u81f3\u53ef\u4ee5\u52a8\u6001\u5730\u201c\u6309\u9700\u201d\u521b\u5efa\u7c7b\uff0c\u5c31\u50cf\u8fd9\u6837\uff1a<\/p>\n
          function makeClass(phrase) {\n  \/\/ \u58f0\u660e\u4e00\u4e2a\u7c7b\u5e76\u8fd4\u56de\u5b83\n  return class {\n    sayHi() {\n      alert(phrase);\n    }\n  };\n}\n\n\/\/ \u521b\u5efa\u4e00\u4e2a\u65b0\u7684\u7c7b\nlet User = makeClass("Hello");\n\nnew User().sayHi(); \/\/ Hello\n<\/code><\/pre>\n
          Getters\/setters<\/h2>\n
          \u5c31\u50cf\u5bf9\u8c61\u5b57\u9762\u91cf\uff0c\u7c7b\u53ef\u80fd\u5305\u62ec getters\/setters\uff0c\u8ba1\u7b97\u5c5e\u6027\uff08computed properties\uff09\u7b49\u3002
          \n\u8fd9\u662f\u4e00\u4e2a\u4f7f\u7528\u00a0get\/set<\/code>\u00a0\u5b9e\u73b0\u00a0user.name<\/code>\u00a0\u7684\u793a\u4f8b<\/p>\n
          class User {\n\n  constructor(name) {\n    \/\/ \u8c03\u7528 setter\n    this.name = name;\n  }\n\n  get name() {\n    return this._name;\n  }\n\n  set name(value) {\n    if (value.length < 4) {\n      alert("Name is too short.");\n      return;\n    }\n    this._name = value;\n  }\n\n}\n\nlet user = new User("John");\nalert(user.name); \/\/ John\n\nuser = new User(""); \/\/ Name is too short.\n<\/code><\/pre>\n
          \u4ece\u6280\u672f\u4e0a\u6765\u8bb2\uff0c\u8fd9\u6837\u7684\u7c7b\u58f0\u660e\u53ef\u4ee5\u901a\u8fc7\u5728\u00a0User.prototype<\/code>\u00a0\u4e2d\u521b\u5efa getters \u548c setters \u6765\u5b9e\u73b0\u3002<\/p>\n
          \u8ba1\u7b97\u5c5e\u6027\u540d\u79f0[...]<\/h2>\n
          class User {\n  ['say' + 'Hi']() {\n    alert("Hello");\n  }\n}\n\nnew User().sayHi();\n<\/code><\/pre>\n
          \u8fd9\u79cd\u7279\u6027\u5f88\u5bb9\u6613\u8bb0\u4f4f\uff0c\u56e0\u4e3a\u5b83\u4eec\u548c\u5bf9\u8c61\u5b57\u9762\u91cf\u7c7b\u4f3c\u3002<\/p>\n
          Class \u5b57\u6bb5<\/h2>\n
          \n
          \u65e7\u7684\u6d4f\u89c8\u5668\u53ef\u80fd\u9700\u8981 polyfill
          \n\u7c7b\u5b57\u6bb5\uff08field\uff09\u662f\u6700\u8fd1\u624d\u6dfb\u52a0\u5230\u8bed\u8a00\u4e2d\u7684\u3002<\/p>\n<\/blockquote>\n
          \u4e4b\u524d\uff0c\u6211\u4eec\u7684\u7c7b\u4ec5\u5177\u6709\u65b9\u6cd5\u3002
          \n\u201c\u7c7b\u5b57\u6bb5\u201d\u662f\u4e00\u79cd\u5141\u8bb8\u6dfb\u52a0\u4efb\u4f55\u5c5e\u6027\u7684\u8bed\u6cd5\u3002
          \n\u4f8b\u5982\uff0c\u8ba9\u6211\u4eec\u5728 class User \u4e2d\u6dfb\u52a0\u4e00\u4e2a name \u5c5e\u6027<\/p>\n
          class User {\n  name = "John";\n\n  sayHi() {\n    alert(`Hello, ${this.name}!`);\n  }\n}\n\nnew User().sayHi(); \/\/ Hello, John!\n<\/code><\/pre>\n
          \u6240\u4ee5\uff0c\u6211\u4eec\u5c31\u53ea\u9700\u5728\u8868\u8fbe\u5f0f\u4e2d\u5199 "\u00a0=\u00a0"\uff0c\u5c31\u8fd9\u6837\u3002
          \n\u7c7b\u5b57\u6bb5\u91cd\u8981\u7684\u4e0d\u540c\u4e4b\u5904\u5728\u4e8e\uff0c\u5b83\u4eec\u4f1a\u5728\u6bcf\u4e2a\u72ec\u7acb\u5bf9\u8c61\u4e2d\u88ab\u8bbe\u597d\uff0c\u800c\u4e0d\u662f\u8bbe\u5728\u00a0User.prototype<\/code>\uff1a<\/p>\n
          class User {\n  name = "John";\n}\n\nlet user = new User();\nalert(user.name); \/\/ John\nalert(User.prototype.name); \/\/ undefined\n<\/code><\/pre>\n
          \u7c7b\u7ee7\u627f<\/h1>\n
          "extends" \u5173\u952e\u5b57<\/h2>\n
          class Animal {\n  constructor(name) {\n    this.speed = 0;\n    this.name = name;\n  }\n  run(speed) {\n    this.speed = speed;\n    alert(`${this.name} runs with speed ${this.speed}.`);\n  }\n  stop() {\n    this.speed = 0;\n    alert(`${this.name} stands still.`);\n  }\n}\n\nlet animal = new Animal("My animal");\n<\/code><\/pre>\n
          \"Pasted<\/div>
          \n\u6269\u5c55\u53e6\u4e00\u4e2a\u7c7b\u7684\u8bed\u6cd5\u662f\uff1aclass Child extends Parent<\/code>\u3002<\/p>\n
          class Rabbit extends Animal {\n  hide() {\n    alert(`${this.name} hides!`);\n  }\n}\n\nlet rabbit = new Rabbit("White Rabbit");\n\nrabbit.run(5); \/\/ White Rabbit runs with speed 5.\nrabbit.hide(); \/\/ White Rabbit hides!\n<\/code><\/pre>\n
          \u5728\u5185\u90e8\uff0c\u5173\u952e\u5b57\u00a0extends<\/code>\u00a0\u4f7f\u7528\u4e86\u5f88\u597d\u7684\u65e7\u7684\u539f\u578b\u673a\u5236\u8fdb\u884c\u5de5\u4f5c\u3002\u5b83\u5c06\u00a0Rabbit.prototype.[[Prototype]]<\/code>\u00a0\u8bbe\u7f6e\u4e3a\u00a0Animal.prototype<\/code>\u3002\u6240\u4ee5\uff0c\u5982\u679c\u5728\u00a0Rabbit.prototype<\/code>\u00a0\u4e2d\u627e\u4e0d\u5230\u4e00\u4e2a\u65b9\u6cd5\uff0cJavaScript \u5c31\u4f1a\u4ece\u00a0Animal.prototype<\/code>\u00a0\u4e2d\u83b7\u53d6\u8be5\u65b9\u6cd5\u3002
          \n
          \"Pasted<\/div>
          \n\u4f8b\u5982\uff0c\u8981\u67e5\u627e\u00a0rabbit.run<\/code>\u00a0\u65b9\u6cd5\uff0cJavaScript \u5f15\u64ce\u4f1a\u8fdb\u884c\u5982\u4e0b\u68c0\u67e5\uff08\u5982\u56fe\u6240\u793a\u4ece\u4e0b\u5230\u4e0a\uff09\uff1a<\/p>\n
            \n
          1. \u67e5\u627e\u5bf9\u8c61\u00a0rabbit<\/code>\uff08\u6ca1\u6709\u00a0run<\/code>\uff09\u3002<\/li>\n
          2. \u67e5\u627e\u5b83\u7684\u539f\u578b\uff0c\u5373\u00a0Rabbit.prototype<\/code>\uff08\u6709\u00a0hide<\/code>\uff0c\u4f46\u6ca1\u6709\u00a0run<\/code>\uff09\u3002<\/li>\n
          3. \u67e5\u627e\u5b83\u7684\u539f\u578b\uff0c\u5373\uff08\u7531\u4e8e\u00a0extends<\/code>\uff09Animal.prototype<\/code>\uff0c\u5728\u8fd9\u513f\u627e\u5230\u4e86\u00a0run<\/code>\u00a0\u65b9\u6cd5\u3002
            \n\u6211\u4eec\u53ef\u4ee5\u56de\u5fc6\u4e00\u4e0b\u00a0\u539f\u751f\u7684\u539f\u578b<\/a>\u00a0\u8fd9\u4e00\u7ae0\u7684\u5185\u5bb9\uff0cJavaScript \u5185\u5efa\u5bf9\u8c61\u540c\u6837\u4e5f\u4f7f\u7528\u539f\u578b\u7ee7\u627f\u3002\u4f8b\u5982\uff0cDate.prototype.[[Prototype]]<\/code>\u00a0\u662f\u00a0Object.prototype<\/code>\u3002\u8fd9\u5c31\u662f\u4e3a\u4ec0\u4e48\u65e5\u671f\u53ef\u4ee5\u8bbf\u95ee\u901a\u7528\u5bf9\u8c61\u7684\u65b9\u6cd5\u3002<\/li>\n<\/ol>\n
            \n
            \u5728\u00a0extends<\/code>\u00a0\u540e\u5141\u8bb8\u4efb\u610f\u8868\u8fbe\u5f0f
            \n\u7c7b\u8bed\u6cd5\u4e0d\u4ec5\u5141\u8bb8\u6307\u5b9a\u4e00\u4e2a\u7c7b\uff0c\u5728\u00a0extends<\/code>\u00a0\u540e\u53ef\u4ee5\u6307\u5b9a\u4efb\u610f\u8868\u8fbe\u5f0f\u3002
            \n\u4f8b\u5982\uff0c\u4e00\u4e2a\u751f\u6210\u7236\u7c7b\u7684\u51fd\u6570\u8c03\u7528\uff1a<\/p>\n<\/blockquote>\n
            function f(phrase) {\n  return class {\n    sayHi() { alert(phrase); }\n  };\n}\n\nclass User extends f("Hello") {}\n\nnew User().sayHi(); \/\/ Hello\n<\/code><\/pre>\n
            \u8fd9\u91cc\u00a0class User<\/code>\u00a0\u7ee7\u627f\u81ea\u00a0f("Hello")<\/code>\u00a0\u7684\u7ed3\u679c\u3002
            \n\u8fd9\u5bf9\u4e8e\u9ad8\u7ea7\u7f16\u7a0b\u6a21\u5f0f\uff0c\u4f8b\u5982\u5f53\u6211\u4eec\u6839\u636e\u8bb8\u591a\u6761\u4ef6\u4f7f\u7528\u51fd\u6570\u751f\u6210\u7c7b\uff0c\u5e76\u7ee7\u627f\u5b83\u4eec\u65f6\u6765\u8bf4\u53ef\u80fd\u5f88\u6709\u7528\u3002<\/p>\n
            \u91cd\u5199\u65b9\u6cd5<\/h2>\n
            \u73b0\u5728\uff0c\u8ba9\u6211\u4eec\u7ee7\u7eed\u524d\u884c\u5e76\u5c1d\u8bd5\u91cd\u5199\u4e00\u4e2a\u65b9\u6cd5\u3002\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u6240\u6709\u672a\u5728\u00a0class Rabbit<\/code>\u00a0\u4e2d\u6307\u5b9a\u7684\u65b9\u6cd5\u5747\u4ece\u00a0class Animal<\/code>\u00a0\u4e2d\u76f4\u63a5\u83b7\u53d6\u3002
            \n\u4f46\u662f\u5982\u679c\u6211\u4eec\u5728\u00a0Rabbit<\/code>\u00a0\u4e2d\u6307\u5b9a\u4e86\u6211\u4eec\u81ea\u5df1\u7684\u65b9\u6cd5\uff0c\u4f8b\u5982\u00a0stop()<\/code>\uff0c\u90a3\u4e48\u5c06\u4f1a\u4f7f\u7528\u5b83
            \n\u7136\u800c\u901a\u5e38\uff0c\u6211\u4eec\u4e0d\u5e0c\u671b\u5b8c\u5168\u66ff\u6362\u7236\u7c7b\u7684\u65b9\u6cd5\uff0c\u800c\u662f\u5e0c\u671b\u5728\u7236\u7c7b\u65b9\u6cd5\u7684\u57fa\u7840\u4e0a\u8fdb\u884c\u8c03\u6574\u6216\u6269\u5c55\u5176\u529f\u80fd\u3002\u6211\u4eec\u5728\u6211\u4eec\u7684\u65b9\u6cd5\u4e2d\u505a\u4e00\u4e9b\u4e8b\u513f\uff0c\u4f46\u662f\u5728\u5b83\u4e4b\u524d\u6216\u4e4b\u540e\u6216\u5728\u8fc7\u7a0b\u4e2d\u4f1a\u8c03\u7528\u7236\u7c7b\u65b9\u6cd5\u3002
            \nClass \u4e3a\u6b64\u63d0\u4f9b\u4e86\u00a0"super"<\/code>\u00a0\u5173\u952e\u5b57\u3002<\/p>\n