[{"data":1,"prerenderedAt":296},["ShallowReactive",2],{"post-engineering/javascript-prototype-chain":3},{"id":4,"title":5,"body":6,"date":285,"description":286,"extension":287,"meta":288,"navigation":289,"path":290,"seo":291,"stem":292,"tags":293,"__hash__":295},"content/engineering/原型链.md","JavaScript的原型链",{"type":7,"value":8,"toc":270},"minimark",[9,13,17,33,37,63,70,83,90,93,110,113,125,128,150,153,160,163,167,173,180,264],[10,11,5],"h1",{"id":12},"javascript的原型链",[14,15,16],"h2",{"id":16},"原型链与继承",[18,19,20,27,32],"p",{},[21,22,26],"a",{"href":23,"rel":24},"https://zh.javascript.info/prototype-inheritance",[25],"nofollow","javascript.info",[21,28,31],{"href":29,"rel":30},"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain",[25],"MDN","优先参看MDN标准",[34,35,36],"h4",{"id":36},"原型与原型链",[18,38,39,40,44,45,48,49,51,52,55,56,59,60,62],{},"JavaScript中每个对象都有隐藏属性 ",[41,42,43],"code",{},"[[Prototype]]","指向另一个对象或",[41,46,47],{},"null","。当访问对象的一个属性时，会先查找自身是否含有该属性，否则查找",[41,50,43],{},"对象是否含有，直到",[41,53,54],{},"Object.[[Prototype]]","，",[41,57,58],{},"Object","的原型对象指向",[41,61,47],{},"\n被引用的对象称为原对象的原型，这样自下而上的查找机制构成了原型链\n如果原型对象拥有的属性或方法，会通过这种引用方式被对象继承",[34,64,66,67],{"id":65},"关于__proto__","关于",[41,68,69],{},"__proto__",[18,71,72,75,76,79,80,82],{},[41,73,74],{},"{ __proto__: ... }","与",[41,77,78],{},"Object.__proto__"," 不同\n前者可以为对象指定它的原型；但后者是浏览器对",[41,81,43],{},"属性访问器的实现，本质是该属性的setter和getter",[18,84,85,86,89],{},"现今该属性可以使用",[41,87,88],{},"Object.getPrototypeOf()、Object.setPrototypeOf()、Reflect.getPrototypeOf()、Reflect.setPrototypeOf()","进行访问和修改",[34,91,92],{"id":92},"继承",[94,95,96,107],"ul",{},[97,98,99,100,103,104,106],"li",{},"继承“方法”——JavaScript中没有“方法”，任何函数都可以作为属性定义在对象上，原型对象的方法也可在对象上调用，但",[41,101,102],{},"this","永远指向调用它的对象（即原对象调用方法时",[41,105,102],{},"指向原对象而非原型对象）。",[97,108,109],{},"继承属性——属性遮蔽：如果对象拥有某个属性，且其原型对象也拥有该属性（指同名属性），这时会采用对象的属性。",[14,111,112],{"id":112},"重用及继承",[18,114,115,116,119,120,124],{},"需要注意的是，并不应该操作构造函数的",[41,117,118],{},"prototype","对原生代码进行覆写。这种行为可能常见于面试题或面向面试题的教程（如",[21,121,26],{"href":122,"rel":123},"https://zh.javascript.info/function-prototype",[25],"）\n同理，使用该方法对程序中已有构造函数进行功能拓展也不合理",[34,126,127],{"id":127},"构造函数",[18,129,130,135,136,138,139,142,143,145,146,149],{},[21,131,134],{"href":132,"rel":133},"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0",[25],"该部分可参照MDN","以下解释仅为概念关系的描述\n构造函数的",[41,137,118],{},"指向原型对象，在使用",[41,140,141],{},"new","时自动为调用被构造的对象添加",[41,144,43],{},"，该属性指向原型对象。而对象的",[41,147,148],{},"constructor","指向构造函数",[18,151,152],{},"以上引用关系可以描述为",[18,154,155],{},[156,157],"img",{"alt":158,"src":159},"构造函数、prototype、实例与原型对象的关系","/img/t-proto.png",[18,161,162],{},"使用构造函数的目的在于实现继承，达成重用。通过类也可以实现重用",[34,164,166],{"id":165},"class","Class",[18,168,169,170,172],{},"使用",[41,171,166],{},"语法糖可以轻松完成原型的继承",[14,174,176],{"id":175},"使用不同的方法来创建对象和改变原型链",[21,177,175],{"href":178,"rel":179},"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain#%E4%BD%BF%E7%94%A8%E4%B8%8D%E5%90%8C%E7%9A%84%E6%96%B9%E6%B3%95%E6%9D%A5%E5%88%9B%E5%BB%BA%E5%AF%B9%E8%B1%A1%E5%92%8C%E6%94%B9%E5%8F%98%E5%8E%9F%E5%9E%8B%E9%93%BE",[25],[181,182,183,198],"table",{},[184,185,186],"thead",{},[187,188,189,192,195],"tr",{},[190,191],"th",{},[190,193,194],{},"优点",[190,196,197],{},"缺点",[199,200,201,216,226,239,251],"tbody",{},[187,202,203,210,213],{},[204,205,206,207],"td",{},"语法结构",[41,208,209],{},"{__proto__: ...}",[204,211,212],{},"高效",[204,214,215],{},"兼容问题（IE10）",[187,217,218,220,223],{},[204,219,127],{},[204,221,222],{},"更加高效、标准",[204,224,225],{},"需预先定义构造函数；可能会将不需要的方法添加给对象",[187,227,228,233,236],{},[204,229,230],{},[41,231,232],{},"Object.create()",[204,234,235],{},"运行运行时优化对象",[204,237,238],{},"兼容问题（IE8）",[187,240,241,245,248],{},[204,242,243],{},[41,244,166],{},[204,246,247],{},"私有属性、可读、可维护",[204,249,250],{},"私有属性性能问题；兼容问题",[187,252,253,258,261],{},[204,254,255],{},[41,256,257],{},"Object.setPrototypeOf(obj, anotherObj)",[204,259,260],{},"标准、动态修改",[204,262,263],{},"性能问题、兼容问题（IE8）",[265,266],"image-load-button",{"className":267,"src":269},[268],"mt-4","/img/创建对象与修改原型.png",{"title":271,"searchDepth":272,"depth":272,"links":273},"",4,[274,280,284],{"id":16,"depth":275,"text":16,"children":276},2,[277,278,279],{"id":36,"depth":272,"text":36},{"id":65,"depth":272,"text":65},{"id":92,"depth":272,"text":92},{"id":112,"depth":275,"text":112,"children":281},[282,283],{"id":127,"depth":272,"text":127},{"id":165,"depth":272,"text":166},{"id":175,"depth":275,"text":175},"2024-04-10","记录了我对原型链的理解","md",{},true,"/engineering/javascript-prototype-chain",{"title":5,"description":286},"engineering/原型链",[294],"JavaScript","dRQ0h9NWu29K9l22D4TI5oLJNGkly2qfK_VX4waF_Ko",1776757930046]