首页 > 代码库 > 让人又爱又恨的this
让人又爱又恨的this
this是个神奇的东西,
既可以帮助我们把模拟的类实例化、
又可以在事件绑定里准确指向触发元素、
还可以帮助我们在对象方法中操作对象的其他属性或方法、
甚至可以在使用apply、call、bing、filter等方法时指向我们指定的对象,以便灵活的使用。
但是如此强力的东西,势必有时难以把握,今天遇到一问题,出了错,重新温故下常见的this指向问题。
要说灵活无比的this的指向,很有必要先知道一个知识点,JavaScript中有四种调用模式。
this的指向很大程度收调用模式的影响,具体如下
1.构造器调用模式=>this指向实例化出来的对象
2.方法调用模式=>this指向方法所属的对象
3.函数调用模式(即函数不是对象的方法,仅仅普通调用时,今天就错在这,5555)=>this指向全局对象global(在浏览器运行环境下,global其实就是window)
4.apply调用模式=>this指向apply方法接收的第一个参数
看文字或许不太明了,上点代码
//先来看看构造器调用模式和方法调用模式var name=‘你查看的是全局对象的属性‘;var Foo=function (name) { this.name=name; //这里的this是在构造函数里,当new+构造函数实例化对象时,this会被绑定到实例化的对象上 this.say=function () { console.log(this.name); // 这里或许会有误解,事实上此处的this并没有绑定到构造函数实例化的对象上!! }}var foo=new Foo(‘我是构造函数实例化的对象‘);//这里就是构造器调用模式,构造函数里的this就是此时绑定到实例化对象上的foo.say();//打印:我是构造函数实例化的对象//这里的调用就是方法调用模式,它的特点是,有一个.或者[]这样的属性提取操作//下面我们来证明console里的this没有被绑定到实例化的对象上var say1=foo.say;say1();//打印:你查看的是全局对象的属性//造成这样的原因在于,console所属于的函数被赋值给了this.say,但是并没有被调用,所以this的指向并没有决定。知道这很重要
//再来看看函数调用模式,此处代码接着上面的写function foo2() { console.log(this.name);}foo2();//打印:你查看的是全局对象的属性//这就是函数调用模式console.log(this.name);//打印:你查看的是全局对象的属性//注意哈,当不在函数里时this也是指向全局对象var obj1={ name:‘我是对象obj1的属性‘, say:function(){ console.log("1:"+this.name); (function(){ console.log("2:"+this.name) })(); //别被误导了哈,这里没有什么作用域链,紧记不是apply调用(即this指向没有被强制改变)、方法、构造器调用时,都是函数调用模式,this都指向全局对象!! }}obj1.say();//打印:1:我是对象obj1的属性-----此处this所在的函数是say,它是被obj1.say()用方法调用模式调用的//打印:2:你查看的是全局对象的属性------此处的this所属的函数是一个立即执行的匿名函数,它不是被方法调用的,是函数调用模式,此时不管它属于哪个对象,只要它没有被bind等方法改变this指向,它里面的this一定指向全局对象
//最后来看看apply调用模式var obj2={ name : ‘我是对象obj2的属性‘, }foo.say.apply(obj2);//打印: 我是对象obj2的属性//这就是apply调用模式,相似的还有 foo.say.call(obj2);//打印: 我是对象obj2的属性//两者的共同点,就是//调用的函数里的this会指向apply/call的第一个参数//至于两者的区别,主要是传递的其他参数不同,感兴趣的可以自己了解,百度谷歌都很多
其实还有其他改变this指向的方法,就是一开始题到的bind\filter等方法,
但其实都大同小异,本质都是改变this的指向,使其指向传入参数,和apply/call类似,就不多做阐述了
最后上一下今天做错的题
//代码很简单,就是一个构造函数,//要求在waitAndShout方法被调用时,延迟调用shout方法//刚开始我是这么写的,毫无疑问,这样错了var Obj=function (msq) { this.msq=msq; this.shout=function () { alert(this.msq); } this.waitAndShout=function () { setTimeout(function () { this.shout()//会在这里报错,not a function },2000); }}var obj=new Obj(‘ddd‘);obj.waitAndShout() //这是为什么呢?//如果你仔细看上面的代码,想必早已知道原因。//没错,原因就是setTimeout所在的函数只是被赋值给waitAndShout,//但并没有被调用,他里面的this也不会在构造函数被调用时,指向实例化的对象//另一个关键是setTimeout里执行的函数是被函数调用模式调用的,所以这里的this是全局对象,而我们没有给window创建shout方法,当然也就不是个函数了//那么要怎么解决这个问题呢,解决方法很简单//用一个变量接收thisthis.waitAndShout=function () { var that=this; //重点就在这里!注意看,这里的this所属的函数被赋值给了waitAndShout //也就是说this所在的函数就是waitAndShout,当他被调用时 //obj.waitAndShout()很明显是方法调用,那this就指向了obj //此时我们把这个对象的地址传给变量that,那that就一直指向这个对象了, //延迟调用时就不涉及this的指向问题,不用担心setTimeout延迟执行是以函数调用模式,也就实现了目标。 setTimeout(function () { that.shout() },2000);}
汗,本来只是想随便写写,温习下的,结果写那么多
表达能力还是需要锻炼啊,注释比代码多那么多
时间关系,这次暂时不精简注释了,以后多注意下,多写写,应该就能简短的注释说明问题了吧。0.0
让人又爱又恨的this
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。