在JavaScript 编程中, this 关键字总是让我们感到一些疑惑.
个人理解this跟别的语言大相径庭,JavaScript的this总是指向一个对象,
具体指向哪个对象是在运行时基于函数的执行环境动态绑定的,而非函数被声明时的环境
1.作为对象的方法调用
当函数作为对象的方法调用是,this指向该对象
varobj = {name:"胖先森",getName:function(){ alert(this=== obj);//弹出的是 truealert(this.a);//输出 : 1} }
2.作为普通函数调用
当函数不作为对象的属性被调用的时候,也就是我们常说的普通函数调用方式,此时的重点是:this总是指向全局对象(window),在浏览器的JavaScript中,全局对象就是我们说的window对象
window.name="全局胖先森";//name = "全局胖先森"; //省略了window的写法vargetName =function(){returnthis.name; }console.log(getName());
或者:
window.name="全局胖先森";varmyObject = {name:"局部的憨胖",getName:function(){returnthis.name; } };//作为对象的方法调用console.log(myObject.getName());//作为普通函数调用//1.赋值给一个新的变量varnewGetName = myObject.getName;console.log(newGetName());
开发中我们经常使用动态元素的绑定方式,例如给某个div节点的事件函数内部,有一个局部的callback方法,callback方法又作为普通函数调用时,callback内部的this就变成了window,但是我们就是想让this指向当前节点.示例如下:
//为了测试,我们给window定义一个属性idwindow.id="全局的window变量";//节点的时间绑定document.getElementById("div1").onclick=function(){ alert(this.id);//输出了div1//定义一个内部函数varcallback =function(){ alert(this.id); }//作为普通函数进行调用callback(); }
一个简单的解决方案: 也是应该最容易掌握的方案
可以通过一个变量保存div节点的引用
//为了测试,我们给window定义一个属性idwindow.id="全局的window变量";//节点的时间绑定document.getElementById("div1").onclick=function(){ alert(this.id);//输出了div1var_self =this;//保存引用//定义一个内部函数varcallback =function(){ alert(_self.id); }//作为普通函数进行调用callback(); }
3.构造器函数调用
JavaScript中没有类,没有类,没有类, 但是可以从构造器中创建对象, 同时提供了new运算符,使得我们看到的构造器更加像一个类而已!
除了一些内置函数,大部分的JavaScript函数都可以当做构造器使用
重点,重点,重点! 当使用new运算符调用函数时,该函数总是会返回一个对象,通常情况下,构造器里面的this就是指向返回的这个对象.
varPerson =function(){this.name="胖先森"; }varp1 =newPerson();//new只是一个运算符而已,隐式返回一个对象alert(p1.name);//输出:胖先森
但是new调用构造器时,还要注意一个问题,如果构造器显示返回一个object对象,那么运行结果就不会返回之前的this(当前对象),而是返回这个object对象,那么运行结果也会随之变化
varPerson =function(){this.name="胖先森";return{//显示返回一个对象name:"刘文铭"} }varp1 =newPerson();//new只是一个运算符而已alert(p1.name);//输出:刘文铭
情况说明:如果构造器不显示的返回任何数据或者返回一个非对象类型的数据，就不会造成上述的情况
varPerson =function(){this.name="胖先森";return"悟空";//返回string类型}varp1 =newPerson();//new只是一个运算符而已alert(p1.name);//输出:胖先森
4.Function.prototype.call或者Function.prototype.apply调用
跟普通函数调用比较,使用Function.prototype.call或者Function.prototype.apply 可以动态的传入this
varobj1 = {name:"胖先森",getName:function(){returnthis.name; } }varobj2 = {name:"刘文铭"}console.log(obj1.getName());//作为对象的方法进行调用 结果为 胖先森console.log(obj1.getName.apply(obj2));//this变成了obj2这个对象 结果 刘文铭
