js中this指向问题

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

在不同的环境下this有不同的指向：

• 事件调用环境中 谁触发事件，this就指向谁

let box = document.querySelect('.box')
let box2 = document.querySelect('.box2')

function move(){
	this.style.left = '100px'
}

box.onclick = move    //指向box
box2.onclick = move		//指向box2

• 在浏览器运行的全局环境下 this指向windows

//let box = document.querySelect('.box')
//let box2 = document.querySelect('.box2')

function move(){
	this.style.left = '100px'
}

move()    //指向window
window.move()		//指向window

• node运行的环境中，单独的js文件

因为node没有window对象，所以在node环境中，this指向导出的对象 module.exports

console.log(this == module.exports) // true

• 函数内部 this始终指向的是调用它的对象

函数被多层对象所包含，如果函数被最外层对象调用，this指向的也只是它的上一层对象

var obj = {
	a = 10,
  b:function(){
  	console.log(this)
  }
}
obj.b()  //   指向obj




window,obj.b() // 指向obj

var obj = {
	a = 10,
  b = {
		fn:function(){
    	console.log(this)
    }
	}
}
obj.b.fn()  //   指向b

window,obj.b.fn() // 指向b

var abc = obj.b.fn

abc()   //指向window   等同于window.abc()

• 构造函数 函数被多层对象所包含，如果函数被最外层对象调用，this指向的也只是它的上一层对象

function fn(){
	this.num = 10
  console.log(this)
}
//如果fn有返回对象或者返回的函数，this就指向返回出来的对象或者函数   null或者简单的数据类型   就指向上面的10

var obj = new fn()    	//fn:{num:10}
console.log(obj)    		//fn:{num:10}
console.log(obj.num)    //10

// new帮助我们做的事情
//1.调用函数
//2.自动创建一个对象
//3.把创建好的对象和this绑定 
//4.如果构造函数没有返回值，隐式返回this对象
fn.num = 20
fn.prototype.num = 30
fn.prototype.method = function(){
	console.log(this.num)
}


var propotype = fn.prototype
var method = prototype.method


new fn().method() //10

prototype.method() //30

method() //undefind

• 箭头函数

箭头函数中的this永远指向上一级的作用域，而且箭头函数的this指向是在定义的时候就会被决定，不会根据调用的环境而发生变化

改变this指向

let box = document.querySelect('.box'),a,b,c
let obj = {
    fn:()=>{
        console.log(this)
    }
}

obj.fn.call(box)  //window   this指向在定义的时候就决定了，不能改变

obj ={
    fn:function(){
        console.log(this)
    }
}

obj.fn.call(box) 			//<div class='box' >box</div>
obj.fn.apply(box,[a,b,c])
obj.fn.bind(box) 			// 不会执行需要调用
obj.fn.bind(box)()  		// <div class='box' >box</div>