当前位置: 首页 > 科技观察

JavaScript中this的原理和6个常见的使用场景

时间:2023-03-12 22:57:02 科技观察

1.this的原理This是JavaScript中的一个关键字,只有在调用函数时才会出现;因为函数是在一定的环境下运行的,所以在调用函数的时候,一定要知道【是谁调用的】?这是用来指的;那么这到底指向什么呢?this不是指向函数本身,也不是指函数的词法作用域,而是函数被调用时的对象!'卡卡';functioncat(){varname='Yuyu';console.log(this.name);//Kakaconsole.log(this);//Window{frames:Window,postMessage:?,blur:?,focus:?,close:?,…}}cat();这里你可能会有疑问。不是说this指向调用函数的对象吗?cat()中没有对象。这是因为它工作在全局域中,window是根目录,一般可以省略,例如:alert()其实就是window.alert();(2)对象的方法,this指对象1。当作用域链为第一层时,this指对象varname='卡卡';varcat={name:'有鱼',eat:function(){console.log(this.name);//有鱼}}cat.eat();因为函数eat是被猫对象调用的,所以this指向猫本身,所以cat.name=youyu;2、在多层作用域链中,this指的是离方法最近的层的对象varname='kaka';varcat={name:'Yuyu',eat1:{name:'year',eat2:function(){console.log(this.name);//year}}}cat.eat1.eat2();eat2方法包含在cat和eat1两个对象中,但是eat1对象紧挨着,所以this.name指的是eat1的属性名,即[year]这里需要注意一种情况,如果cat.eat1.eat2的结果给一个变量eat3赋值,那么eat3()的值是多少?vareat3=cat.eat1.eat2;eat3();//卡卡的答案是【卡卡】,这是因为它没有发起赋值操作函数调用,eat3()是唯一的是真正的调用,发起这个调用的是根对象window,所以this指的是window,this.name=Kaka(3)构造函数的调用,this指的是实例化的新对象varname='Kaka';functionCat(){this.name='Yuyu';this.type='英短蓝猫';}varcat1=newCat();console.log(cat1);//实例化一个新对象Cat{name:"Youyu",type:"Englishshortbluecat"}console.log(cat1.name);//youyu(4)申请调用时,this指向参数中的对象varname='Youyu';functioneat(){console.log(this.name);}varcat={name:'year',}vardog={name:'Goofy',}eat.call(cat);//每年eat.call(dog);//高飞的apply方法和call方法相当于改变显式原型prototype(5)匿名函数调用,指向全局对象varname='Kaka';varcat={name:'Therearefish',eat:(function(){console.log(this.name);//kaka})()}cat.eat;这里是调用匿名函数的方式,常用的有3种方式://①先用()包裹起来,然后在(参数)后面加上(function(data){console.log(data);})("222");//②先是(参数),再是()包裹起来(function(data){console.log(data);}("333"));//③正常函数格式,加!!function(数据){console.log(数据);}(“444”);(6)在定时器中调用,指向全局变量。常用的定时器有setInterval和setTimeout。以setInterval为例:varname='kaka';varcat=setInterval(function(){varname='youyu';console.log(this.name);//卡卡clearInterval(cat);},500);其实定时器的本质也是匿名函数的形式。总结:①普通函数调用,this指向window②对象方法的调用,this指向对象,是最近的对象③构造函数调用,this指向实例化的新对象④Apply和call调用,this指向in中的对象参数⑤匿名函数调用,this指向全局对象window中的调用⑥timer,this指向全局变量window