当前位置: 首页 > Web前端 > HTML5

js中如何理解this,在实际应用中要避免哪些陷阱

时间:2023-04-05 13:59:40 HTML5

this是函数内部的关键字看下面例子理解js中的this//例1functionfnOne(){console.log(this)}'usestrict'functionfnOne(){console.log(this)}//示例2leta={txt:'helloworld',fn:function(){console.log(this.txt)}}a.fn()window.a.fn()//示例3letb={txt:'hello',obj:{txt:'world',fn:function(){console.log(this.txt)console.log(this)}}}让c={txt:'hello',obj:{//txt:'world',fn:function(){console.log(this.txt)}}}b.obj.fn()c.obj.fn()letd=b.obj.fnd()//例4functionFn(){this.txt='helloworld'}lete=newFn()e.txt//例5functionFn(){this.txt='helloworld'return{txt:'hello'}}functionFn(){this.txt='helloworld'return[1]}functionFn(){this.txt='helloworld'return1}functionFn(){this.txt='helloworld'returnnull}functionFn(){this.txt='helloworld'returnundefined}lete=newFn()e.txt//当带有{}或[]返回值的方法被实例化时,this指针被改变//示例6//箭头函数与包装它的代码共享相同的this对象//如果箭头函数在另一个函数中//它也会共享函数的参数变量letbob={_name:"Bob",_friends:[],printFriends:()=>{console.log(this._name)console.log(this)}}让bob={_name:"Bob",_friends:[],printFriends(){console.log(this._name)console.log(this)}}letbob={_name:"Bob",_friends:[1],printFriends(){this._friends.forEach((item)=>{console.log(this._name)})}}//参数对象乐趣actionsquare(){让例子=()=>{让数字=[];for(letnumberofarguments){数字。推(数字*数字);}返回数字;};返回示例();}方形(2、4、7.5、8、11.5、21);//returns:[4,16,56.25,64,132.25,441]this总是指向最后调用它的对象(箭头函数除外)this应用程序如何改变函数的this指向applycallbind?apply和call的区别是改变函数this并立即执行。bind(es5新加入的方法,注意兼容性)是复制函数,不会立即执行。根据执行时间选择要使用的解决方案。functionProduct(name,price){this.name=namethis.price=price}functionFood(name,price){Product.call(this,name,price)//Product.apply(this,arguments)this.category='food'}console.log(newFood('cheese',5).name)bind用法及可以解决的问题//解决,从对象中取出method,定义为新变量,不过希望该方法的this值保持不变,此时可以使用bind来绑定thisthis.x=9;varmodule={x:81,getX:function(){returnthis.x;}};module.getX();//返回81varretrieveX=module.getX;retrieveX();//返回9,在本例中“this”指向全局作用域//创建一个新函数将“this”绑定到模块对象//新手可能会被全局的x变量和属性x中的x弄糊涂模块varboundGetX=retrieveX.bind(module);boundGetX();//返回81//绑定setTimeout()functionLateBloomer(){this.petalCount=Math.ceil(Math.random()*12)+1;}LateBloomer.prototype.bloom=function(){window.setTimeout(this.declare.bind(this),1000);}LateBloomer.prototype.declare=function(){console.log('我是一朵美丽的花'+this.petalCount+'花瓣!');}varflower=新的LateBloomer();flower.bloom();//一秒钟后,调用'declare'方法方法箭头函数中this的使用注意事项1、函数体中的this对象是定义所在的对象,而不是使用所在的对象。2.不能作为构造函数使用,即不能使用new命令,否则会报错。3、不能使用arguments对象,函数体中不存在。如果要使用它,可以使用rest参数代替。4、不能使用yield命令,所以箭头函数不能作为Generator函数使用。5.不能使用apply/call/bind//箭头函数可以使setTimeout中的this绑定到定义所在的作用域,而不是指向运行时所在的作用域。下面是另一个例子。函数定时器(){this.s1=0;这个.s2=0;//箭头函数setInterval(()=>this.s1++,1000);//普通函数setInterval(function(){this.s2++;},1000);}vartimer=newTimer();setTimeout(()=>console.log('s1:',timer.s1),3100);setTimeout(()=>console.log('s2:',timer.s2),3100);//s1:3//s2:0//箭头函数可以让这个点固定下来,非常有帮助封装回调函数。下面是一个例子,DOM事件的回调函数被封装在一个对象中。varhandler={id:'123456',init:function(){document.addEventListener('click',event=>this.doSomething(event.type),false);},doSomething:function(type){控制台。日志('处理'+类型+'为'+this.id);}};