在javascript中的this大致可以理解成谁调用的this就指向谁
全局环境中的this
alert(this);//window
函数中的this
var name = 'tom';
function say(){
var name = 'bob'
alert(this.name);
}
say();//tom
调用say()等价于window.say()，所以this最终指向window
对象中的this
var name = 'tom';
var obj = {
name: 'bob',
say: function(){
alert(this.name);
}
}
//第一种调用形式
obj.say();//bob; 对象直接调用所以this指向obj
//第二种调用形式
var tSay = obj.say;
tSay();//tom; 最终tSay还是通过window调用，所以最终this指代window对象
做为构造函数中的this
function A(){
console.log(this);
}
var a = new A();// function A(){console.log(this)}
函数中的函数的this
var name = 'tom';
var obj = {
name: 'bob',
say: function(){
function _say(){
alert(this.name);
}
_say();
}
}
obj.say();//tom 最终调用_say的是window 所以this指向window
apply、call可以改变this指向
var obj1 = {
name: 'tom'
}
var obj2 = {
name: 'bob',
say: function(){
alert(this.name);
}
}
obj2.say.call(obj1);//tom 最终this指向obj1
obj2.say.apply(obj1);//tom 最终this指向obj1
通过apply、call可以改变this指向
call和apply实现的功能是相同，区别在于传参部分
call( thisArg [, arg1，arg2, … ] ); // 参数列表，arg1，arg2，...
apply(thisArg [, argArray] ); // 参数数组，argArray
在点击事件中的this
<div id="button">点击</div>
var obj = {
name: 'bob',
say: function(){
alert(this.name);
}
}
let oButton = document.getElementById('button');
oButton.onclick = obj.say;//undefined 因为最终调用say的是oButton，oButton没有定义name属性所以最终结果是undefined
我们可以通过ES5中引入的bind方法来解决这个问题
oButton.onclick = obj.say.bind(obj);//强制绑定obj.say的this指向为obj，所以最终结果是bob;
我们可以自己模拟bind方法，比如：
Function.prototype.bind = function(){
var fn = this, args = Array.prototype.slice.call(arguments), object = args.shift();
return function(){
return fn.apply(object,
args.concat(Array.prototype.slice.call(arguments)));
};
};
