JavaScript this学习

学习参考博客：https://www.cnblogs.com/chenhuichao/p/9351754.html

函数中的this在函数定义时，并不会知道指向谁，只有在调用的时候才能确定，大部分情况下，this指向函数的调用者

由window调用

function f () {
	var user = "cjn";
	console.log(this)    // window
	console.log(this.user)    // undefined
}

// window为调用者，this指向window
f()
window.f()

由对象调用

var obj = {
	user: "cjn",
	foo: function () {
		console.log(this.user)	// cjn
	}
}

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

由对象的子对象调用

var obj = {
	user: "cjn",
	_obj: {
		user: "kobe",
		foo: function () {
			console.log(this.user) // kobe
		}
	}
}

// 虽然被嵌套调用，但this指向了最近的一层，_obj对象
obj._obj.foo()

var obj = {
	user: "cjn",
	_obj: {
		user: "kobe",
		foo: function () {
			console.log(this.user) // undefined
		}
	}
}

// 在赋值给fn的过程中，foo并没有被调用，真正调用者是window
var fn = obj._obj.foo
fn()

var obj = {
	user: "cjn",
	_obj: {
		foo: function () {
			console.log(this.user) // undefined
		}
	}
}

// this指向_obj，_obj中没有user属性，this不会向上寻找
obj._obj.foo()

构造函数中的this，new关键字创建实例对象时，会给实例对象复制一份相同的函数，this会指向这个实例对象

function person () {
	this.name = "cjn";
}

var xiaochen = new person();
console.log(xiaochen.name);    // cjn

this遇到定时器

var user = "cjn";
var obj = {
	user: "kobe",
	fn: function () {
		setInterval (function () {
			console.log(this.user)	// cjn
		}, 1000);
	}
}

// setInterval、setTimeout都是属于window对象的方法，this指向window
obj.fn()

解决方法1：在fn中存放this。fn由obj对象调用，this自然指向obj对象

var user = "cjn";
var obj = {
	user: "kobe",
	fn: function () {
		var _this = this;
		setInterval (function () {
			console.log(_this.user)	// kobe
		}, 1000);
	}
}

// _this始终指向obj对象
obj.fn()

解决方法2：es6箭头函数，箭头函数的this继承外部函数的作用域

var user = "cjn";
var obj = {
	user: "kobe",
	fn: function () {
		setInterval ( () => {
			console.log(this.user)	// kobe
		}, 1000);
	}
}

obj.fn()