深入浅出JS—04 this指向判断

在全局作用域下，浏览器中console.log(this)打印出来的是window对象。但是我们通常都是在函数中使用this，下面用最简单的语言说说箭头函数和普通函数中如何判断this的指向

普通函数this——看函数执行方式

绑定规则一：默认绑定全局（独立执行）

只要函数是独立调用的，就是默认绑定全局对象GO（浏览器中是window）。 无论函数定义位置是在哪里，函数的执行位置是在哪里，只要调用函数那一行是fn()

function foo1(){
	console.log(this)
}

foo1() // this指向全局对象window

function foo2(){
	var name = 'shdka';
	foo1(); // this依然指向全局对象window
}

绑定规则二：隐式绑定（作为对象的方法被执行）

相比于fn()，函数调用时obj.fn()，表示调用对象obj的fn方法，那么fn中的this就隐式绑定到obj中

const obj = {
	name: 'xs',
	foo: function (){
		console.log(this);
	}
}

obj.foo(); // this指向对象obj

const bar = obj.foo;
bar() //指向window，因为是函数独立调用

绑定规则三 显示绑定

采用call，apply和bind可以显示绑定this，需要注意的是call和apply的区别（apply中参数以数组方式传递），bind返回的是一个函数

function foo(num1, num2) {
	console.log(this);
	return num1 + num2;
}

const n1 = 10;
const n2 = 20;
foo.call("call", n1, n2); // "call"
foo.apply("apply", [n1, n2]); // "apply"

const bar = foo.bind('bind');
bar(n1, n2) // "bind"

绑定规则四：new构造函数

function Person(name, age) {
  this.name = name;
  this.age = age;
}

//new：生成新的对象，将this绑定到该对象，返回对象
var p = new Person('xs', 19);
console.log(p.name, p.age); // 'xs' 19 this指向的是p自己

---

箭头函数this——看定义函数的位置

普通函数调用时，首先创建函数执行上下文：确定该函数的变量对象VO、作用域链和的this指向，所以普通函数是有自己独立的this指向的，this与函数被调用的方式息息相关。
对于箭头函数，在创建执行上下文时不会有自己的this对象，如果在函数内部用到this变量，需要去VO以及外层作用域中寻找。

⚡注意：箭头函数的this指向外层作用域中的this

• 能被称为作用域的就是全局作用域或者是函数作用域，并不是有花括号的{}就是一个作用域
• 既然和作用域有关，那么就和箭头函数的定义位置有关，和执行位置无关

// 解释箭头函数中的this
const name = 'xs';
const fn = () => {
	// const name = 'name1';
	console.log(name); // 箭头函数内部没有定义name变量，要去外层找
	console.log(this); // 箭头函数内部没有定义this变量，要去外层作用域中找
}
fn() //'xs' window

---

函数this指向辨析（实用版）

this问题面试中也经常问，但是对于走过面试关卡的人而言，实际开发中也离不开对this的辨析，所以下面的案例以实际开发中高频场景来讲解。

// 箭头函数
const obj = {
  data: [],
  getData:  function() {    
    // 模拟发送异步网络请求，获得结果，赋值给data
    setTimeout(() => {
      const nums = [1, 3, 3, 4];
      this.data = nums
    }, 200)
  }
}

obj.getData();

// 箭头函数this取决于外层作用域的this
// 1、外层作用域是getData函数（注意不是setTimeout,函数是在setTimeout中被执行的，但不是在其中被定义的）
// 2、getData的this在调用时被指定，因为函数obj.getData()调用的，所以this指向的是obj

var name = 'window'
var person1 = {
  name: 'person1',
  foo2: () => console.log(this.name),
  foo4: function () {
    return () => {
      console.log(this.name)
    }
  }
}

person1.foo2(); // window 函数定义在对象中，但是对象的{}只代表对象，不代表作用域，所以它外层作用域是全局作用域
person1.foo2.call(person2); // window 箭头函数没有自己的this，所以给箭头函数call绑定没有用

person1.foo4()(); // person1 执行的是箭头函数，this和外层作用域同，也就是foo4同，foo4的this在调用时被指定，所以是person1
person1.foo4.call(person2)(); //person2 箭头函数this和foo4同，foo4被显式绑定了person2
person1.foo4().call(person2); //person1