JS中的this指向详解

this指向问题

​ JS中this的指向是不确定的，只有根据this所在的位置才能判断出他到底指向谁。

1，全局下的this

全局调用的this分为严格模式和混杂模式

//混杂模式下
var num = 1
function fn1(){
  console.log(this.num)
}
fn()  //1

//严格模式下
var num = 1
function fn1(){
  'use strict'
  console.log(this.num)
}
fn()  //undefined

在混杂模式下，全局调用的this指向window，在严格模式中，禁止this指向window所以为undefined。

2，上下文对象调用this

​ 2.1在上下文对象调用this中分为普通函数和箭头函数

​ 2.1.1普通函数:在普通函数调用this中，this指向他的直接调用者，也就是这里的obj

var name = 'ls'
const obj = {
	name:'zs',
	fn(){
		console.log(this.name) 
	}
}
obj.fn() //zs

​ 2.1.2箭头函数调用:箭头函数的this指向他定义的地方，但不是obj而是window，箭头函数的this是根据外层（函数或者全局）作用域来决定的。

var name = 'ls'
const obj = {
	name:'zs',
	fn:()=>{
    console.log(this.name)
  }
}
obj.fn() //ls

3.构造函数中的this

function Person(name){
  this.name = name
}
var p1 = new Person('zs')

在构造函数中，this经过new的调用发生了改变，在使用new调用时：

​ a.new会在内存中创建一个新的空对像

​ b.new会让this指向这个新对象

​ c.执行构造函数中的代码

​ d.return这个新对象

4.call，apply调用的this

call和apply函数可以改变普通函数的this指向，但是不能改变箭头函数的this指向。

let obj1={
  name:"zs",
  fn(){
    console.log(this.name)
  }
}

let obj2={
  name:"ls",
  fn(){
    console.log(this.name)
  }
}
obj1.fn.call(obj2) //ls

通过call调用的函数this指向第一个参数的上下文