this，小心！

this是面向对象语言中的一个重要概念，在JAVA,C#等大型语言中，this固定指向运行时的当前对象。但是在JS中，由于 javascript的动态性（解释执行，当然也有简单的预编译过程），this的指向在运行时才确定。这个特性让我们有时会给乱了方向，如果掌握了它的工作原理，那么它给我们带来了编程上的自由和灵活，结合apply(call)方法，可以使JS变得异常强大。

默认的this:
Javascript 下，所有的属性都默认为window对象所有，所以说this也不例外，看下面的例子，先来个热身：

 var txt = “Hello,Alex！”;

 function demo(){

     var txt = “Hi,Alex！”;

     alert(this.txt);//与window.txt相同

 }

 demo();//output  Hello,Alex！

由此可见，demo()执行时，函数里的this 指向全局对象window。接下来，我们换一种方式，以类的方式来调用一下demo，看看this把方向指向何方

 var AA = new demo();

 AA();//output undefined

当demo被实例化后，this就指向了当前实例化的对象，所以在demo这个类里虽然有个txt变量，这里txt属于类demo的局部变量，而没有定义指针引用，所以，demo被实例化后，this根本没指向局部变量txt，所以引用txt，会被告知未定义（undefined）。

接下来，我们来看看，绑定事件的this又指向何方：
html：

 <input  id=”demo” style=”width:200px; height:50px ;background:#000″ type=”button” value=”demo” />

Javascript:

 function showMsg(){

     alert(this.style.width);

 }

 window.onload = function(){

     document.getElementById(“demo”).onclick = showMsg;

 }

当div被点击： alert(this.style.width) 输出是 200px，可见当前this为onclick引用的对象（document.getElementById(“demo”)）

换一下方式，看看this又指向谁？

 window.onload = function(){

     document.getElementById(“demo”).onclick = function(){showMsg()};

 }

这里，当div被点击 alert(this.style.width) 脚本报错this.style.width为空或不是对象，原因：当前this指向function(){}匿名函数，这匿名函数里不存在style.width属性，所以脚本报错。

顺着上面绑定事件的this，说说YUI里的on方式绑定的this指向:

 YUI({combine: true}).use(‘io’, ‘until’, function (Y) {

     var Demo = {

         init : function(){

             Y.one(“#demo”).on(“click”,this.showMsg)

         },

         demo_txt : “hello,tid!”,

         showMsg : function(){

             alert(this.demo_txt);

         }

     }

 });

 Demo.init();

当input 被点击的时候， showMsg是有被执行，可是this.demo_txt 输出的却是undefined，而不是hello,tid!。因为这里的this已不再指向Demo对象，而是指向on绑定的函数的对象了，所以绑定的对象里不存在demo_txt属性。
如果想得到输出为“hello,tid!”,我们得换别一种方式去调用：

 init : function(){

     var $this = this;

     Y.one(“#demo”).on(“click”,function(){$this.showMsg()})

 }

这样，showMsg的this就指向了Demo对象，这情况，就像我们平时使用AJAX发出请求，请求成功后回调方法里的this一样，在这里就不展开说明了。

apply/call函数里的this:
先简单介绍apply/call这两个方法:
call, apply作用就是借用别人的方法来调用,就像调用自己的一样.从而改变了当前this的指向.
call（this, args1, args2, args3,…）　　//参数为个数
apply（this, [args1, args2, args3,…]）//参数为数组

下面来看几个简单的例子:

 function sayMsg(word1,word2){

     alert(word1 + word2);

 }

 function sayMsgToo(word1,word2){

     sayMsg.call(this,word1,word2);

     //sayMsg.apply(this,[word1,word2]);

     //sayMsg.apply(this,arguments);

 }

 sayMsgToo(“Hi”,”,Alex!”); //output Hi,Alex!

上述只简单介绍apply/call两方法的调用与区别，下面，我们看看这两个方法如何改变this指向（this引用的传递）

 function sayMsg(){

     alert(this.word1 + this.word2);

 }

 function sayMsgToo(word1,word2){

     this.word1 = word1;

     this.word2 = word2;

     sayMsg.call(this);

     //sayMsg.apply(this);

 }

 sayMsgToo(“Hi”,”,tid!”) //output Hi,tid!

这里可以看出来sayMsg里的this指向了sayMsgToo，这种方式的运用，可以用于模拟继承，从而实现了代码的重用。

巴特西

this，小心！

最新文章

热门文章