作者：DmitriPavlutin译者：前端小智来源：DmitriPavlutin点赞再看，微信搜索【大千世界】，B站关注【前端小智】这个没有大厂背景，但具有积极向上趋势心态的人。本文已收录到GitHubhttps://github.com/qq44924588...，文章已分类，也整理了很多我的文档和教程资料。最近开源了一个Vue组件，但是还不够完善。欢迎大家一起完善，也希望大家能给个star支持一下。谢谢。github地址：https://github.com/qq44924588...智米肯定知道JS是弱类型语言，对变量的类型没有限制。例如，如果我们创建一个字符串类型的变量，我们稍后可以为同一个变量分配一个数字：letmessage='Hello';//分配一个字符串message=14;//分配一个数字这种动态为我们提供了灵活性并简化了变量声明。不利的一面是，我们永远无法确定变量是否包含特定类型的值。例如，以下函数greet(who)需要一个字符串参数，但是，我们可以使用任何类型的参数调用该函数：functiongreet(who){return`Hello,${who}!`}greet('World');//=>'Hello,World!'//你可以使用任何类型作为参数greet(true);//=>'你好，真的！'问候（[1]）;//=>'Hello,1!'有时我们需要在JS中检查变量的类型，怎么办？使用typeof运算符和instanceof来检查实例类型。1、typeof操作符在JS中，基本类型有String、Number、Boolean、Symbol。此外，还有函数、对象，以及特殊值undefined和null。typeof是用来判断表达式类型的运算符：consttypeAsString=typeofexpression;表达式的计算结果为我们要查找的类型的值。expression可以是变量myVariable、属性访问器myObject.myProp、函数调用myFunction()或数字14.typeofexpression，根据expression的值，结果可能是：'string','number','布尔值'、'符号'、'未定义'、'对象'、'函数'。让我们来看看每种类型的typeof运算符：A)String:constmessage='hello!';typeofmessage;//=>'string'B)Number:constnumber=5;typeofnumber;//=>'number'typeofNaN;//=>'number'C)Boolean:constok=true;typeofok;//=>'boolean'D)Symbol:constsymbol=Symbol('key');typeofsymbol;//=>'symbol'E)undefined:constnothing=undefined;typeofnothing;//=>'undefined'F)Objects:constobject={name:'Batman'};typeofobject;//=>'object'constarray=[1,4,5];typeofarray;//=>'object'constregExp=/Hi/;typeofregExp;//=>'object'G)Functions:functiongreet(who){return`Hello,${who}!`}typeofgreet;//=>'function'1.1typeofnull上面我们看到，使用typeof判断对象的结果是'object'。但是，typeofnull的计算结果也为“object”！constmissingObject=null;typeofmissingObject;//=>'object'typeofnull为'object'是JS初始实现中的一个错误。因此，在使用typeof检测对象时，需要额外检查null：functionisObject(object){returntypeofobject==='object'&&object!==null;}isObject({name:'Batman'});//=>trueisObject(15);//=>falseisObject(null);//=>false1.2typeof和undefined变量虽然typeof表达式通常取决于表达式的类型，但是typeof也可以用来判断一个变量是否被定义。//notDefinedVar未定义notDefinedVar;//throwsReferenceErrortypeof有一个很好的属性，即当typeof计算未定义变量的类型时不会抛出ReferenceErrorError://notDefinedVarisnotdefinedtypeofnotDefinedVar;//=>'undefined'变量notDefinedVar未在当前范围内定义。但是，typeofnotDefinedVar不会引发引用错误，而是计算为“未定义”。我们可以使用typeof来检测变量是否未定义，如果typeofmyVar==='undefined'为真，则myVar未定义。2.instanceof操作符JS函数通常的调用方式是在函数名后加一对括号来调用：functiongreet(who){return`Hello,${who}!`;}greet('World');//=>'你好，世界！'greet('World')是一个常规函数调用。JS函数可以做的更多：它们甚至可以构造对象！要使函数构造对象，只需在常规函数调用之前使用new关键字：functionGreeter(who){this.message=`Hello,${who}!`;}constworldGreeter=newGreeter('World');worldGreeter.message;//=>'你好，世界！'newGreeter('World')是用于创建实例worldGreeter的构造函数调用。如何检查JS是否使用特定的构造函数创建了特定的实例？使用instanceof运算符：constbool=objectinstanceofConstructor;其中object是计算结果为对象的表达式，Constructor是构造对象的类或函数，instanceof计算结果为布尔值。worldGreeter实例是使用Greeter构造函数创建的，因此worldGreeterinstanceofGreeter的计算结果为true。从ES6开始，你可以使用类来定义对象。例如，定义一个类Pet，然后创建它的实例myPet：classPet{constructor(name){this.name=name;}}constmyPet=newPet('Lily');newPet('Lily')是创建实例myPet的构造函数调用。由于myPet是使用Pet类构造的-constmyPet=newPet('Lily')，myPetinstanceofPet的结果为真：myPetinstanceofPet;//=>true但是，普通对象不是Pet的实例：constplainPet={name:'Zoe'};plainPetinstanceofPet;//=>false我们发现instanceof对于识别内置函数（例如正则表达式、数组）的特殊实例很有用：functionisRegExp(value){returnvalueinstanceofRegExp;}isRegExp(/Hello/);//=>trueisRegExp('你好');//=>falsefunctionisArray(value){returnvalueinstanceofArray;}isArray([1,2,3]);//=>trueisArray({prop:'Val'});//=>false2.1instanceof和父类现在，Cat扩展了父类Pet：classCatextendsPet{constructor(name,color){super(name);this.color=颜色；}}constmyCat=newCat('Callie','red');正如预期的那样，myCat是Cat类的一个实例：myCatinstanceofPet；//=>true但同时，myCat也是基类Pet的一个实例:myCatinstanceofPet;//=>真3。总结JS是弱类型语言，也就是说对变量的类型没有限制。typeof表达式可用于检查表达式的类型，结果可能是以下之一：'string'、'number'、'boolean'、'symbol'、'undefined'、'object'、'function'。typeofnull的值为'object'，所以使用typeof检测对象的正确方法是typeofobject==='object'&&object！==空。instanceof运算符让我们确定实例的构造函数。如果对象是构造函数的实例，则对象实例构造函数为真。代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文：https://dmitripavlutin.com/ja...每周更新交流文章。微信搜索【大千世界】即可第一时间阅读，回复【福利】还有很多前端视频等着你。本文在GitHub上https://github.com/qq449245884/xiaozhi已收录，欢迎Star。
