标签：class style png 实例 ima 参数 ges 初学者 属性
JavaScript的this对初学者来说一直是一个很头疼的问题,因为它的指向刚刚接触的时候往往觉得有点莫名奇妙,这篇博客用实例来概括一下,this代表什么以及如何改变函数的this.
在<JavaScript高级程序设计>一书中,对this做出了简单的介绍.即"this引用了函数据以执行的环境对象".如何理解这句话呢?先来看看第一个实例:
function testFun1() { var num = 3; alert(this.num); } function testFun2() { var num = 4; testFun1(); } testFun2();//undefined
上面的代码输出undefined,从这个例子我们可以看出this是不会引用具体的某个函数对象的(虽然在JavaScript中,函数也是对象的一种).那么在上述情况下,this代表什么呢?可以在testFun1()中运行下面代码:
alert(this);
输出的结果如下:
可以得出如下结论:在直接调用函数的时候,this代指window对象!
为了证明上述结论,可以使用下面例子验证:
var num = 10; function testFun1() { var num = 3; alert(this.num); } function testFun2() { var num = 4; testFun1(); } testFun2();//10
接下来是第二个示例,我们将函数作为一个对象的属性:
var num = 10; function testFun1() { var num = 3; alert(this.num); } var o = new Object(); o.num = 2; o.fun1 = testFun1; o.fun1();//2
可以看出,当通过对象调用函数的时候(这个和Java中的对象调用方法倒挺类似的),则this指向这个对象.那么如果存在多层对象的嵌套呢?看看下面的例子:
var num = 10; var inObj = new Object(); var outObj = new Object(); outObj.innerObj = inObj; outObj.num = 10; inObj.num = 5; inObj.infun = testFun1; function testFun1() { alert(this.num);//5 } outObj.innerObj.infun();
从上面的例子看出来,当存在多层对象的嵌套的时候,则this指向离函数"最近"的对象.
讨论完this之后,我们在讨论下如何改变函数中的this.下面的示例演示了两种改变this的方式:
var num = 3; function print() { alert(this.num); } var obj = {"num":10}; print.call(window);//3 print.call(obj);//10 print.call();//3 var objPrint = print.bind(obj); var windowPrint = print.bind(window); objPrint();//10 windowPrint();//3
call方法代表执行函数,传入的第一个参数代指函数的执行环境,因此在传入window,则通过call方法执行函数的时候.this指向window.传入对象的时候,this指向该对象.
bind方法则将该函数绑定一个执行环境,并且返回绑定该执行环境的函数对象.可以直接调用.
标签：class style png 实例 ima 参数 ges 初学者 属性
原文地址：http://www.cnblogs.com/hlhdidi/p/6938530.html
