第二章 this call apply
2016-09-27 本文已影响0人
狐尼克朱迪
this
this是js中很坑的地方，如下面的程序:
<body>
<div id="div1">一个div</div>
<script>
window.id = 123;
document.getElementById("div1").onclick = function(){
console.log(this.id) // div1
var callback = function(){
console.log(this.id); // 12
}
callback();
// 解决办法
var that = this;
var callback = function(){
console.log(that.id); // div1
}
}
</script>
</body>
另外一个例子：
// 如果构造器显示地返回一个Object类型对象，那么此次运算结果最终返回这个对象，而不是我们之前期待的this
var myClass = function(){
this.name = "ahu";
return {
name: "liuahu"
};
};
var obj = new myClass();
obj.name == "liuahu" // true
// 如果构造器不显示地返回任何数据，或者是返回一个非对象类型的数据，就不会出现上面的问题
var myClass = function(){
this.name = "ahu";
return "liuahu"
};
var obj = new myClass();
obj.name == "ahu" // true
this丢失现象：在一些框架里，经常会出现下面的例子：
// 1. 常见形式
var getId = function(id){
return document.getElementById(id);
}
getId("div1");
// 2.尝试形式:
var getId = document.getElementById;
getId("div1");
第二种方式执行时，会出现一个异常，这是因为第二种的this为window，但是document.getElementById是需要用到this，而其期望的this是document。
call和apply
call和apply这两个方法的主要作用就是改变this指向，另外新的ECMAScript标准中的bind方法可以改变this指向。
Function.prototype.bind = function(){
var _args = arguments,
_object = arguments[0],
_function = this;
return function(){
// not use slice for chrome 10 beta and Array.apply for android
var _argc = [].slice.call(_args,1);
[].push.apply(_argc,arguments);
return _function.apply(_object||window,_argc);
};
}
