JS学习笔记 -- this作用域

概述
this是 JavaScript 语言的一个关键字。
它是函数运行时，在函数体内部自动生成的一个对象，只能在函数体内部使用。

function test() {
　this.x = 1;
}

上面代码中，函数test运行时，内部会自动有一个this对象可以使用。
那么，this的值是什么呢？
函数的不同使用场合，this有不同的值。总的来说，this就是函数运行时所在的环境对象。 – 引用下阮一峰老师的解读

• 事件调用场景下：谁触发事件，调用者就是谁。

var x=1;
function test(){
       alert(this.x); 此时this为window
}
test(); //结果为1

• 全局环境 纯粹的函数调用 window module.exports

var x = 1;
function test() {
   console.log(this.x);
}
test();  // 1

作为构造函数使用，通过构造函数生成一个函数，this指向的就是这个对象。

function test() {
　this.x = 1;
}

var obj = new test();
obj.x // 1

验证Case:

var x = 2;
function test() {
  this.x = 1;
}

var obj = new test();
x  // 2

在函数内部时：

• this最终指向的是调用它的对象。
• 构造函数调用：构造函数中的this指向的是实例对象。

 1 调用函数
 2 自动创建一个函数
 3 将创建出来的对象和this进行绑定
 4 如果构造函数没有返回值，隐式返回this对象。

如果构造函数中含有return，那么return的值是个对象，那么this指向的是返回的对象。如果不是对象，则保持原来的规则，null比较特殊，指向还是保持原有规则。
经典案例Case:

function fun(){
	 this.num = 10;
	 console.log(this.num);
}
fun.num = 20;
fun.prototyep.num = 30;
fun.prototype.method = function(){
	console.log(this.num);
}
var prototype = fun.prototype;
var method = prototype.method;

new fun().method();// {}.method() => 10

prototype.method();//30

method();//window.num => undefined

• 箭头函数：

  箭头函数本身没有return和arguments的，在箭头函数中的this实际上指的是上一层作用域的this,因此对象是不能独立形成作用域的。

案例分析：

var obj = {
	fn:()=>{
		console.log(this);
	}
}
obj.fn();//window

改写下：
var obj = {
	fn: function(){
		console.log(this);
	}
}
obj.fn();//obj

修改this的指向：

• call(this,args1,args2,arg3);
• apply(this,[args1,args2,arg3]);

apply()是函数的一个方法，作用是改变函数的调用对象。它的第一个参数就表示改变后的调用这个函数的对象。因此，这时this指的就是这第一个参数。

var x = 0;
function test() {
　console.log(this.x);
}

var obj = {};
obj.x = 1;
obj.m = test;
obj.m.apply() // 0

apply()的参数为空时，默认调用全局对象。因此，这时的运行结果为0，证明this指的是全局对象。

如果把最后一行代码修改为

obj.m.apply(obj); //1

运行结果就变成了1，证明了这时this代表的是对象obj。

• bind(this,args1,args2,arg3)();

测试题：

var x = 2;
function test()
{
　　　　 this.x = 1;
}
var o = new test();
alert("o.x: " + o.x); 
o.x = 3;
test();
x*=10;
　　alert("o.x: " + o.x); 
alert("x: " + x); 

欢迎在下方留下你的答案~