回想当初在切图网做前端项目，用到js，经常用到this；那我们就谈谈js中this，如果说你没弄清this指向的问题，那基本可以说js没入门。

this指向的问题的文章，上网搜资料能搜一大把，基本上都是说this总是指向某个对象的，指向函数的调用者的。
如果某个函数没有调用者时，this是指向window的。

先来看看是怎么总结出来，“this总是指向函数的调用者的”

console.log(this)//window
var fun = function(){
console.log(this);
};
fun();//打印window
// 等价于如下的调用方式
this.fun();
window.fun();
// 匿名函数 可以理解成window创建某个变量保存这个匿名函数，然后删除了这个变量
(function(){
console.log(this);
})();// 打印window

这里window调用函数，函数里的this指向window。
对象也是一样
数组、函数、自定义对象、以及dom对象都是对象，this是指向这个对象的。其他对象的例子不一一
举了，这里再举一下dom对象的例子

<section>
<button id="btn" name="myBtn" style="width:100px;height:30px;">点击我</button>
</section>
<script>
var btn = document.getElementById('btn');
// 点击按钮时弹出myBtn
btn.onclick = function(){
alert(this.name);
}
</script>

我们点击按钮，触发点击事件，这个onclick函数是btn调用，this指向btn没问题。

再看一下构造函数中的this

var Person = function(name,age){
this.name = name;
this.age = age;
this.sayName = function(){
alert(this.name);
}
};
Person.prototype.sayAge = function(){
alert(this.age);
};
var p = new Person("切图网"，18)；
p.sayName();//弹出 切图网
p.sayAge();//弹出 18

new一个函数时，函数也会执行的。可以看做p调用了Person这个构造函数，里面的this.name、this.age 、this.sayName中的this都是指向p的；

p.sayName()、p.sayAge()是p调用函数，这两个里面的this当然指向对象p了。

从上面的代码中，基本可以总结了，this总是函数调用者的。那么再看看如果函数没用调用者呢？

var o = {
fn : function(){
console.log(this); // 标记1
var a = function(){
console.log(this);// 标记2
};
a();
}
};

o.fn();//标记1 打印对象o，标记2 打印window

你说上述代码中执行语句a()，a调用者是谁？是对象o吗，是window吗，都不是，如不信，你改成o.a()或者window.a()，浏览器肯定会报错的。

a是没有调用者，你只能说在fn的作用域中，a被调用了。而此时函数没有调用者时，里面的this指向window的。

this的指向的问题我是说明白了，再总结一下：如果函数有调用者时，this指向调用者，如果没有调用者，this指向window的。上述代码中，都没有涉及闭包问题。

这里举个例子

var b = function(){
console.log(this); // 标记1
return function(){
console.log(this);// 标记2
}
}
var c = b();//标记1 打印window
c();// 标记2 打印window c是被window调用的，打印window没问题
var a = {
fn : c
}
a.fn();// 标记2 打印对象a，没问题
//如下方式呢
var e = {
fn : function(){
c();
}
}
e.fn();// 标记2 打印window 因为c()是没有调用者的

可以看出，不管是不是闭包，还是那句话，能找到调用者就指向调用者，找不到就指向window。

《js高级程序设计》里面是这么说的，匿名函数的执行环境具有全局性的。我是这么看的，找不到调用者时，执行函数就具有全局性。跟你这个函数是不是有名匿名没有任何关系。

第二部分

如何保证this，是我们想要的this呢

有几个方法，这里大致说下

1.不把某个函数名，直接赋值某个变量，而是外面加一层函数，然后再调用，换句话说，给你机会来让这个函数执行时指定调用者或者不设置调用者，直接上代码

<section>
<button id="btn" name="myBtn" style="width:100px;height:30px;">点击我</button>
</section>
<script>
var name="切图网"；
var btn = document.getElementById('btn');
var f = function(){
alert(this.name);
};
btn.onclick = f;
</script>
上述代码，点击按钮时弹出的是btn对象的name：mybtn。如果想要弹出window中的name，可以改成如下代码

<section>
<button id="btn" name="myBtn" style="width:100px;height:30px;">点击我</button>
</section>
<script>
var name="切图网"；
var btn = document.getElementById('btn');
var f = function(){
alert(this.name);
};
btn.onclick = function(){
f();
};
</script>

2.设置变量缓存this，如

var name = "yyy";
var Person = function(name){
this.name = name;
(function(){alert(this.name)})();
}
new Person("xxx");
上代码运行会弹出window的name：yyy，如果想弹出对象的name：xxx，可以改成
var name = "yyy";
var Person = function(name){
this.name = name;
var self = this;
(function(){alert(self.name)})();
}
new Person("xxx");

3.应用call、apply方法来指定this

var name = "yyy";
var o = {name: "xxx"};
var fun = function(x,y){
alert(this.name)
return x+y;
}
fun(3,4);

// 等于于如下的调用

fun.call(window,3,4);
fun.call(this,3,4);
fun.apply(window,[3,4]);
fun.apply(this,[3,4]);

上述代码运行弹出window的name:yyy,如果要弹出o的name，可以改成

var name = "yyy";
var o = {name: "xxx"};
var fun = function(x,y){
alert(this.name)
return x+y;
}
fun.call(o,3,4);
fun.apply(o,[3,4]);

4.应用框架函数，一般的框架都有给函数绑定上下文的函数（基本也都是应用apply和call），比如jquery的$.proxy().这里写个函数

function proxy(fn,context){
return function(){
fn.apply(context,arguments);
}
}

var o = {name: "xxx"};
var fun = function(x,y){
alert(this.name)
return x+y;
}
var fun2 = proxy(fun,o);
fun2(3,4);

文/丁向明

做一个有博客的web前端自媒体人，专注web前端开发，关注用户体验，加我qq/微信交流：6135833

http://dingxiangming.com