电子商务网站建设报告,只有后端可以做网站吗,网站开发保障合同,怎么查在建工地的信息#Javascript#xff1a;this用法整理pingan 于 星期三, 18/12/2013 - 22:32 提交 常用Javascript的人都知道#xff0c;#xff3b;this这个关键字在一个函式内究竟指向谁#xff3d;的这个问题很令人头大#xff0c;本人在这裡整理了一下Javascript中this的指向的五种不同…#Javascriptthis用法整理pingan 于 星期三, 18/12/2013 - 22:32 提交 常用Javascript的人都知道this这个关键字在一个函式内究竟指向谁的这个问题很令人头大本人在这裡整理了一下Javascript中this的指向的五种不同情况其中前三种属于基本的情况而后两种情况可基于前三种情况的方式来进行思考。 1.this指向于调用该函式之物件如果你有学过C/C你可能会记得一个物件内的成员函式裡的this指的即是该成员函式所在之物件但在Javascript裡则有那麽些许不同Javascript裡的this看的是究竟是谁调用该函式而不是看该函式被定义在哪个物件内这个大原则抓到了基本上就已经可以探知this的奥秘了。底下写一下这种情况的公式与范例 公式 1 物件.函式(); //函式内的this指向该物件范例 var obj { x: 20, f: function(){ console.log(this.x); }}; obj.f(); //由于调用f函式时点前面物件为obj故f内的this指向obj则输出为20。 obj.innerobj { x: 30, f: function(){ console.log(this.x); }} obj.innerobj.f(); //由于调用f函式时点前面物件为obj.innerobj故f内的this指向obj.innerobj则输出为30。 2.this指向全域物件(浏览器window物件、node.jsGLOBAL物件)如果调用函式的前方并未有物件则函式内this就指向全域物件。在浏览器内全域物件为window物件而在node.js中全域物件则为GLOBAL物件。底下一样写一下这种情况的公式与范例 公式 函式(); //函式内的this指向全域物件范例var x 10;var f function(){ console.log(this.x);}; f(); //由于调用f函式时前方并未有[物件.]的形式故f内的this指向全域物件则输出全域变数的x(10)。例外在使用node.js时若使用node file.js这样的方式执行js档并不会让宣告的全域变数挂在全域物件上(意指会利用function将code整个包起来执行)故输出应为undefined。前两种情况常见误导范例范例一、物件之成员函式内有函式(感谢NSLin在实务读书会上的范例Code)example1.js var x 10;var obj { x: 20, f: function(){ console.log(this.x); var foo function(){ console.log(this.x); } foo(); // (2) }}; obj.f(); // (1)这个范例会输出多少呢别忘记大原则在Javascript裡的this看的是究竟是谁调用该函式故并不会输出20 20而是输出20 10为什麽呢因为(1)obj.f()调用时f前面物件为obj故f内的this指向obj。但因为调用f内的(2)foo函式时是用foo()调用的前方并未有物件故foo内的this指向全域物件所以输出会是全域变数的x的值。 若要让foo内使用obj.x的值解法如下 example1.js var x 10;var obj { x: 20, f: function(){ console.log(this.x); var that this; //使用that保留在这个函式内的this var foo function(){ console.log(that.x); } //使用that取得obj foo(); }}; obj.f();范例二、借用函式example2.js var x 10;var obj { x: 20, f: function(){ console.log(this.x); }}; obj.f(); // (1) var fOut obj.f;fOut(); //(2) var obj2 { x: 30, f: obj.f} obj2.f(); // (3)范例中三次调用之函式的this所指向的物件为何不知道各位能不能看得出来。虽然用的是同一个函式但是因为调用的不同故this所指向的物件就不同。(1)obj.f()的f所指向的是obj这比较没有问题输出的会是20而(2)fOut()裡的this则是因为调用时前方无物件则this所指的是全域物件输出的会是10最后(3)obj2.f()则是obj2去呼叫f故f内的this指向的是obj2输出的会是30。 3.this指向利用call或apply所指派给this的物件有个方法可以更改前两种叙述中this指派的值就是利用call与apply。call与apply都是呼叫该函式并让该函式的this指向给予call或apply的第一个参数。至于call和apply的差别则是在于其后面给予被调用之函式的参数放入的方法不同一个是直接摊平放在第二个以后的参数一个是直接放入一个裡面放要给予之参数的阵列。底下一样看一下公式和范例 公式 (A物件.)函式.call(B物件,参数1,参数2,参数3, ......); //函式的this指向B物件(若B物件为null则指向全域物件)(A物件.)函式.apply(B物件,[参数1,参数2,参数3, ......]); //函式的this指向B物件(若B物件为null则指向全域物件)范例var obj { x: 20; f: function(){ console.log(this.x); }}; var obj2 { x: 30;}; obj1.f.call(obj2); //利用call指派f的this为指向obj2故输出为304.this指向new所产生之新物件若将函式当作建构式(constructor)来用则内部的this则指向于new所产生之新物件。 公式 new 建构式(); //建构式内之this指向new所产生之新物件范例function Monster(){ this.hp 100;}; var monster new Monster(); //Monster的this指向new出来之新物件并回传回来new的写法就类似于下面的写法。var monster (function(){ var _new { constructor: Monster, __proto__: Monster.prototype }; //在IE内可能不相似 _new.constructor(); //这也是为何说可以利用前三种情况来变化的原因constructor呼叫时this指向的即是_new这个物件。 return _new;})();5.callback函式内的this会指向于调用放入该callback的函式之this所指向之物件先想想在jQuery中我们若要让#button这个元素被click的时候内容改为“Clicked”这样的字串该如何写呢 clicked.js $(#button).click(function(){ this.html(Clicked);})此时这个this居然会指向$(‘#button’)这个物件感觉很自然但实际想想会觉得很神奇。假设你写一个function它可以传入一个function并在里面呼叫传入的function你该怎么写呢 function-to-function.js var f function(innerf){ //前面的处理 innerf(arg1, arg2, arg3, ......); //后面的处理}但如果这样写的话innerf里的this根据前述规则就应该是全域物件了那为什么常常别人实作的callback函式可让this指向于调用放入该callback的函式之this所指向之物件呢这表示大家实际上会遵守一个规则会将自己的this传给callback当作它的this来用这也是为什麽我说这个情况其实也是前三种情况的变化而已了所以上面的code应该改成如下的形式会比较好 function-to-function-improved.js var f function(innerf){ //前面的处理 innerf.call(this, arg1, arg2, arg3, ......); //或是innerf.apply(this, [arg1, arg2, arg3, ......]) //后面的处理}转载于:https://www.cnblogs.com/pingan1314/p/javascript_this.html
