企业官网建设流程全解析

展示型网站制作公司,营销网站的成功案例,爱站网 关键词挖掘,wordpress数据库链接不上JavaScript创建对象的7种方式#xff1a;前端开发者必备技能#xff08;附实战技巧#xff09;JavaScript创建对象的7种方式#xff1a;前端开发者必备技能#xff08;附实战技巧#xff09;引言#xff1a;为什么搞懂对象创建方式这么重要JavaScript中的对象到底是什么…JavaScript创建对象的7种方式前端开发者必备技能附实战技巧JavaScript创建对象的7种方式前端开发者必备技能附实战技巧引言为什么搞懂对象创建方式这么重要JavaScript中的对象到底是什么从字面量开始最简单也最容易被忽视的方式构造函数面向对象编程的起点Object.create()站在巨人肩膀上造对象ES6类语法现代JavaScript的优雅写法工厂函数灵活封装对象生成逻辑原型模式复用与继承的秘密武器深入对比不同方式在内存、性能和可维护性上的差异实际项目中怎么选看场景说话新手常踩的坑比如this绑定混乱、原型链污染调试对象创建问题的实用技巧提升代码质量的小妙招比如冻结对象、私有属性模拟让对象更聪明结合Proxy和Reflect玩出高级感尾声写对象也是在写故事JavaScript创建对象的7种方式前端开发者必备技能附实战技巧引言为什么搞懂对象创建方式这么重要写前端代码久了你会发现一个尴尬的事实每天都在跟对象打交道却很少有人真正花时间搞清楚——这玩意儿到底有多少种生法我见过太多小伙伴写了三年代码一说起创建对象就俩字{}。问为啥不用别的答别的不会。结果一到面试被问到构造函数和class区别就支支吾吾线上出了原型链污染的事故只能对着Chrome DevTools发呆性能优化时想复用对象却连Object.create的第二个参数都没玩过。其实JavaScript里造对象就像去星巴克点咖啡你以为只有美式和拿铁结果人家菜单翻三页都看不完。今天咱们就把所有隐藏菜单一次性点齐顺便告诉你哪种咖啡——啊不哪种方式——最适合你的胃口。JavaScript中的对象到底是什么先别急着翻书找定义。你把它想成一只百宝箱就行箱子本身轻飘飘里面却能塞函数、数字、甚至另一只箱子。更妙的是箱子还能自己长出抽屉原型抽屉里再塞箱子套娃无限。用代码说人话// 一只最朴素的百宝箱constbox{};box.name我的箱子;box.openfunction(){console.log(咔哒开了);};这只箱子在内存里长啥样V8会给它偷偷画一张地图Hidden Class把属性按顺序排好下次你再造一只同款的箱子就直接抄地图快得飞起。所以别小看{}它背后全是引擎工程师的头发。从字面量开始最简单也最容易被忽视的方式字面量就像便利店饭团随手拿、随手吃还能加热加属性。// 基础饭团constuser{name:阿星,age:18,// 直接塞函数省得再写一行greet(){console.log(哟${this.name}上线了);}};user.greet();// 哟阿星上线了但饭团也有踩坑的时候// 多人协作时有人手滑user.__proto__.admintrue;// 恭喜所有对象都变管理员了所以团队规范里最好加一条禁止直接碰__proto__。真要用原型咱们后面有更安全的花式。构造函数面向对象编程的起点构造函数就像工厂流水线把模板和实例分得清清楚楚。// 模板functionPhone(brand,price){// 私有变量外面拿不到constsecretCPU型号是机密;// 公开属性this.brandbrand;this.priceprice;// 公开方法this.callfunction(number){console.log(正在用${this.brand}给${number}打电话);};// 特权方法能访问私有变量this.repairfunction(){console.log(返厂维修${secret}将被重置);};}// 流水线启动constminewPhone(小米,1999);mi.call(10086);// 正在用小米给10086打电话mi.repair();// 返厂维修CPU型号是机密 将被重置注意如果把new丢了constoopsPhone(山寨,99);// 没有newthis指向window或undefined严格模式// 恭喜你给全局对象加了brand、price...防呆写法functionPhone(brand,price){if(!new.target){// 用户忘了new我帮他newreturnnewPhone(brand,price);}// ...}Object.create()站在巨人肩膀上造对象有时候你不想从头造箱子只想在现成箱子上再贴两层贴纸。Object.create就是干这个的。// 先造一只基箱constbaseBox{open(){console.log(基础开箱);}};// 再造一只豪华箱继承基箱的能力constpremiumBoxObject.create(baseBox,{color:{value:土豪金,writable:true,enumerable:true},unlock:{value:function(){console.log(解锁${this.color}箱子);}}});premiumBox.open();// 基础开箱premiumBox.unlock();// 解锁土豪金箱子第二个参数其实是属性描述符集合能精确控制读写、枚举、配置写框架时特别香。ES6类语法现代JavaScript的优雅写法类语法就是给构造函数穿了件西装骨子里还是原型链但看起来就是帅。classLaptop{// 静态属性所有实例共享static#defaultRAM16;// 私有静态字段Node 12// 构造器constructor(sn,color){this.snsn;this.colorcolor;// 实例私有字段this.#password123456;}// 实例私有字段#password;// 原型方法boot(){console.log(序列号${this.sn}正在启动);}// Getter假装是只读属性getpassword(){return****;}// 静态方法staticcreateDefault(sn){returnnewthis(sn,深空灰);}}constmacLaptop.createDefault(C02ZK3A4);mac.boot();// 序列号C02ZK3A4正在启动console.log(mac.password);// ****注意类声明不会提升跟let一样有暂时性死区别像函数声明那样到处乱飘。工厂函数灵活封装对象生成逻辑构造函数要求new类语法又太重量级有时候你只是想要个对象生成器这就是工厂函数的舞台。// 普通工厂functioncreateDog(name,type){return{name,type,bark:()console.log(${name}汪汪)};}constdaHuangcreateDog(大黄,田园犬);daHuang.bark();// 大黄汪汪再来个抽象工厂模式一口气造一整套UI组件functioncreateButton(theme){constbase{onClick(){}};if(themedark){returnObject.assign(base,{style:{background:#000,color:#fff}});}returnObject.assign(base,{style:{background:#fff,color:#000}});}constdarkBtncreateButton(dark);工厂函数的好处想返回啥就返回啥甚至可以返回Proxy、函数、或者根据运行环境返回不同实现写库时特别灵活。原型模式复用与继承的秘密武器把方法挂在原型上所有实例共享一份省内存又能动态热更新。functionCar(model){this.modelmodel;}// 所有车都能开方法只存一份Car.prototype.drivefunction(){console.log(${this.model}启动了);};// 动态追加新能力Car.prototype.nitrofunction(){console.log(氮气加速嗖——);};constferrarinewCar(F40);ferrari.drive();// F40启动了ferrari.nitro();// 氮气加速嗖——ES6之后也可以用Object.setPrototypeOf玩更骚的操作constflying{fly(){console.log(我飞起来了);}};constsuperCarnewCar(飞行版);Object.setPrototypeOf(superCar,Object.assign(Object.create(Car.prototype),flying));superCar.drive();// 飞行版启动了superCar.fly();// 我飞起来了但注意setPrototypeOf会触发引擎优化回退性能敏感场景慎用。深入对比不同方式在内存、性能和可维护性上的差异方式内存占用性能可维护性备注字面量低快高适合一次性配置构造函数中中中容易忘记newObject.create低快高适合继承class中中高语法糖调试友好工厂函数低快高可返回任意类型原型模式低快中共享方法热更新用Chrome DevTools的Memory快照可以验证把100万个实例分别用构造函数方法放构造器内和原型模式方法放原型上对比前者多占用几十MB后者几乎持平。实际项目中怎么选看场景说话工具配置对象字面量一把梭无需多想。业务实体订单、用户建议class或构造函数TypeScript加持下类型提示爽到飞起。需要多继承/混合能力工厂Object.create组合或者Proxy动态拦截。高频创建且方法可复用原型模式省内存。库/框架内部工厂函数Symbol私有Proxy隐藏实现细节让外部想改都找不着门。新手常踩的坑比如this绑定混乱、原型链污染this漂移constbtn{title:提交,handleClick:function(){console.log(this.title);}};document.body.addEventListener(click,btn.handleClick);// undefined修正addEventListener(click,btn.handleClick.bind(btn));// 或者addEventListener(click,()btn.handleClick());原型链污染禁止obj.__proto__.xxx yyy用Object.create(null)造无原型字典更安全constmapObject.create(null);map.constructor哈哈;// 不会影响到Object.prototypefor…in把原型属性遍历出来用hasOwnProperty过滤或者干脆Object.keys。调试对象创建问题的实用技巧看原型链console.dir(obj);// DevTools里展开[[Prototype]]一眼看清继承路径看属性描述符console.log(Object.getOwnPropertyDescriptor(obj,key));// 可写可枚举可配置一目了然performance面板对比内存录制两个场景看哪种创建方式占用更高用快照diff找出泄漏。使用Proxy陷阱调试constlogProxynewProxy(target,{construct(target,args){console.log(构造函数被调用,args);returnnewtarget(...args);}});提升代码质量的小妙招比如冻结对象、私有属性模拟让配置对象只读constCONFIGObject.freeze({API_ROOT:https://api.xxx.com,TIMEOUT:5000});深度冻结functiondeepFreeze(obj){Object.getOwnPropertyNames(obj).forEach(name{constpropobj[name];if(proptypeofpropobject)deepFreeze(prop);});returnObject.freeze(obj);}私有属性模拟WeakMap版const_privatenewWeakMap();classBankCard{constructor(balance){_private.set(this,{balance});}getBalance(){return_private.get(this).balance;}}私有属性模拟闭包版functioncreateCounter(){letcount0;return{inc(){count;},get(){returncount;}};}让对象更聪明结合Proxy和Reflect玩出高级感Proxy就像给对象请了个私人管家任何风吹草动都先过管家这一关。// 管家职责清单consthandler{get(target,key,receiver){if(keyfullName){return${target.first}${target.last};}// 用Reflect保持默认行为returnReflect.get(target,key,receiver);},set(target,key,value,receiver){if(keyagevalue0){thrownewError(年龄不能为负你想穿越吗);}returnReflect.set(target,key,value,receiver);},has(target,key){// 自定义in操作符returnkey.startsWith(_)?false:Reflect.has(target,key);}};constpersonnewProxy({first:王,last:大锤,age:18},handler);console.log(person.fullName);// 王 大锤person.age-10;// 报错年龄不能为负你想穿越吗console.log(_secretinperson);// false再升级一步把Proxy和工厂函数结合造一个自动持久化的对象functioncreateAutoSaveObj(initial,saveFn){returnnewProxy(initial,{set(target,key,value){constresultReflect.set(target,key,value);saveFn(target);// 每次变动自动落盘returnresult;}});}// 假装调用接口保存constusercreateAutoSaveObj({name:阿星,level:1},(data)fetch(/api/save,{method:POST,body:JSON.stringify(data)}));user.level2;// 自动触发保存尾声写对象也是在写故事回顾这一路我们从最朴素的{}走到Proxy的魔法森林仿佛在看一部JavaScript的成长史最初只是简单的键值对后来有了继承、私有、代理、反射……每一步都是工程师们偷懒的智慧——把重复留给引擎把优雅留给开发者。下次再写new的时候不妨想想你究竟在创造什么是一个配置一个业务实体还是一段可以被无限复用的故事对象创建方式没有银弹但只要你清楚每一招的脾气就能把代码写成一首让人愿意反复阅读的诗。愿你的对象常青愿你的原型链不绕愿你在控制台里永远看不到undefined is not a function。欢迎来到我的博客很高兴能够在这里和您见面希望您在这里可以感受到一份轻松愉快的氛围不仅可以获得有趣的内容和知识也可以畅所欲言、分享您的想法和见解。推荐DTcode7的博客首页。一个做过前端开发的产品经理经历过睿智产品的折磨导致脱发之后励志要翻身农奴把歌唱一边打入敌人内部一边持续提升自己为我们广大开发同胞谋福祉坚决抵制睿智产品折磨我们码农兄弟专栏系列点击解锁学习路线(点击解锁知识定位《微信小程序相关博客》持续更新中~结合微信官方原生框架、uniapp等小程序框架记录请求、封装、tabbar、UI组件的学习记录和使用技巧等《AIGC相关博客》持续更新中~AIGC、AI生产力工具的介绍例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结《HTML网站开发相关》《前端基础入门三大核心之html相关博客》前端基础入门三大核心之html板块的内容入坑前端或者辅助学习的必看知识《前端基础入门三大核心之JS相关博客》前端JS是JavaScript语言在网页开发中的应用负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客共同构建用户界面。通过操作DOM元素、响应事件、发起网络请求等JS使页面能够响应用户行为实现数据动态展示和页面流畅跳转是现代Web开发的核心《前端基础入门三大核心之CSS相关博客》介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法同时收集精美的CSS效果代码用来丰富你的web网页《canvas绘图相关博客》Canvas是HTML5中用于绘制图形的元素通过JavaScript及其提供的绘图API开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力使得前端绘图技术更加丰富和多样化《Vue实战相关博客》持续更新中~详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅《python相关博客》持续更新中~Python简洁易学的编程语言强大到足以应对各种应用场景是编程新手的理想选择也是专业人士的得力工具《sql数据库相关博客》持续更新中~SQL数据库高效管理数据的利器学会SQL轻松驾驭结构化数据解锁数据分析与挖掘的无限可能《算法系列相关博客》持续更新中~算法与数据结构学习总结通过JS来编写处理复杂有趣的算法问题提升你的技术思维《IT信息技术相关博客》持续更新中~作为信息化人员所需要掌握的底层技术涉及软件开发、网络建设、系统维护等领域的知识《信息化人员基础技能知识相关博客》无论你是开发、产品、实施、经理只要是从事信息化相关行业的人员都应该掌握这些信息化的基础知识可以不精通但是一定要了解避免日常工作中贻笑大方《信息化技能面试宝典相关博客》涉及信息化相关工作基础知识和面试技巧提升自我能力与面试通过率扩展知识面《前端开发习惯与小技巧相关博客》持续更新中~罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等《photoshop相关博客》持续更新中~基础的PS学习记录含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结日常开发办公生产【实用工具】分享相关博客》持续更新中~分享介绍各种开发中、工作中、个人生产以及学习上的工具丰富阅历给大家提供处理事情的更多角度学习了解更多的便利工具如Fiddler抓包、办公快捷键、虚拟机VMware等工具吾辈才疏学浅摹写之作恐有瑕疵。望诸君海涵赐教。望轻喷嘤嘤嘤非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益纵其简陋未及渊博亦足以略尽绵薄之力。倘若尚存阙漏敬请不吝斧正俾便精进