一文搞懂JS中的this指向

一.this的概念

1. this 是在执行时动态读取上下文决定的,而不是创建时.(在执行时,才有具体含义)
2. 不同的环境下,this的执行也不同,它动态指向当前函数的运行环境

二.不同执行环境下的this指向

=> 全局上执行的环境 => 函数表达式,匿名函数,嵌套函数

函数调用

函数中直接调用 – this指向window

function fn(){
	console.log("函数内容",this)
}
fn() // 类似于 window.fn()

fn 是在window的环境下指向(window)

隐式绑定

隐式绑定:this指代调用 堆栈的上一级=>对象,数组等引用关系

示例1

	function fn(){
		console.log("隐式绑定",this.a)
	}
	const obj ={
		a:1,
		fn
	}
	
	obj.fn = fn;
	obj.fn();// 输入:1

• fn的调用位置是obj.fn进行调用的
• 那么这时this 指向obj

示例2

const foo = {
    bar:10,
    fn:function(){
        console.log(this.bar);
        console.log(this)
    }
}
// 取出
let fn1  = foo.fn;
// 独立执行 
fn1()
//log1:undefined
//log2:window

• 从隐式绑定来看,this指向上一级,但是执行环境是全局,
• 实际上fn1被单独取出,fn1就是一个独立的函数
• 所以最终指向的环境还是在window全局环境上

改变属性指向

const f1 = {
    text:"fn1",
    fn:function(){
        // 直接使用上下文
        return this.text
    }
}


const f2 = {
    text:"fn2",
 fn:function(){
        // 直接内部构造 -- 公共人
        let fn = f1.fn; // 独立的函数
        return fn()
    }
}
console.log("111",f1.fn())
console.log("222",f2.fn())

显示绑定(bind | apply | call)

  function foo(){
    console.log("函数内部",this)
   } 
    foo()

    // 使用
    foo.call({
        a:1;
    },1,2,3)
    foo.apply({
        a:1;
    },[])


    const bindFoo = foo.bind({
        a:1
    })
    bindFoo();