es6——箭头函数的this指向

本文详细讲解了JavaScript中的this指向问题,对比了普通函数与箭头函数的区别。在普通函数中,this指向调用者,而在箭头函数中,this保持外部作用域的指向,不具有自己的this。通过示例展示了箭头函数的极简和完整写法,以及在对象方法中的应用。同时,探讨了模块导出和全局this的情况,帮助理解this在不同场景下的行为。
摘要由CSDN通过智能技术生成

         箭头函数

        (小知识点:全局指向的this内容与module.exports指向的内容相同。)
    this指向
        普通函数:this指向调用者,没有调用者指向global
        箭头函数:没有自己的this,this指向' 声明时(指箭头函数)'外部作用域的this

        (注意:作用域以大括号作为界限)
 箭头函数写法
        极简写法(形参只有一个时,可省略括号,只有一句返回语句时,箭头后面可直接写表达式)
          let result = arr.filter(item => item > 5)
        箭头函数完整写法=>
          let result = arr.filter((item) => {
            retrun item > 5
          })
        ES5写法=>
          let result = arr.filter(function(item) {
            retrun item > 5
          })

let obj = {
    name: '张三',
    age: 12,
    gender: 'male',
    sayName: () => {
    console.log(this);
     }
}
obj.sayName();   // {}
let obj = {
    name: '张三',
    age: 12,
    gender: 'male',
    sayName() {
        console.log(this.name);
    },
}
obj.sayName();   //张三
let obj = {
    name: '张三',
    age: 12,
    gender: 'male',
    sayName: function () {
        return () => {
            console.log(this)
        }
    },
}
obj.sayName()(); 
//{ name: '张三', age: 12, gender: 'male', sayName: [Function: sayName] }

 

let arrowFun = () => {
    console.log(this);
}

let obj = {
    name: '张三',
    age: 12,
    gender: 'male',
    sayName() {
        return arrowFun
    }
}
obj.sayName()();  // {}

 

let obj = {
    name: '张三',
    age: 12,
}
this.name = 'lisi'
module.exports.gender = 'male'
console.log('全局this', this);  //全局this { name: 'lisi', gender: 'male' }
console.log('module.exports', module.exports);
  //module.exports { name: 'lisi', gender: 'male' }


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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值