前端高频面试题-JS中的this指向

函数this指向

调用方式	示例	函数中this指向
通过new调用	new method	新对象
直接调用	method()	全局对象
通过对象调用	obj.method()	调用的对象
call、apply、bind	method.call(ctx)	第一个参数

代码举例：

1、通过new调用

function fn(){
    console.log(this)
}

new fn() //返回的是{}新对象

2、直接调用

function fn(){
    console.log(this)
}

fn() //返回的是window全局对象

3、通过对象调用

const car = {
    name:'奔驰',
    run() {
        console.log(this); 
    }
}

car.run() //打印出来的是car这个调用run方法的对象

4、call和apply都是改变this指向为第一个参数，bind比较特殊

bind返回的是一个新函数。

function fn(){
    console.log(this)
}

const newFn= fn.bind(1)

newFn() //打印的是1

new newFn() //打印的是{}新对象

// 因为bind的内部实现如下：

bind(ctx){
    return function(){
        if(当前函数是用new来调用的){ //这里的当前函数相当于上面的newFn
            new 调用原始函数  //这里的原始函数相当于fn
        }else{
             调用原始函数.call(ctx)
        }
    }
}

5、箭头函数没有this

箭头函数基于闭包，闭包属于词法作用域，词法作用域是在编译时确定的，不是在运行时确定的。所以箭头函数中使用的this是定义时就确定的，是它的外层的执行上下文确定的。

const obj = {
    name:'xx',
    fn(){ 
         console.log(this)
         let a = ()=>{
            console.log(this)
         }
         a()
    }
}

obj.fn()  //上面2处的this都是打印出来的是obj