{"id":1331,"date":"2022-06-26T00:52:07","date_gmt":"2022-06-25T16:52:07","guid":{"rendered":"https:\/\/zhuxinyong.com\/?p=1331"},"modified":"2022-06-26T16:23:49","modified_gmt":"2022-06-26T08:23:49","slug":"44-yuan-xing-ji-cheng","status":"publish","type":"post","link":"https:\/\/zhuxinyong.com\/?p=1331","title":{"rendered":"44 – \u539f\u578b\u7ee7\u627f"},"content":{"rendered":"

\"\"<\/p>\n

\u539f\u6587\u5730\u5740\uff1ahttps:\/\/dev.to\/bhagatparwinder\/prototypical-inheritance-3b0p<\/a><\/p>\n

\u5728\u8fd9\u4e00\u7cfb\u5217\u6587\u7ae0\u4e4b\u524d\uff0c\u6211\u4eec\u8c08\u5230 JavaScript \u4e2d\u7684\u4e00\u5207\u7686\u5bf9\u8c61\u3002\u5f53\u6211\u4eec\u521b\u5efa\u5bf9\u8c61\u7684\u65f6\u5019\uff0c\u672c\u8eab\u5c31\u662f\u9700\u8981\u91cd\u7528\u5c5e\u6027\u548c\u65b9\u6cd5\u3002\u5927\u591a\u6570\u73b0\u4ee3\u8bed\u8a00\u90fd\u4ee5\u8fd9\u6837\u6216\u90a3\u6837\u7684\u65b9\u5f0f\u652f\u6301\u7ee7\u627f\uff0cJavaScript \u901a\u8fc7\u539f\u578b\u94fe\u6216\u7ee7\u627f\u6765\u5b9e\u73b0\u3002<\/p>\n

JavaScript \u4e2d\u7684\u6bcf\u4e2a\u5bf9\u8c61\u90fd\u6709\u4e00\u4e2a\u9690\u85cf\u7684\u5c5e\u6027[[Prototype]]<\/code>\uff0c\u5b83\u6709\u4e24\u4e2a\u503c\uff1a\u8981\u4e48\u662f null \uff08\u6307\u5411\u539f\u578b\u94fe\u7684\u6700\u672b\u7aef\uff09 \u6216\u662f\u6307\u5411\u53e6\u4e00\u4e2a\u5bf9\u8c61\u3002<\/p>\n

\u539f\u578b\u5bf9\u8c61\u81ea\u8eab\u4e5f\u6709\u539f\u578b\uff0c\u76f4\u5230\u5bf9\u8c61\u5230\u8fbe null \u4e3a\u5b83\u7684\u539f\u578b\u3002<\/p>\n

<\/span><\/a>\u4ece\u5bf9\u8c61\u7ee7\u627f\u5c5e\u6027<\/h2>\n
\/\/ declare an initial object animal with height and weight property\nlet animal = {\n    height: 5,\n    weight: 50\n};\n\nconsole.log(animal.__proto__); \/\/ null or  {}\n\/\/ since animal is not inherited from anything, it doesn't have a prototypical chain\n\n\/\/ create an object fish from animal\nlet fish = Object.create(animal);\n\nconsole.log(fish.height); \/\/ 5, inherited from animal\nconsole.log(fish.weight); \/\/ 50, inherited from animal\nconsole.log(fish.__proto__); \/\/ { height: 5, weight: 50 }\n\/\/ ^ chain points to animal, that is how we got fish height and weight\n\nfish.canSwim = true; \/\/ adding a property to fish object\n\nconsole.log(animal.canSwim); \/\/ undefined, it does not exist on animal. It is fish's own property\nconsole.log(fish.canSwim); \/\/ true\n\nlet octopus = Object.create(fish); \/\/ create an object from fish\n\nconsole.log(octopus.height); \/\/ 5, traversing the prototype chain octopus => fish => animal\nconsole.log(octopus.weight); \/\/ 50, inherited all the way from animal\nconsole.log(octopus.__proto__); \/\/ { canSwim: true }, points to fish but only shows properties that fish "owns"\n\noctopus.legs = 8; \/\/ adding a property to octopus object\n\nconsole.log(octopus.legs); \/\/ 8\nconsole.log(animal.legs); \/\/ neither animal or fish has the legs property\nconsole.log(fish.legs);\n\n\/\/ hasOwnProperty method is true when an Object owns a property and did not inherit it\nconsole.log(octopus.hasOwnProperty("legs")); \/\/ true\nconsole.log(octopus.hasOwnProperty("height")); \/\/ false\nconsole.log(fish.hasOwnProperty("weight")); \/\/ false\n<\/code><\/pre>\n
<\/span><\/a>__ proto __<\/h2>\n
\u5728\u4e0a\u9762\u7684\u4f8b\u5b50\u4e2d\uff0c\u6211\u4eec\u4f7f\u7528 __proto__<\/code> \u6765\u83b7\u53d6\u5bf9\u8c61\u7684 prototype\uff0c__proto__<\/code> \u662f\u7528\u6765\u8bfb\u5199 [[Prototype]] \u7684\u3002\u6211\u4eec\u73b0\u5728\u6709\u66f4\u65b0\u7684\u65b9\u6cd5\u6765\u505a\u540c\u6837\u7684\u4e8b\uff08getProtypeOf<\/code> \u548c setProtypeOf<\/code>\uff09\uff0c\u4f46 __proto__<\/code> \u4f9d\u65e7\u88ab\u5927\u591a\u6570\u6d4f\u89c8\u5668\u6216\u670d\u52a1\u7aef\u73af\u5883\u652f\u6301\u3002<\/p>\n
__proto__<\/code> \u6709\u4e24\u6761\u89c4\u5219\uff1a<\/p>\n
    \n
  1. \u5728\u4efb\u4f55\u65f6\u5019\uff0c__proto__\u90fd\u4e0d\u80fd\u521b\u5efa\u4e00\u4e2a\u5faa\u73af\u5f15\u7528\u6216\u4f9d\u8d56\u5173\u7cfb\u3002\u5982\u679c\u6211\u4eec\u5728\u4e00\u4e2a\u5faa\u73af\u5f15\u7528\u4e2d\u5206\u914dproto\uff0cJavaScript\u4f1a\u629b\u51fa\u4e00\u4e2a\u9519\u8bef\u3002<\/li>\n
  2. \u5c31\u50cf\u6211\u4eec\u4e0a\u9762\u63d0\u5230\u7684 proto<\/code> \u7684\u503c\u8981\u4e48\u662f\u4e00\u4e2a\u5bf9\u8c61\u8981\u4e48\u662f null\u3002<\/li>\n<\/ol>\n
    <\/span><\/a>\u901a\u8fc7\u6784\u9020\u51fd\u6570\u6765\u7ee7\u627f\u5c5e\u6027<\/h2>\n
    let foo = function() {\n    this.name = "Parwinder";\n    this.age = 57;\n}\n\nlet bar = new foo(); \/\/ create an object bar using function foo\n\nconsole.log(bar); \/\/ foo { name: 'Parwinder', age: 57 }, due to inheritance\nconsole.log(bar.name); \/\/ Parwinder, inherited from foo\n\nfoo.prototype.car = "Volvo"; \/\/ adding a new property "car" to original function foo\n\nconsole.log(bar.car); \/\/ Volvo\n\/\/ check bar if it has a property car, if not follow up the prototype chain.\n\/\/ get to foo following the chain\n\/\/ does foo have car on its prototype? Yes. Log the value "Volvo"\n\nconsole.log(bar.gender); \/\/ undefined\n\/\/ check bar if it has a property gender, if not follow up the prototype chain.\n\/\/ get to foo following the chain\n\/\/ does foo have gender on its prototype? no.\n\/\/ go up the prototypical chain.\n\/\/ we have reached the end of the chain with null. Log undefined.\n<\/code><\/pre>\n
    <\/span><\/a>this \u5173\u952e\u5b57\u7684\u884c\u4e3a\u548c\u7ee7\u627f<\/h2>\n
    \u65e0\u8bba\u65b9\u6cd5\u662f\u5728\u5bf9\u8c61\u6216\u8005\u539f\u578b\u94fe\u4e2d\u53d1\u73b0\u7684\uff0cthis<\/code> \u6c38\u8fdc\u6307\u5411\u70b9\u524d\u9762\u7684\u5bf9\u8c61\u3002\u8ba9\u6211\u4eec\u6765\u4ee5\u4e00\u4e2a\u4f8b\u5b50\u6765\u7406\u89e3\u4e0b\uff1a<\/p>\n
    const checkVotingRights = {\n  age: 24,\n  legalToVote: function() {\n    return this.age > 18;\n  }\n};\n\nconsole.log(checkVotingRights.age); \/\/ 24\n\/\/ When calling checkVotingRights.age in this case, "this" refers to checkVotingRights\nconsole.log(checkVotingRights.legalToVote());\n\nconst teenagerEligible = Object.create(checkVotingRights);\n\/\/ teenagerEligible is an object that inherits checkVotingRights\n\nteenagerEligible.age = 13; \/\/ set age on the newly created object\n\nconsole.log(teenagerEligible.legalToVote()); \/\/ false\n\/\/ when teenagerEligible.legalToVote is called, "this" refers to teenagerEligible\n<\/code><\/pre>\n
    <\/span><\/a>delete \u64cd\u4f5c\u7b26\u4e0e Object.create \u4e00\u8d77\u4f7f\u7528<\/h2>\n
    \u65e0\u8bba\u4f55\u65f6\u6211\u4eec\u4ece\u5bf9\u8c61\u5220\u9664\u4e00\u4e2a\u7ee7\u627f\u7684\u5c5e\u6027\u65f6\uff0c\u5b83\u5c06\u4f1a\u6253\u5370\u7ee7\u627f\u7684\u503c\u3002<\/p>\n
    var a = {\n    a: 1\n};\n\nvar b = Object.create(a);\n\nconsole.log(a.a); \/\/ 1\nconsole.log(b.a); \/\/ 1\n\nb.a = 10;\n\nconsole.log(a.a); \/\/ 1\nconsole.log(b.a); \/\/ 10\n\ndelete b.a;\n\nconsole.log(a.a); \/\/ 1\nconsole.log(b.a); \/\/ 1, value deleted but showing value from a\n\ndelete a.a;\n\nconsole.log(a.a); \/\/ undefined\nconsole.log(b.a); \/\/ undefined\n<\/code><\/pre>\n
    <\/span><\/a>\u638c\u63e1 for…in<\/h2>\n
    for...in<\/code> \u5faa\u73af\u5bf9\u8c61\u4e0a\u7684\u5c5e\u6027\u5305\u62ec\u7ee7\u627f\u6765\u7684\u5c5e\u6027\u3002<\/p>\n
    let animal = {\n    height: 5,\n    weight: 50\n};\n\nlet fish = Object.create(animal);\n\nfish.canSwim = true;\n\nfor (let item in fish) {\n    console.log(item); \/\/ canSwim, height, weight\n}\n\nfor (let item in fish) {\n    console.log(fish[item]); \/\/ true, 5, 50\n}\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
    \u539f\u6587\u5730\u5740\uff1ahttps:\/\/dev.to\/bhagatparwinder\/prototypical-i...<\/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":[166,165],"class_list":["post-1331","post","type-post","status-publish","format-standard","hentry","category-all","category-frontend","category-tech","tag-__proto__","tag-prototype"],"_links":{"self":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/1331","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=1331"}],"version-history":[{"count":1,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/1331\/revisions"}],"predecessor-version":[{"id":1332,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/1331\/revisions\/1332"}],"wp:attachment":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1331"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1331"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1331"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}