这6个知识点让我对JavaScript对象有了更深入的了解,同时也有了向上的积极态度。本文已收录到GitHubhttps://github.com/qq44924588...,文章已分类,也整理了很多我的文档和教程资料。大家都说简历里没项目可写,所以给大家找了一个项目,还给了一个【搭建教程】。1.对象方法和这个方法只是保存函数值的属性。简单对象方法letrabbit={};rabbit.speak=function(line){console.log("小兔子说:"+line);};rabbit.speak("我还活着。")输出:T小兔子说:我还活着。Objectmethods&this当一个函数作为一个方法被调用时,这个对象会将这个函数作为一个属性并被立即调用,就像在object.method()中一样,它的body中的特殊变量this会指向被调用的对象.functionspeak(line){console.log(this.type+"小兔子说:"+line)};letwhiteRabbit={type:"white",speak:speak}whiteRabbit.speak("Oh,I'mso可爱!”)输出:小白兔说:哦,我好可爱!apply&callapply和call可以用于object.method()apply和call方法都有一个第一个参数可以用来模拟方法调用其实第一个参数就是用来指定这个函数speak(line){console.log(`${this.type}'slittlerabbitsays:${line}`);};letwhiteRabbit={type:"white",speak:speak};speak.apply(whiteRabbit,["你这个小流氓!"]);speak.call({type:"Black"},"嘿,我不坏,你不爱!");小白兔说:你这个小坏蛋!小黑兔说:哎,我不坏,你不爱!2.原型几乎所有的对象都有一个原型原型是另一个用作属性替代来源的对象当一个对象在没有属性的情况下访问自己时,它会从其原型中搜索该属性,如果找不到,则继续从其原型的属性中搜索原型,依此类推,直到为null。一个空对象的prototype原型链最终指向Object的原型,Object中的__proto__为nullletempty={};console.log(empty.toString);console.log(empty.toString());output:[Function:toString][objectObject]其他对象(数组、函数等)的默认属性很多对象并不直接使用Object.prototype作为原型,而是有自己的默认属性。从Function.prototype和Array派生的函数.prototype-derived数组console.log(Object.getPrototypeOf(isNaN)==Function.prototype);console.log(Object.getPrototypeOf([])==Array.prototype);输出:truetrueObject.create创建一个具有特定原型的对象对象protoRabbit充当所有兔子共享属性的容器来自其原型的共享属性}}letkillerRabbit=Object.create(protoRabbit)killerRabbit.type='Killer'killerRabbit.speak('准备去死!')输出:KillerRabbit说:准备去死!大家都说简历里没项目可写,所以给大家找了一个项目,还给了一个【搭建教程】。3.Constructor——构造函数原型一个更方便的创建从一些共享原型派生的对象的方法是使用构造函数在JavaScript中,调用一个以new关键字开头的函数将其视为一个构造函数,this变量被绑定到一个新对象,并且除非它显式返回另一个对象值,否则这个新对象将从调用中返回为了将它与其他函数区分开来functionRabbit(type){this.type=type;}letkillerRabbit=newRabbit("killer");letblackRabbit=newRabbit("black");console.log(blackRabbit.type);Output:black-默认情况下,构造函数有Object.prototype构造函数(实际上是所有函数)自动获取一个名为prototype的属性,该属性默认包含一个普通的空对象派生自Object.prototype使用此构造函数创建的对象的每个实例都将此对象作为其原型functionRabbit(type){this.type=type;}letblackRabbit=newRabbit("black");Rabbit.prototype.speak=function(line){console.log(`${this.type}'srabbitsaid:${line}`);};blackRabbit.speak("轰……一波王者轰炸!");输出:黑兔说:轰……一波轰炸!4.重写派生属性——同名原型如果原型中有同名属性,则不更改该属性将属性添加到对象本身functionRabbit(type){this.type=type;}letblackRabbit=newRabbit("black");letkillerRabbit=newRabbit("killer");Rabbit.prototype.teeth="small";console.log(killerRabbit.teeth);//smallkillerRabbit.teeth="long,sharp,andbloody";console.log(killerRabbit.teeth);//long,sharp,andbloodyconsole.log(blackRabbit.teeth);//smallconsole.log(Rabbit.prototype.teeth);//小控制台。log(blackRabbit.teeth)的result很小,因为blackRabbit对象没有teeth属性,继承了Rabbit对象自身的teeth属性,值很小5.原型干扰——可枚举和不可枚举letmap={}functionstorePhi(event,phi){map[event]=phi}storePhi('pizza',0.069)storePhi('touchedtree',-0.081)Object.prototype.nonsense='hi'for(letnameinmap){console.log(name)}console.log('nonsense'inmap)console.log('toString'inmap)output:pizzatouchedtreesensetruetruetoString没有出现在for/in循环中,但是in运算符返回true,这是因为JS区分了可枚举属性和不可枚举属性,我们通过简单赋值创建的所有属性都是可枚举的,Object.prototype中的标准属性都是不可变的,这就是为什么它们不会出现在这样的for/in循环中的原因。letmap={};functionstorePhi(event,phi){map[event]=phi;}storePhi("pizza",0.069);storePhi("touchedtree",-0.081);Object.defineProperty(Object.prototype,"hiddenNonsense",{enumerable:false,value:"hi"})for(varnameinmap){console.log(name)}console.log(map.hiddenNonsense)输出:pizzatouchedtreehi可以通过使用对象获得.defineproperty函数定义自己的不可枚举属性,这个函数可以让我们控制创建属性的类型,在这个例子中hiddenNonsense在map中,但在for...in中没有显示。—hasOwnPropertyvsinoperatorconstmap={}console.log("toString"inmap)console.log(map.hasOwnProperty("toString"))output:truefalsehasOwnProperty方法不用看就告诉我们对象本身是否有属性at它的原型,通常比in运算符给我们的信息更有用。因此,如果您对基本对象原型感到困惑,建议您这样编写for/in循环:for(varnameinmap){if(map.hasOwnProperty(name)){//...this是一个自己的属性}}6.没有原型对象Object.create函数使我们能够创建一个具有特定原型的对象。我们也可以传递null作为原型来创建一个没有原型的新对象。因此,我们不再需要hasOwnProperty,因为一个对象拥有的所有属性都是它自己的属性。现在,无论人们用Object.prototype做什么,我们都可以安全地使用for/in循环varmap=Object.create(null);map["pizza"]=0.069;console.log("toString"inmap);//falseconsole.log("pizza"inmap);//真才实学的【三通】是小智继续分享的最大动力。本博客如有错误或建议,欢迎达人留言。最后谢谢大家的收看。代码部署后可能存在的bug,无法实时获知。事后为了解决这些bug,花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文:https://medium.com/javascript...每周更新交流文章。可以微信搜索【大千世界】第一时间阅读,回复【福利】还有很多前端视频等着你。本文在GitHub上https://github.com/qq449245884/xiaozhi已收录,欢迎Star。
