前端开发核心知识进阶 1.1 JS中的this

本文详细探讨了JavaScript中this的灵活指向规则,包括函数体内、new关键字、call/apply/bind的应用以及箭头函数的独特行为。通过实例解析call、apply和bind如何改变this指向,以及在箭头函数中的固定外层作用域指向。
摘要由CSDN通过智能技术生成

js中的this指向很灵活,有个说法是“谁调用this就指向谁”

一、this的规律

1.在函数体内,严格模式下,this指向undefined,非严格模式下,指向全局对象window

2.用new方法调用函数,构造函数内的this会被绑定到新创建的对象

3.用call、apply、bind方法调用函数时,函数体内的this会绑定到指定参数对象上

4.对象调用函数时,函数内this被绑定到该对象

5.箭头函数中,this指向外层(函数或全局)作用域

二、call、apply、bind、new

1.一般叫call、apply、bind的this绑定为显式绑定,调用关系确定this指向的称为隐式绑定

2.call、apply直接调用函数,函数体中的this指向参数中的对象,bind返回一个新函数,函数体中的this指向参数中的对象,需要手动调用

3.call、apply、bind的优先级比一般的高,以下例子为对象调用函数,其this指向被call、apply、bind修改

例:

function f1(a){
      console.log(this.a);
    }
    const obj1 = {
      a:1,
      f1:f1
    }
    const obj2 = {
      a:2,
      f1:f1
    }
    const obj3 = {
      a:3,
      f1:f1
    }
    obj1.f1.call(obj2) //2
    obj2.f1.call(obj1) //1
    obj2.f1.bind(obj1)() //1

4.new比bind的优先级高

    function f1(a){
      this.a = a
    }

    const obj1 = {}
    var fun = f1.bind(obj1)
    fun(2)
    console.log(obj1.a); // 2
    
    var obj2 = new fun(3)
    console.log(obj2.a); //3

由结果可见,bind把返回了一个把this指向obj1的函数fun,当fun函数作为构造函数时,this指向被修改了,指向了新创建的对象obj2

三、箭头函数的this指向

先看一段代码,输出结果应该是什么呢

    const obj = {a:1}
      var b = ()=>{
        console.log(this.a);
      }
      b.call(obj)

这里输出undefined,因为箭头函数的this指向外层作用域,函数或者全局

    function fun(){
      return a => {
        console.log(this.a);
      }
    }
    const obj1 = {
      a:1
    }
    const obj2 = {
      a:2
    }
    var fuc = fun.call(obj1)
    fuc.call(obj2)

输出结果是1。

为什么呢,按我的理解是:第一次调用fun,fun内的this指向obj1,此时箭头函数的外层作用域就是fun函数,所以箭头函数的this指向fun函数内的this,也就是obj1,然后返回这个箭头函数。fuc.call(obj2) 调用这个fuc函数时,将函数体的this指向obj2,而第一个例子表明,此时的箭头函数不会指向obj2,而是会指向全局。然而这个箭头函数的this已经指向obj1,箭头函数的this指向无法被修改,所以this不会指向全局

再来一个例子:

    var fun = () => a => {
        console.log(this.a);
    }
    const obj1 = {
      a:1
    }
    const obj2 = {
      a:2
    }
    var fuc = fun.call(obj1)
    fuc.call(obj2)

这回能箭头函数返回一个箭头函数,输出结果会是什么呢

输出结果为undefined,由第一个例子表明,fun函数就算用call将函数体内的this指向改成obj1,它还是会去外层作用域获取this指向,这里外层作用域为全局,fuc接收fun函数返回箭头函数,把其函数体内this指向改为obj2,其结果也相同,去外层作用域全局获取this指向

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值