前端this指向问题

最近看视频重学下this指向问题，顺便做下笔记加深记忆

this的默认绑定规则

this默认指向window

	<script type="text/javascript">
		console.log(this === window)  //true
	</script>

在方法中,this也指向window，函数独立调用，this也指向window

	function test() {
		console.log(this === window)
	}
	test() //true

隐式绑定规则

谁调用this就指向谁

	<script type="text/javascript">
		var obj = {
			name: '鱼鱼',
			foo: function () {
				console.log(this === obj)
			}
		}
		obj.foo() //true
	</script>

在函数内部再定义一个函数

	<script type="text/javascript">
	var obj = {
		name: '鱼鱼',
		foo: function () {
			console.log(this === obj)
			function test () {
				console.log(this)
			}
			test(); //指向window,因为test是独立调用
		}
	}
	obj.foo() //true
	</script>

函数立即执行，函数里的this同样相应的全局对象，（浏览器中指向window）

	<script type="text/javascript">
	var obj = {
		name: '鱼鱼',
		foo: function () {
			console.log(this === obj)
			function test () {
				console.log(this)
			}
			test(); //window,因为test是独立调用
			(function() {
				console.log(this)  //指向window
			})();
		}
	}
	obj.foo() //true
	
	</script>

参数赋值的情况

obj.foo作为参数相当于foo独立调用，独立调用指向window

	<script type="text/javascript">
		function foo() {
			console.log(this)
		}
		function bar(fn) {
			fn();
		}
		var obj = {
			a: 2,
			foo: foo
		}
		bar(obj.foo) //指向window  
	</script>

父函数有能力决定子函数的this指向

显示绑定，call, bind,apply

为了改变指向对象而存在，可以参考下面文章
call bind apply用法

new绑定

	<script type="text/javascript">
		function Person() {
			this.a = '芜湖'
		}
		var person = new Person();
		console.log(person) //指向实例化对象Person
	</script>

箭头函数的this

箭头函数内部没有this指向，是由最外层定义的

	<script type="text/javascript">
		function foo() {
			var test = () => {
				console.log(this)
			}
			test();
		}
		var obj  = {
			name: '鱼鱼',
			foo: foo
		}
		obj.foo(); //打印的是obj而不是window
	</script>

箭头函数的独立调用

	<script type="text/javascript">
		function foo() {
			var test = () => {
				console.log(this)
			}
			return test
		}
		var obj  = {
			name: '鱼鱼',
			foo: foo
		}
		obj.foo()(); //依旧是obj,独立调用对箭头函数无效
	</script>

call以及apply等显示规则对箭头函数无效