-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdocs__myblog__js__03.md.js
More file actions
1 lines (1 loc) · 15 KB
/
docs__myblog__js__03.md.js
File metadata and controls
1 lines (1 loc) · 15 KB
1
(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([[73],{FC9r:function(e,n,t){"use strict";t.r(n);var a=t("q1tI"),l=t.n(a),c=t("dEAq"),o=t("H1Ra"),r=l.a.memo((e=>{e.demos;return l.a.createElement(l.a.Fragment,null,l.a.createElement("div",{className:"markdown"},l.a.createElement("h2",{id:"\u539f\u578b\u548c\u539f\u578b\u94fe"},l.a.createElement(c["AnchorLink"],{to:"#\u539f\u578b\u548c\u539f\u578b\u94fe","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u539f\u578b\u548c\u539f\u578b\u94fe"),l.a.createElement("p",null,"\u5728 js \u4e2d\uff0c\u6240\u6709\u5bf9\u8c61(\u5305\u62ec\u51fd\u6570)\u90fd\u6709",l.a.createElement("code",null,"__proto__"),"\u5c5e\u6027\uff0c\u4e00\u822c\u8fd9\u4e2a\u662f\u88ab\u79f0\u4e3a\u9690\u5f0f\u7684\u539f\u578b\uff0c\u8be5\u9690\u5f0f\u539f\u578b\u6307\u5411\u6784\u9020\u8be5\u5bf9\u8c61\u7684\u6784\u9020\u51fd\u6570\u7684\u539f\u578b\u3002 \u4f46\u662f",l.a.createElement("code",null,"prototype"),"\u662f\u53ea\u6709\u51fd\u6570\u624d\u6709\u7684\u5c5e\u6027,\u8fd9\u4e2a\u5c5e\u6027\u662f\u4e00\u4e2a\u6307\u9488\uff0c\u6307\u5411\u4e00\u4e2a\u5305\u542b\u6240\u6709\u5b9e\u4f8b\u5171\u4eab\u7684\u5c5e\u6027\u548c\u65b9\u6cd5\u7684\u5bf9\u8c61\uff0c\u79f0\u4e4b\u4e3a\u539f\u578b\u5bf9\u8c61\u3002\u539f\u578b\u5bf9\u8c61\u4e5f\u6709\u4e00\u4e2a",l.a.createElement("code",null,"constructor"),"\u5c5e\u6027\uff0c\u8be5\u5c5e\u6027\u6307\u56de\u8be5\u51fd\u6570"),l.a.createElement("p",null,"\u4e0b\u9762\u6709\u4e00\u9053\u9762\u8bd5\u9898"),l.a.createElement(o["a"],{code:"var F = function() {};\nObject.prototype.a = function() {\n console.log('a');\n};\nFunction.prototype.b = function() {\n console.log('b');\n};\n\nvar f = new F();\n// \u8bf7\u95eef\u6709\u65b9\u6cd5a \u65b9\u6cd5b\u5417\nf.a(); // \u53ef\u4ee5\u6267\u884c a\nf.b(); // \u4e0d\u80fd\u6267\u884c",lang:"js"}),l.a.createElement("p",null,"\u56e0\u4e3a",l.a.createElement("code",null,"f.__proto__==F.prototype"),",",l.a.createElement("code",null,"F.prototype.__proto__==Object.prototype"),",\u6240\u4ee5\u53ef\u4ee5\u6267\u884c",l.a.createElement("code",null,"a"),"\u65b9\u6cd5, \u7531\u4e8e",l.a.createElement("code",null,"f"),"\u7684\u539f\u578b\u94fe\u4e0a\u6ca1\u7ecf\u8fc7",l.a.createElement("code",null,"Function.prototype"),"\uff0c\u6240\u4ee5\u53d6\u4e0d\u5230",l.a.createElement("code",null,"b"),"\u65b9\u6cd5\u3002"),l.a.createElement("p",null,"\u7531\u4e8e\u6784\u9020\u51fd\u6570",l.a.createElement("code",null,"F"),"\u662f\u7531",l.a.createElement("code",null,"Function new"),"\u51fa\u6765\u7684\uff0c\u6240\u4ee5",l.a.createElement("code",null,"F.__proto__"),"\u6307\u5411",l.a.createElement("code",null,"Function.prototype"),"\uff0c\u6240\u4ee5 F \u51fd\u6570\u53ef\u4ee5\u53d6\u5230",l.a.createElement("code",null,"b"),"\u65b9\u6cd5"),l.a.createElement("p",null,l.a.createElement("strong",null,"\u539f\u578b\u94fe\u7ecf\u5178\u56fe")),l.a.createElement("img",{src:t("asIB")}),l.a.createElement("ul",null,l.a.createElement("li",null,l.a.createElement("code",null,"Object")," \u662f\u6240\u6709\u5bf9\u8c61\u7684\u7238\u7238\uff0c\u6240\u6709\u5bf9\u8c61\u90fd\u53ef\u4ee5\u901a\u8fc7 ",l.a.createElement("code",null,"__proto__")," \u627e\u5230\u5b83"),l.a.createElement("li",null,l.a.createElement("code",null,"Function")," \u662f\u6240\u6709\u51fd\u6570\u7684\u7238\u7238\uff0c\u6240\u6709\u51fd\u6570\u90fd\u53ef\u4ee5\u901a\u8fc7 ",l.a.createElement("code",null,"__proto__")," \u627e\u5230\u5b83"),l.a.createElement("li",null,"\u51fd\u6570\u7684 ",l.a.createElement("code",null,"prototype")," \u662f\u4e00\u4e2a\u5bf9\u8c61"),l.a.createElement("li",null,"\u5bf9\u8c61\u7684 ",l.a.createElement("code",null,"__proto__")," \u5c5e\u6027\u6307\u5411\u539f\u578b\uff0c ",l.a.createElement("code",null,"__proto__")," \u5c06\u5bf9\u8c61\u548c\u539f\u578b\u8fde\u63a5\u8d77\u6765\u7ec4\u6210\u4e86\u539f\u578b\u94fe")),l.a.createElement("h2",{id:"\u539f\u578b\u4e0e\u7ee7\u627f"},l.a.createElement(c["AnchorLink"],{to:"#\u539f\u578b\u4e0e\u7ee7\u627f","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u539f\u578b\u4e0e\u7ee7\u627f"),l.a.createElement("h3",{id:"\u539f\u578b\u94fe\u7ee7\u627f"},l.a.createElement(c["AnchorLink"],{to:"#\u539f\u578b\u94fe\u7ee7\u627f","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u539f\u578b\u94fe\u7ee7\u627f"),l.a.createElement("p",null,"\u539f\u578b\u94fe\u7ee7\u627f\u662f\u6bd4\u8f83\u5e38\u89c1\u7684\u4e00\u79cd\u7ee7\u627f\u65b9\u5f0f\uff0c\u5176\u4e2d\u6d89\u53ca\u6784\u9020\u51fd\u6570\u3001\u539f\u578b\u548c\u5b9e\u4f8b\uff0c\u4e09\u8005\u4e4b\u95f4\u5b58\u5728\u4e00\u4e2a\u8054\u7cfb\uff0c\u65e2\u6bcf\u4e00\u4e2a\u6784\u9020\u51fd\u6570\u90fd\u6709\u4e00\u4e2a\u539f\u578b\u5bf9\u8c61\uff0c\u539f\u578b\u5bf9\u8c61\u53c8\u5305\u542b\u4e00\u4e2a\u6307\u5411\u6784\u9020\u51fd\u6570\u7684\u6307\u9488\uff0c\u800c\u5b9e\u4f8b\u5219\u5305\u542b\u4e00\u4e2a\u539f\u578b\u5bf9\u8c61\u7684\u6307\u9488 \u5f0a\u7aef\uff1a\u5c31\u662f\u540c\u65f6\u5171\u7528\u4e00\u4e2a\u539f\u578b\u5bf9\u8c61\uff0c\u91cc\u9762\u7684\u6570\u636e\u4f1a\u5f88\u6df7\u4e71 \u4e0b\u9762\u4e3b\u8981\u770b\u4ee3\u7801\uff1a"),l.a.createElement(o["a"],{code:"function Parent() {\n this.name = 'parent';\n this.play = [1, 2, 3];\n}\n\nfunction Child() {\n this.type = 'child';\n}\nChild.prototype = new Parent();\nvar s1 = new Child();\nvar s2 = new Child();\ns1.play.push(4);\nconsole.log(s1.play, s2.play); //[1,2,3,4] [1,2,3,4]",lang:"js"}),l.a.createElement("h3",{id:"\u6784\u9020\u51fd\u6570\u7ee7\u627f"},l.a.createElement(c["AnchorLink"],{to:"#\u6784\u9020\u51fd\u6570\u7ee7\u627f","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u6784\u9020\u51fd\u6570\u7ee7\u627f"),l.a.createElement("p",null,"\u53ea\u80fd\u7ee7\u627f\u7236\u7c7b\u7684\u5b9e\u4f8b\u5c5e\u6027\u548c\u65b9\u6cd5\uff0c\u4e0d\u80fd\u7ee7\u627f\u539f\u578b\u5c5e\u6027\u6216\u8005\u65b9\u6cd5"),l.a.createElement(o["a"],{code:"function Parent() {\n this.name = 'parent';\n this.getPlay = function() {\n console.log('a');\n };\n}\n\nParent.prototype.getName = function() {\n return this.name;\n};\n\nfunction Child() {\n Parent.call(this);\n this.play = [1, 2, 3, 4];\n}\n\nlet childs = new Child();\nchilds.getPlay(); //\u6253\u5370\u51faa\nchilds.play(); //\u4f1a\u62a5\u9519",lang:"js"}),l.a.createElement("h3",{id:"\u7ec4\u5408\u7ee7\u627f"},l.a.createElement(c["AnchorLink"],{to:"#\u7ec4\u5408\u7ee7\u627f","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u7ec4\u5408\u7ee7\u627f"),l.a.createElement("p",null,"\u8fd9\u79cd\u65b9\u6cd5\u5f88\u597d\u7684\u89e3\u51b3\u4e86\u4e0a\u9762\u4e24\u79cd\u65b9\u5f0f\u7684\u5f0a\u7aef\uff0c\u4f46\u662f\u4f1a\u4ea7\u751f\u53e6\u5916\u7684\u95ee\u9898\uff0c\u5c31\u662f\u901a\u8fc7 ",l.a.createElement("code",null,"call")," \u65b9\u6cd5\u8c03\u7528 ",l.a.createElement("code",null,"Parent")," \u7684\u65f6\u5019\uff0c\u90a3\u4e48 ",l.a.createElement("code",null,"Parent")," \u591a\u6784\u9020\u4e00\u6b21\u5c31\u591a\u8fdb\u884c\u4e86\u4e00\u6b21\u6027\u80fd\u5f00\u9500\uff0c\u8fd9\u662f\u6211\u4eec\u4e0d\u613f\u770b\u5230\u7684"),l.a.createElement(o["a"],{code:"function Parent() {\n this.name = 'parent';\n this.play = [1, 2, 3];\n}\n\nParent.prototype.getName = function() {\n return this.name;\n};\n\nfunction Child() {\n Parent.call(this);\n this.type = 'child';\n}\n\nChild.prototype = new Parent();\nChild.prototype.constructor = Child;\n\nconst c1 = new Child();\nconst c2 = new Child();\nc1.play.push(4);\nconsole.log(c1.play, c2.play); //[1,2,3,4] [1,2,3]\nconsole.log(c1.getName()); //parent\nconsole.log(c2.getName()); //parent",lang:"js"}),l.a.createElement("h3",{id:"\u539f\u578b\u5f0f\u7ee7\u627f"},l.a.createElement(c["AnchorLink"],{to:"#\u539f\u578b\u5f0f\u7ee7\u627f","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u539f\u578b\u5f0f\u7ee7\u627f"),l.a.createElement("p",null,"\u8fd9\u91cc\u4e0d\u5f97\u4e0d\u63d0\u5230\u7684\u5c31\u662f ES5 \u91cc\u9762\u7684 ",l.a.createElement("code",null,"Object.create")," \u65b9\u6cd5\uff0c\u8fd9\u4e2a\u65b9\u6cd5\u63a5\u6536\u4e24\u4e2a\u53c2\u6570\uff1a\u4e00\u662f\u7528\u4f5c\u65b0\u5bf9\u8c61\u539f\u578b\u7684\u5bf9\u8c61\u3001\u4e8c\u662f\u4e3a\u65b0\u5bf9\u8c61\u5b9a\u4e49\u989d\u5916\u5c5e\u6027\u7684\u5bf9\u8c61"),l.a.createElement("p",null,"\u7f3a\u70b9\uff1a\u591a\u4e2a\u5b9e\u4f8b\u7684\u5f15\u7528\u7c7b\u578b\u5c5e\u6027\u6307\u5411\u76f8\u540c\u7684\u5185\u5b58"),l.a.createElement(o["a"],{code:"let Parent = {\n name: 'parent',\n friends: ['p1', 'p2', 'p3'],\n getName: function() {\n return this.name;\n },\n};\n\nlet child = Object.create(Parent);\nconsole.log(child);\nchild.name = 'child';\nchild.friends.push('jerry');\nconsole.log(child.name, child.friends, Parent); //child [\"p1\", \"p2\", \"p3\", \"jerry\"]",lang:"js"}),l.a.createElement("h3",{id:"\u5bc4\u751f\u5f0f\u7ee7\u627f"},l.a.createElement(c["AnchorLink"],{to:"#\u5bc4\u751f\u5f0f\u7ee7\u627f","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u5bc4\u751f\u5f0f\u7ee7\u627f"),l.a.createElement("p",null,"\u4f7f\u7528\u539f\u578b\u5f0f\u7ee7\u627f\u53ef\u4ee5\u83b7\u5f97\u4e00\u4efd\u76ee\u6807\u5bf9\u8c61\u7684\u6d45\u62f7\u8d1d\uff0c\u7136\u540e\u5229\u7528\u8fd9\u4e2a\u6d45\u62f7\u8d1d\u7684\u80fd\u529b\u518d\u8fdb\u884c\u589e\u5f3a\uff0c\u6dfb\u52a0\u4e00\u4e9b\u65b9\u6cd5\uff0c\u8fd9\u6837\u7684\u7ee7\u627f\u65b9\u5f0f\u5c31\u53eb\u4f5c\u5bc4\u751f\u5f0f\u7ee7\u627f"),l.a.createElement(o["a"],{code:"let parent5 = {\n name: 'parent5',\n friends: ['p1', 'p2', 'p3'],\n getName: function() {\n return this.name;\n },\n};\nfunction clone(original) {\n let clone = Object.create(original);\n clone.getFriends = function() {\n return this.friends;\n };\n return clone;\n}\n\nlet person5 = clone(parent5);\nconsole.log(person5.getName());\nconsole.log(person5.getFriends());",lang:"js"}),l.a.createElement("h3",{id:"\u5bc4\u751f\u7ec4\u5408\u5f0f\u7ee7\u627f"},l.a.createElement(c["AnchorLink"],{to:"#\u5bc4\u751f\u7ec4\u5408\u5f0f\u7ee7\u627f","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u5bc4\u751f\u7ec4\u5408\u5f0f\u7ee7\u627f"),l.a.createElement("p",null,"\u7ed3\u5408\u4e0a\u9762\u4e2d\u63d0\u53ca\u7684\u7ee7\u627f\u65b9\u5f0f\uff0c\u89e3\u51b3\u666e\u901a\u5bf9\u8c61\u7684\u7ee7\u627f\u95ee\u9898\u7684 ",l.a.createElement("code",null,"Object.create")," \u65b9\u6cd5\uff0c\u6211\u4eec\u5728\u524d\u9762\u8fd9\u51e0\u79cd\u7ee7\u627f\u65b9\u5f0f\u7684\u4f18\u7f3a\u70b9\u57fa\u7840\u4e0a\u8fdb\u884c\u6539\u9020\uff0c\u5f97\u51fa\u4e86\u5bc4\u751f\u7ec4\u5408\u5f0f\u7684\u7ee7\u627f\u65b9\u5f0f\uff0c",l.a.createElement("strong",null,"\u8fd9\u4e5f\u662f\u6240\u6709\u7ee7\u627f\u65b9\u5f0f\u91cc\u9762\u76f8\u5bf9\u6700\u4f18\u7684\u7ee7\u627f\u65b9\u5f0f")),l.a.createElement(o["a"],{code:"function clone(parent, child) {\n // \u8fd9\u91cc\u6539\u7528 Object.create \u5c31\u53ef\u4ee5\u51cf\u5c11\u7ec4\u5408\u7ee7\u627f\u4e2d\u591a\u8fdb\u884c\u4e00\u6b21\u6784\u9020\u7684\u8fc7\u7a0b\n child.prototype = Object.create(parent.prototype);\n child.prototype.constructor = child;\n}\n\nfunction Parent6() {\n this.name = 'parent6';\n this.play = [1, 2, 3];\n}\nParent6.prototype.getName = function() {\n return this.name;\n};\nfunction Child6() {\n Parent6.call(this);\n this.friends = 'child5';\n}\nclone(Parent6, Child6);\n\nChild6.prototype.getFriends = function() {\n return this.friends;\n};\n\nlet person6 = new Child6();\nconsole.log(person6);\nconsole.log(person6.getName());\nconsole.log(person6.getFriends());",lang:"js"}),l.a.createElement("h3",{id:"\u4f60\u77e5\u9053-new-\u64cd\u4f5c\u7b26\u7684\u5b9e\u73b0\u539f\u7406\u5417\u63cf\u8ff0\u4e0b"},l.a.createElement(c["AnchorLink"],{to:"#\u4f60\u77e5\u9053-new-\u64cd\u4f5c\u7b26\u7684\u5b9e\u73b0\u539f\u7406\u5417\u63cf\u8ff0\u4e0b","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u4f60\u77e5\u9053 new \u64cd\u4f5c\u7b26\u7684\u5b9e\u73b0\u539f\u7406\u5417\uff1f\u63cf\u8ff0\u4e0b"),l.a.createElement("ul",null,l.a.createElement("li",null,"\u521b\u5efa\u4e00\u4e2a\u65b0\u5bf9\u8c61"),l.a.createElement("li",null,"\u5c06\u6784\u9020\u51fd\u6570\u7684\u4f5c\u7528\u57df\u8d4b\u7ed9\u65b0\u5bf9\u8c61\uff08this \u6307\u5411\u65b0\u5bf9\u8c61\uff09"),l.a.createElement("li",null,"\u6267\u884c\u6784\u9020\u51fd\u6570\u4e2d\u7684\u4ee3\u7801\uff08\u4e3a\u8fd9\u4e2a\u5bf9\u8c61\u6dfb\u52a0\u65b0\u5c5e\u6027\uff09"),l.a.createElement("li",null,"\u8fd4\u56de\u65b0\u5bf9\u8c61")),l.a.createElement("blockquote",null,l.a.createElement("p",null,"new \u5173\u952e\u8bcd\u6267\u884c\u4e4b\u540e\u603b\u662f\u4f1a\u8fd4\u56de\u4e00\u4e2a\u5bf9\u8c61\uff0c\u8981\u4e48\u662f\u5b9e\u4f8b\u5bf9\u8c61\uff0c\u8981\u4e48\u662f return \u8bed\u53e5\u6307\u5b9a\u7684\u5bf9\u8c61")),l.a.createElement(o["a"],{code:"function myNew(constrc, ...args) {\n const obj = {}; // 1. \u521b\u5efa\u4e00\u4e2a\u7a7a\u5bf9\u8c61\n obj.__proto__ = constrc.prototype; // 2. \u5c06obj\u7684[[prototype]]\u5c5e\u6027\u6307\u5411\u6784\u9020\u51fd\u6570\u7684\u539f\u578b\u5bf9\u8c61\n // \u6216\u8005\u4f7f\u7528\u81ea\u5e26\u65b9\u6cd5\uff1aObject.setPrototypeOf(obj, constrc.prototype)\n const result = constrc.apply(obj, args); // 3.\u5c06constrc\u6267\u884c\u7684\u4e0a\u4e0b\u6587this\u7ed1\u5b9a\u5230obj\u4e0a\uff0c\u5e76\u6267\u884c\n return result instanceof Object ? result : obj; //4. \u5982\u679c\u6784\u9020\u51fd\u6570\u8fd4\u56de\u7684\u662f\u5bf9\u8c61\uff0c\u5219\u4f7f\u7528\u6784\u9020\u51fd\u6570\u6267\u884c\u7684\u7ed3\u679c\u3002\u5426\u5219\uff0c\u8fd4\u56de\u65b0\u521b\u5efa\u7684\u5bf9\u8c61\n}\n// \u4f7f\u7528\u7684\u4f8b\u5b50\uff1a\nfunction Person(name, age) {\n this.name = name;\n this.age = age;\n}\nconst person1 = myNew(Person, 'Tom', 20);\nconsole.log(person1); // Person {name: \"Tom\", age: 20}",lang:"js"}),l.a.createElement("h3",{id:"\u5199\u51fa\u4e0b\u9762\u4ee3\u7801\u7684\u7ed3\u679c"},l.a.createElement(c["AnchorLink"],{to:"#\u5199\u51fa\u4e0b\u9762\u4ee3\u7801\u7684\u7ed3\u679c","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u5199\u51fa\u4e0b\u9762\u4ee3\u7801\u7684\u7ed3\u679c\uff1f"),l.a.createElement(o["a"],{code:"function Person() {}\nvar p1 = new Person();\n\nconsole.log(p1.constructor); //funtion Person\nPerson.prototype = {\n name: '\u5c0f\u7ea2',\n};\nconsole.log(Person);\nvar p2 = new Person();\nconsole.log(p2.constructor); //function Object",lang:"js"}),l.a.createElement("h2",{id:"\u53c2\u8003\u8d44\u6599"},l.a.createElement(c["AnchorLink"],{to:"#\u53c2\u8003\u8d44\u6599","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u53c2\u8003\u8d44\u6599"),l.a.createElement("p",null,l.a.createElement(c["Link"],{to:"https://zhuanlan.zhihu.com/p/22989691"},"https://zhuanlan.zhihu.com/p/22989691"))))}));n["default"]=e=>{var n=l.a.useContext(c["context"]),t=n.demos;return l.a.useEffect((()=>{var n;null!==e&&void 0!==e&&null!==(n=e.location)&&void 0!==n&&n.hash&&c["AnchorLink"].scrollToAnchor(decodeURIComponent(e.location.hash.slice(1)))}),[]),l.a.createElement(r,{demos:t})}},asIB:function(e,n,t){e.exports=t.p+"static/proto.9ac3fca7.png"}}]);