{"id":1373,"date":"2022-07-04T22:38:30","date_gmt":"2022-07-04T14:38:30","guid":{"rendered":"https:\/\/zhuxinyong.com\/?p=1373"},"modified":"2022-07-04T23:43:41","modified_gmt":"2022-07-04T15:43:41","slug":"54-lei-jing-tai-cheng-yuan-55-kuo-zhan-nei-zhi","status":"publish","type":"post","link":"https:\/\/zhuxinyong.com\/?p=1373","title":{"rendered":"54 – \u7c7b\uff1a\u9759\u6001\u6210\u5458 && 55 – \u6269\u5c55\u5185\u7f6e\u7684\u7c7b\u548c\u5bf9\u8c61"},"content":{"rendered":"

\"\"<\/p>\n

\u539f\u6587\u5730\u5740\uff1ahttps:\/\/dev.to\/bhagatparwinder\/class-static-members-3kl3<\/a><\/p>\n

JavaScript \u4e2d\u7684\u7c7b\u53ef\u4ee5\u6709\u9759\u6001\u65b9\u6cd5\u548c\u5c5e\u6027\uff0c\u8fd9\u4e9b\u90fd\u662f\u7c7b\u7684\u6210\u5458\u800c\u4e0d\u662f\u7c7b\u521b\u5efa\u7684\u5b9e\u4f8b\u5bf9\u8c61\u7684\u6210\u5458\u3002\u6700\u53ef\u80fd\u662f\uff0c\u4f60\u5c06\u9759\u6001\u65b9\u6cd5\u4f5c\u4e3a\u5de5\u5177\u65b9\u6cd5\uff08\u6bd4\u8f83\u7c7b\u7684\u5b9e\u4f8b\u3001\u514b\u9686\u548c\u521b\u5efa\u5bf9\u8c61\uff09\u3002<\/p>\n

<\/span><\/a>\u9759\u6001\u65b9\u6cd5<\/h2>\n
class Person {\n    name;\n    age;\n\n    constructor(name, age) {\n        this.name = name;\n        this.age = age;\n    }\n\n    static orderByAge(a, b) {\n        return a.age - b.age;\n    }\n}\n\nconst employees = [\n    new Person("Parwinder", 22),\n    new Person("Robert", 33),\n    new Person("George", 18),\n    new Person("Eliu", 101),\n    new Person("Gaurav", 39)\n]\n\nemployees.sort(Person.orderByAge);\n\nconsole.log(employees);\n<\/code><\/pre>\n
\u4e0a\u9762\u7684\u4f8b\u5b50\u4e2d\uff0cPerson<\/code> \u7c7b\u901a\u8fc7 name \u548c age \u521b\u5efa\u4e86\u4e00\u4e2a\u5b9e\u4f8b\u3002\u5728\u7c7b\u4e2d\u6211\u4eec\u521b\u5efa\u4e86\u4e00\u4e2a\u9759\u6001\u65b9\u6cd5 orderByAge<\/code>\uff0c\u8fd9\u4e2a\u65b9\u6cd5\u662f\u7528\u6765\u6bd4\u8f83\u6240\u6709\u7684 Person \u5e74\u9f84\u7684\uff0c\u6b64\u65b9\u6cd5\u4e0d\u5c5e\u4e8e\u4efb\u4f55\u5b9e\u4f8b\u800c\u662f\u5f52\u5c5e\u4e8e\u7c7b\uff08\u6216\u521b\u5efa\u5b83\u4eec\u7684\u7236\u7c7b\uff09\u3002<\/p>\n
\u4e0a\u9762\u4ee3\u7801\u5c06\u4f1a\u8f93\u51fa\u5982\u4e0b\uff1a<\/p>\n
[ \n  { name: 'George', age: 18 },\n  { name: 'Parwinder', age: 22 },\n  { name: 'Robert', age: 33 },\n  { name: 'Gaurav', age: 39 },\n  { name: 'Eliu', age: 101 } \n]\n<\/code><\/pre>\n
\u8bb0\u4f4f\u9759\u6001\u65b9\u6cd5\u53ea\u5c5e\u4e8e\u7c7b\uff0c\u4f60\u4e0d\u80fd\u50cf\u4e0b\u9762\u4ee3\u7801\u7684\u6700\u540e\u4e24\u884c\u90a3\u6837\u4e66\u5199\u3002<\/p>\n
class Person {\n    name;\n    age;\n\n    constructor(name, age) {\n        this.name = name;\n        this.age = age;\n    }\n\n    static orderByAge(a, b) {\n        return a.age - b.age;\n    }\n\n    static sayMyName(person) {\n        return person.name;\n    }\n}\n\nconst me = new Person("Parwinder", 101);\n\nconsole.log(me.name); \/\/ Parwinder => this is valid\nconsole.log(me.age); \/\/ 101 => this is valid\nconsole.log(me.orderByAge); \/\/ undefined or Property 'orderByAge' is a static member of type 'Person' \ud83d\udea8\nconsole.log(me.sayMyName); \/\/ undefined or Property 'sayMyName' is a static member of type 'Person' \ud83d\udea8\n<\/code><\/pre>\n
<\/span><\/a>\u9759\u6001\u5c5e\u6027\uff08\u6216\u516c\u5171\u9759\u6001\u5b57\u6bb5\uff09<\/h2>\n
\u8fd9\u4e2a\u7279\u6027\u76ee\u524d\u5728 ES \u63d0\u6848\u7684\u7b2c\u4e09\u9636\u6bb5(\u4f5c\u8005\u5199\u4f5c\u65f6)\u3002<\/p>\n
\u5f53\u6211\u4eec\u60f3\u8ba9\u4e00\u4e2a\u5b57\u6bb5\u53ea\u5b58\u5728\u4e8e\u7c7b\u4e2d\u800c\u4e0d\u662f\u6bcf\u4e2a\u5b9e\u4f8b\u4e2d\u65f6\u624d\u4f7f\u7528\u9759\u6001\u5b57\u6bb5\uff0c\u5b83\u53ef\u4ee5\u88ab\u7528\u6765\u5b58\u50a8\u914d\u7f6e\u3001\u7aef\u70b9\uff08endpoints\uff09\u3001\u7f13\u5b58\u7b49\u7b49\u3002<\/p>\n
class Base {\n    static field = "Base Class";\n}\n\nclass Child extends Base {\n\n}\n\nclass GrandChild extends Child {\n    static field = "Grand Child Class";\n}\n\nconsole.log(Base.field); \/\/ Base Class\nconsole.log(Child.field); \/\/ Base Class\nconsole.log(GrandChild.field); \/\/ Grand Child Class\n<\/code><\/pre>\n
\"\"<\/p>\n
\u4f60\u53ef\u80fd\u60f3\u6269\u5c55 JavaScript \u5185\u7f6e\u5bf9\u8c61\u6216\u7c7b\u63d0\u4f9b\u7684\u529f\u80fd\uff0c\u6216\u8005\u662f\u4e00\u4e9b\u76ee\u524d\u8fd8\u6ca1\u6709\u88ab JavaScript \u652f\u6301\u7684\u6570\u7ec4\u6216\u5b57\u7b26\u4e32\u7684\u65b9\u6cd5\uff0c\u4f46\u4f60\u7684\u9879\u76ee\u4e2d\u7ecf\u5e38\u8981\u7528\u5230\u3002\u5178\u578b\u5730\u662f\u4f60\u53ef\u4ee5\u521b\u5efa\u6807\u51c6\u7684\u65b9\u6cd5\u3002<\/p>\n
\u8ba9\u6211\u4eec\u4e00\u8d77\u6765\u770b\u770b\u6570\u7ec4\u6df7\u6392\u7684\u4f8b\u5b50\uff0c\u6211\u53ef\u4ee5\u521b\u5efa\u4e00\u4e2a\u63a5\u53d7\u6570\u7ec4\u7684\u6df7\u6392\u65b9\u6cd5\uff1a<\/p>\n
function shuffle(arr) {\n    for (let i = arr.length - 1; i > 0; i--) {\n        const random = Math.floor(Math.random() * (i + 1));\n        [arr[i], arr[random]] = [arr[random], arr[i]];\n    }\n    return arr;\n}\n\nconst input = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\nconsole.log(shuffle(input)); \/\/ [ 7, 8, 10, 3, 2, 9, 5, 1, 4, 6 ]\n<\/code><\/pre>\n
\u6ce8\u610f\uff1a\u4f60\u53ef\u80fd\u4f1a\u5f97\u5230\u4e00\u4e2a\u548c\u6211\u4e0d\u540c\u7684\u8f93\u51fa\u7ed3\u679c\u56e0\u4e3a\u6211\u4eec\u662f\u968f\u673a\u6df7\u6392\u6570\u7ec4\u7684\u3002<\/p>\n
\u6211\u4eec\u53ef\u4ee5\u5c06\u6df7\u6392\u65b9\u6cd5\u6dfb\u52a0\u5230\u539f\u578b\u4e0a\uff0c\u7136\u540e\u5c31\u53ef\u4ee5\u50cf\u4f7f\u7528\u5185\u7f6e\u65b9\u6cd5\u4e00\u6837\u4e86\uff08pop\u3001slice\u3001sort\uff09\u3002<\/p>\n
Array.prototype.shuffle = function () {\n    let arr = this;\n    for (let i = arr.length - 1; i > 0; i--) {\n        const random = Math.floor(Math.random() * (i + 1));\n        [arr[i], arr[random]] = [arr[random], arr[i]];\n    }\n    return arr;\n}\n\nconst input = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\nconsole.log(input.shuffle()); \/\/ [ 2, 4, 9, 8, 5, 7, 3, 10, 6, 1 ]\n<\/code><\/pre>\n
\u73b0\u5728\u6211\u4eec\u5df2\u7ecf\u5728\u539f\u578b\u4e0a\u6dfb\u52a0\u4e86\u8be5\u65b9\u6cd5\uff0c\u63a5\u7740\u5c31\u53ef\u4ee5\u4f7f\u7528\u4efb\u4f55\u6570\u7ec4\u4ee5 input.shuffle()<\/code> \u7684\u5f62\u5f0f\u8c03\u7528\u3002<\/p>\n
<\/span><\/a>\u7f3a\u70b9<\/h2>\n
\u591a\u6570\u5f00\u53d1\u8005\u4e0d\u5efa\u8bae\u76f4\u63a5\u6269\u5c55\u5185\u7f6e\u7c7b\u6216\u5bf9\u8c61\uff0c\u8fd9\u662f\u4e00\u4e2a\u6709\u4e89\u8bae\u7684\u8bdd\u9898\u3002\u4e0b\u9762\u5217\u51fa\u6765\u4e00\u4e9b\u7f3a\u70b9\uff1a<\/p>\n
    \n
  1. ECMAScript \u53ef\u80fd\u4f1a\u5728\u540e\u9762\u7684\u7248\u672c\u63d0\u4f9b\u7c7b\u4f3c\u7684\u65b9\u6cd5\uff0c\u6bd4\u5982\uff1a\u4e0b\u4e00\u4e2a\u7248\u672c\u7684 ES \u63d0\u4f9b shuffle<\/code> \uff0c\u90a3\u5c06\u4e0e\u6211\u4eec\u7684\u65b9\u6cd5\u51b2\u7a81\u3002<\/li>\n
  2. \u6211\u4eec\u53ef\u4ee5\u4efb\u610f\u7684\u4fee\u6539\u5b58\u5728\u65b9\u6cd5\u7684\u529f\u80fd\uff0c\u4f8b\u5982\uff1a\u6211\u53ef\u80fd\u4f1a\u901a\u8fc7\u81ea\u5b9a\u4e49\u529f\u80fd\u6765\u6539\u53d8 slice<\/code> \u65b9\u6cd5\u3002\u5bf9\u4e8e\u6574\u4e2a\u5e94\u7528\u4e0d\u662f\u4e00\u4e2a\u597d\u7684\u5b9e\u8df5\uff0c\u56e0\u4e3a\u5176\u5b83\u5730\u65b9\u53ef\u80fd\u4f1a\u4f9d\u8d56\u8be5\u5185\u7f6e\u65b9\u6cd5\uff0c\u5bfc\u81f4\u6211\u4f1a\u7834\u574f\u6574\u4e2a\u7ec4\u7ec7\u5185\u5f88\u591a\u540c\u4e8b\u7684\u4ee3\u7801\u529f\u80fd\u3002<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
    \u539f\u6587\u5730\u5740\uff1ahttps:\/\/dev.to\/bhagatparwinder\/class-static-m...<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,20,3],"tags":[168,180],"class_list":["post-1373","post","type-post","status-publish","format-standard","hentry","category-all","category-frontend","category-tech","tag-class","tag-static"],"_links":{"self":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/1373","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1373"}],"version-history":[{"count":1,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/1373\/revisions"}],"predecessor-version":[{"id":1374,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/1373\/revisions\/1374"}],"wp:attachment":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1373"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1373"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}