JS中this完全讲解，再也不会被this搞晕了函数中的this取何值是在函数真正被调用时确定的(也就是运行时)，函数定

Javascript 中的This对象

js 中的this 是一个比较难理解的对象；所以也经常作为面试的考点，考察应聘者的js 基础能力；其实this的指向也就那么几种情况，接下来我们一一看一下：

函数中的this取何值是在函数真正被调用时确定的(也就是运行时)，函数定义时确定不了。

1、在全局调用函数 this 指向 window

var a=10;
function fn(){
	console.log(this);// widow
	console.log(this.a);//10
}

因为函数是在全局调用的，所以this 指向 window；

2、DOM事件中的this 指向DOM节点

var foo=document.getElementById('foo');
foo.addEventListener('click',fn);
function fn(){
  console.log(this); // <div id="foo">click</div>
}

这个不难理解；由于DOM元素调用的他，所以指向了DOM元素

3、函数作为对象方法调用时，this就等于那个对象；

var obj={
	name:"daxiong",
  fn:function(){
    console.log(this);
  }
};
obj.fn(); // obj

如果我们做个变形：

var obj={
	name:"daxiong",
  fn:function(){
    console.log(this);
  }
};
var f1= obj.fn;
f1(); // window

为什么会指向window呢，以为这个函数的指针已经指向了 f1 而f1 的执行环境时 window 所以指向了window；

4、匿名函数中的 this 具有全局性

var obj={
  name:'daxiong',
  fn:function(){
		return function(){
      console.log(this);
    }
	}
};
obj.fn()(); // window

在红皮书中有这么一句话：匿名函数的执行环境具有全局性 所以这个输出的是window；那么为什么呢，其实在这个上下文（执行环境）中匿名函数并没有绑定到任何一个对象中，所以指向了window （非严格模式）

我们在看下这个例子：

var obj={
  name:'daxiong',
  fn:function(){
		console.log(this); 
		var f1=function(){
				console.log(this);
		}
		f1();
	}
};
obj.fn();
// obj
// window

第一个输出是obj是一位函数在obj中调用了； f1的调用为什么会是window呢：因为他没有绑定到任何一个对象中；

5、箭头函数中的This

箭头函数中this 指向与其他不同，他是在函数定义是就确定了（词法作用域）；

var obj={
  name:'daxiong',
  fn:function(){
    console.log(this);
    var f1=()=>{
			console.log(this);
		}
		f1();
	}
}
obj.fn();
//obj;

f1定义的作用域，是obj.fn 的作用域；所以f1 的作用域指向了obj;

var f2=obj.fn;
f2(); 
// window
// window
所以说 箭头函数f1的作用域是 obj.fn的作用域；

6、构造函数中的this 指向创建的实例对象

我们看一下 new 关键字主要做了哪些事：

1、创建一个新的对象；

2、将这个新对象的原型指向构造函数的 Prototype

3、执行构造函数中的代码（这个函数的调用会绑定到新对象的this）；

4、返回这个对象；

//伪代码；
var new1=function(fn){
  var newObj=Object.create(fn);
  fn.call(newObj);
  return newObj;
};

7、显式绑定改变this的指向

1、call、apply 可以显式绑定；这两个函数的第一个参数是一个对象；他们会把这个对象绑定到this，接着调用函数时指定这个this；

function foo(){
  console.log(this.a);
}
var obj={
  a:1
}
foo.call(obj); //1;

8、综上所述，我们可以使用下面的规则，对this的指向进行判断：

1、函数是否在new 中调用（new绑定）？如果是的话this 绑定的就是新创建的对象。

var bar = new foo();

2、函数是否通过call、apply （显示绑定）？如果是this指向的是指定的对象；

var bar =foo.call(obj2);

3、函数是否在某个上下文对象中调用（隐式绑定）？如果是的话，this 指向那个上下文对象。

var bar=obj1.foo();

4、如果都不是的话，就是默认绑定。在严格模式下，就绑定到 undefined,否则绑定到全局对象。

var bar =foo();

5、当然也有例外，比如箭头函数中的this，是词法作用域，this 指向定义所在的作用域。

JS中this完全讲解，再也不会被this搞晕了