javascript作为一门松散型的脚本语言和动态语言,最明显就是那个dynamic this。它一般都是作为函数调用者存在。
在javascript,所有关系都可以作为对象的一个关联数组元素而存在。那么函数就是被掰成两部分储存于对象,一是其函数名(键),一是函数体(值)。
另一个例子,绑定到一个明确的对象上
object.run();
答案显然易见,this总是为它的调用者。但如果复杂一点呢?
object.run();
尽管它是定义在object内部,尽管它是定义run函数内部,但它弹出的既不是object也不是run,因为它既不是object的属性也不是run的属性。它松散在存在于run的作用域用,不能被前两者调用,就只有被window拯救。window等原生对象浸透于在所有脚本的内部,无孔不入,只要哪里需要到它做贡献的地方,它都义不容辞。但通常我们不需要它来帮倒忙,这就需要奠出call与apply两大利器了。
JavaScript中有一个call和apply方法,其作用基本相同,但也有略微的区别。
先来看看JS手册中对call的解释:
调用一个对象的一个方法,以另一个对象替换当前对象。
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
参数
thisObj
可选项。将被用作当前对象的对象。
arg1, arg2, , argN
可选项。将被传递方法参数序列。
说明
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。
说明白一点其实就是更改对象的内部指针,即改变对象的this指向的内容。这在面向对象的js编程过程中有时是很有用的。
举个现成的例子,运行后自然就明白其道理:
<script>
function Obj(){this.value="对象!";}
var value="global 变量";
function Fun1(){alert(this.value);}
window.Fun1(); //global 变量
Fun1.call(window); //global 变量
Fun1.call(document.getElementById('myText')); //input text
Fun1.call(new Obj()); //对象!
</script>
var func=new function(){this.a="func"}
var myfunc=function(x){
var a="myfunc";
alert(this.a);
alert(x);
}
myfunc.call(func,"var");
</script>
这里,分别弹出了 func 和 var 。到这里就对call的每个参数的意义有所了解了。
感兴趣的朋友可以继续学习下 bind() 方法, 这里不作深入
function bind(context,fn) {
如果一个 function 是一个对象的属性,该 funtion 被调用的时候,this 的值是这个对象。
第二种:
如果 function 调用的表达式包含句点(.)或是 [],this 的值是句点(.)或是 [] 之前的对象。如myObj.func 和myObj["func"] 中,func 被调用时的 this 是myObj。
第三种:
当一个 function 中包含内部 function 的时候,如果不理解 this 的正确含义,很容易造成错误。这是由于内部 function 的 this 值与它外部的 function 的 this 值是不一样的。解决办法是将外部 function 的 this 值保存在一个变量中,在内部 function 中使用它来查找变量。
如果在一个 function 之前使用 new 的话,会创建一个新的对象,该 funtion 也会被调用,而 this 的值是新创建的那个对象。如function User(name) {this.name = name}; var user1 = new User("Alex"); 中,通过调用new User("Alex") ,会创建一个新的对象,以user1 来引用,User 这个 function 也会被调用,会在user1 这个对象中设置名为name 的属性,其值是Alex 。
可以通过 function 的 apply 和 call 方法来指定它被调用的时候的 this 的值。 apply 和 call 的第一个参数都是要指定的 this 的值。由于它们存在,我们得以创建各种有用的函数。
下面贴出运行的例子,大家可以在firefox跟踪参数的变化情况。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.name = "window";
var run = function () {
alert("run name is " + this.name);
}
var run_obj = {
name: "run_obj",
run: function () {
alert("run_obj name is " + this.name);
}
};
var run_obj_second = {
name: "run_obj_second",
run: function () {
var inner = function () {
alert("run_obj_second name is " + this.name);
};
inner();
}
};
var run_obj_three = {
name: "run_obj_three",
run: function () {
var inner = function () {
alert("run_obj_three name is " + this.name);
};
inner.call(this);
}
};
jQuery(document).ready(function () {
$("#btntest").click(function () {
run();
run_obj.run();
run_obj_second.run();
run_obj_three.run();
});
var message = 'Spoon!';
$('#foo').bind('click', { msg: message }, function (event) {
alert(event.data.msg);
});
message = 'Not in the face!';
$('#bar').bind('click', { msg: message }, function (event) {
alert(event.data.msg);
});
});
</script>
</head>
<body>
<div>
<input type="button" value="test" id="btntest" />
</div>
<div id="foo">foo</div>
<div id="bar">bar</div>
</body>
</html>