箭头函数的使用和this指向

最新推荐文章于 2022-07-16 19:21:27 发布

坏萝卜

最新推荐文章于 2022-07-16 19:21:27 发布

阅读量129

点赞数 1

分类专栏： es6 文章标签： es6

本文链接：https://blog.csdn.net/qq_52135740/article/details/118681570

版权

es6 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文深入探讨了JavaScript中的箭头函数，包括其定义方式、参数处理、函数体的使用及this指向。特别强调了箭头函数不绑定自己的this，而是从外层作用域继承。通过示例展示了在setTimeout等上下文中，箭头函数如何保持正确的this值。

摘要由CSDN通过智能技术生成

箭头函数的使用

//箭头函数：也是一种定义函数的方式
//1.定义函数的方式：function
const aaa = function(){

}
//2.对象字面量中定义函数
const obj = {
  bbb(){

}
}
//3.es6中的箭头函数
// const ccc = (参数列表)=>{
// }
const ccc = () =>{

}

箭头函数的注意点:

如果形参只有一个，则小括号可以省略
函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果
箭头函数不能作为构造函数实例化
不能使用 arguments

箭头函数的参数

//1.参数问题
//1.1放入两个参数
const sum = (num1, num2) => {
  return num1 + num2
}
//1.2放入一个参数
const sum = num => {
   return num * num
}

箭头函数的函数体

//1.函数体
//1.1函数代码块中有多行代码时
const test = () => {
   console.log("hello world");
   console.log("hello vue");
}
//1.2函数代码块中只有一行代码
const mul = (num1, num2) => num1 + num2
const demo = () => console.log("hello demo");

this指向

问题：箭头函数中的this是如何查找的？
答案：向外层作用域中，一层层查找this，直到有this的定义

const objs = {
  aaa() {
    // setTimeout(function () {
    //     console.log(this);    //window
 	// })
	setTimeout(() => {
          console.log(this);  //obj对象
     })
    }
}
 objs.aaa()

const objs = {
            aaa() {
                setTimeout(function () {
                    setTimeout(function () {
                        console.log(this);    //window
                    })
                    setTimeout(() => {
                        console.log(this);    //window
                    })
                })
                setTimeout(() => {
                    setTimeout(function () {
                        console.log(this);    //window
                    })
                    setTimeout(() => {
                        console.log(this);    //obj
                    })
                })
            }
        }
        objs.aaa()

es5的this指向

永远指向其所在函数的所有者如果没有所有者时，指向window。规律如下：
1、函数执行，首先看函数名前面是否有"."，有的话"."前面是谁就是谁；没有的话this就是window
2、自执行函数中的this永远是window
3、给元素的某一个事件绑定方法，当事件触发的时候，执行对应的方法，方法中的this是当前的元素
4、在构造函数模式中，类中（函数体中）出现的this.xxx = xxx;中的this是当前类的一个实例