js中的this是一个头疼的问题，尤其对于笔者这种初级的菜鸟来讲，下面梳理下this的知识，可以当做是初级进阶也好入门也罢，总归输出的才是自己掌握的:
Js中this不是由词法作用域决定的 而是调用时动态指定，这就有点麻烦了，如果不能明确知道函数调用时的词法作用域this的指向也就只能靠猜了，算一卦这种模式不是不推荐而是根本不能用，要是真的不能确定this指向 可以查一下调用栈 或是上个断点之类的，当然alert这种较为原始的方法也是有效的不过确实有点low;
Js函数调用方式大致可以归为四类(此处是阮一峰大神总结的)即a.直接调用(默认指向)b.当方法调用(隐式指向)c.用new调用d.是特殊的调用方式(bind,call..)(显示指向);
当然了这里是有优先级的就像css的class一样 即: c > d > b > a;下面也说以便这四种当用方式(非严格模式):
A.直接调用
function fn(){
console.log(this)
}
fn();
这里的this是window 这个是比较简单基础，像是这样：
var n = 7;
function fn(){
this.n = 8;
function fn1(){
console.log(this.n)
}
return fn1();
}
var test = new fn();
这里this也是指向window的所以this.n==window.n 也就是7.这里也可以看出this不是基于词法作用域的 而是调用时指定的，怎么回事呢，有句话大概意思就是只要是函数声明其this都指向window ,与声明的位置无关;
B.当方法调用：
var name = "a";
var obj = {
name: "b",
sayname: function(){
console.log(this.name);
}
}
obj.sayname();
这个也是一个典型的基础的案例，输出 b ；this指向obj;这段代码其实就是这样的:
var name = "a";
var obj = new Object();
obj.name = "b";
obj.sayname = function(){
console.log(this.name);
}
obj.sayname();
这里有个小坑，像是这样:
var name = "a";
var obj = {
name: "b",
obj2: {
name: "c",
sayname: function(){
console.log(this.name);
}
}
}
obj.obj2.sayname();
Var test = obj.obj2.sayname;
Test();
第一个congsole是 c ；原因也是一直提的this不是取决于词法作用域的而是动态绑定的 obj.obj2.sayname 这里sayname是作为obj.obj2对象的函数调用的 所以this指向obj.obj2;
第二个console也好理解,当sayname赋值给变量test时当前执行上下文就变了。指向window了。所以第二个是c; 简单讲当方法调用时 this指向调用方法的那个对象;换言之谁调用了这个方法this指向谁;
C.由new调用:
先上代码:
var name = "b";
function fn(){
this.name = "a";
this.sayname = function(){
console.log(this.name)
}
}
var obj = new fn();
obj.sayname();
在看这段代码前应该了解下 new的时候到底发生了些什么事..，调用的时候由new调用的函数就是构造函数了.为什么用构造函数呢，这个也好理解，总不能相似的功能都要复制粘贴吧.以上边代码为例 当执行new fn()时 在fn函数第一行隐式的创建了一个对象即 var o = new Object();下面的this全部替换成了o，也就是o.name = “a”;... 最后把这个对象o return了。而又把这个返回值赋给了变量obj，obj的引用地址也是指向这个对象（复合类型）;所以结果是a；
D.特殊的调用方式（有时候也叫硬性绑定或显示绑定）:
Call与applay用法一样唯一区别在意一个传递的参数是集合(applay)另一个是用几个参数写几个参数(call)：
var name = "a";
var obj = {
name: "b",
obj2: {
name: "c",
sayname: function(){
console.log(this.name);
}
}
}
obj.obj2.sayname.call(obj);
没错用了B 的例子，这下输出b ，我们给他硬性的绑定到了obj上，用apply与bind也是一样的; 还有像是eval setInterval等这种奇葩其作用域是全局的 要是在这里边用this不做处理的话都会指向window...
虽然this有点诡异却不是飘忽不定，哦对了 作为一个前端怎么不接触dom呢 dom事件也会改变this指向的比如:
document.onclick = function(){
console.log(this)
}
这里会打印document这个节点，简而言之事件在哪this就指向那;