1、js函数调用过程中,js线程会进入新的执行环境并创建该环境的变量对象,并添加两个变量:this和arguments,因此可以在函数中使用这两个变量。需要注意的是,this变量不能重新赋值,而arguments可以,如下:
function test() { var name = 'test2'; arguments = window; this = window; // 在这一行js运行会报错 }
2、this取值于函数据以执行的函数对象
2.1 当函数在全局作用域执行时,this引用的是全局(window);当函数在某一对象上执行时,this引用的是该对象自己;当函数在另一函数中调用时,this同样引用的是全局(window),如下:
var name = 'window'; var obj = { name:'obj', action:test } test(); obj.action(); test2(); function test2() { var name = 'test2'; test(); } function test() { alert(this.name) }
以上代码响应依次为:window -> obj -> window
2.2 事件响应中的this,分为二种情况:
a、html事件定义,如:
<div style="100px; border:solid;" id="btn" onclick="test()" >doSomething</div>
该情况下,test中this为window
b、js事件定义,如
<div style="100px; border:solid;" id="btn" title="hello,boy" >doSomething</div> <script type="text/javascript"> document.getElementById('btn').onclick = function () { alert(this.title); }; $('#btn').click(function () { alert(this.title); })
<script>
不论原生js还是jQuery事件,this均指拥该事件对象的html元素本身,并且为原生js对象(而非jQuery对象)
另外,对于html事件,在事件中直接引用的this也是该事件对象的html元素本身,如下:
<div style="100px; border:solid;" id="btn" onclick="test(this)" >doSomething</div>
原因是引号中实际为js语句,js会隐式生成一个匿名函数,因此本质与js事件一样
3、Function对象提供的两个方法apply()、call(),用于改变函数中this的取值
一篇形象的讲解: 【javascript】函数中的this的四种绑定形式 — 大家准备好瓜子,我要讲故事啦~~
关于this更为深入透彻的讲解:JavaScript中的this