一步解决this指向问题！

一步理解this的指向问题！

// 0. this对象是函数执行时才有的，它是函数执行上下文的一个对象，上下文中包括this对象、函数参数、作用域链

// 1. 箭头函数的this: 箭头函数没有自己的this，它的this指向到该函数定义时所在的区域的this
// 2. 显式指定的this: call apply bind
// 3. 通过对象调用的方法的this: 指向调用函数的对象
// 4. 直接执行某个函数的this: 不管这个函数从哪来，它的this指向全局对象，在严格模式全局是undefined，非严格模式下浏览器环境是window，node环境是global。使用es6模块的代码默认开启了严格模式
// 5. 匿名函数的this: 匿名函数this对象指向全局对象，在严格模式全局是undefined，非严格模式下浏览器环境是window，node环境是global。使用es6模块的代码默认开启了严格模式
// 5.1 如果使用setTimeout setInterval内定义的匿名函数，他们的this对象在浏览器下永远都是window
'use strict'
const obj1 = {
	a: 1,
	f1: function () {
		console.log('f1 this: ', this.a)
		const f2 = () => {
			console.log('f2 this: ', this.a)
		}
		f2()
	},
}

let f3 = () => {
	console.log('f3 this', this)
}

obj1.f1()

f3()

// 2============

const obj2 = {
	a: 2,
	f1: function (a, b, c, d, e, f) {
		console.log('obj2 f1 this: ', this)
		console.log('obj2 f1 参数: ', arguments)
		console.log('obj2 f1 参数: ', a, b, c, d)
	},
	f7: function () {
		;(function () {
			console.log('f7内的匿名函数 this: ', this)
		})()

		setTimeout(function () {
			console.log('f7内的setTimeout的匿名函数this: ', this)
		}, 1000)

		setTimeout(() => {
			console.log('f7内的setTimeout的箭头函数this: ', this)
		}, 1000)
	},
}
console.log('-------------obj2 f1')
obj2.f1()

// call apply共同点: 执行函数时指定这个函数的this对象，第一个参数指定this对象
// call apply不同点: call方法传递参数需要逐个传递，apply传递参数使用数组
// call比apply方法性能要好, 但是apply使用起来方便
obj2.f1.call(obj1, 1, 2, 3)
obj2.f1.apply(obj1, [1, 2, 3, 4])

console.log('-----------------f4')
// bind方法指定函数的this对象，但是不执行函数，同时返回指定好this对象的后的函数
// 如下: f4是对obj2.f1函数的this明确指定后的函数，f4的函数体内容和obj2.f1的内容完全一样
let f4 = obj2.f1.bind(obj1)

f4()

let f5 = obj2.f1

console.log('-----------------f5')
f5()

function f6() {
	console.log('f6 this', this)
}

console.log('-----------------f6')
f6()

console.log('-----------------f7')
obj2.f7()

现在总结三句话，来完全理解this的指向问题：

情况一：如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window（除去严格模式外）。

情况二：如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。

情况三：如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象