vue42(es6补充) —— 箭头函数

最新推荐文章于 2024-04-28 11:37:08 发布

8笔

最新推荐文章于 2024-04-28 11:37:08 发布

阅读量166

点赞数

分类专栏： vuejs

本文链接：https://blog.youkuaiyun.com/weixin_43899694/article/details/103238882

版权

vuejs 专栏收录该内容

57 篇文章

订阅专栏

本文探讨了Vue.js中ES6的箭头函数的使用，包括参数问题的处理，如无参、单参和多参的写法。还介绍了函数体的简写规则，特别是当函数体只有一行代码时的简化形式。此外，文章重点讲解了箭头函数的this指向，指出它如何在外部作用域中查找this定义，这对于在回调函数中保持this的正确指向至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一，参数问题

基本用法：无参，无返回值

   const fun = (参数列表) => {}

放入两个参数

  const sum = (num1,num2) => {
      return num1 +  num2 
    }

放入一个参数（可省略括号）

   const power = num => {
      return num  * num
    }

二、函数体代码简写：

函数体有多行代码——照常写

 const hi = () => {
      console.log('hello');
      console.log('箭头函数');
    }

函数体只有一行代码 ——简写

   const mul = (num1,num2) => num1 * num2  // {return num1 * num2}
    const hel = () => console.log('hello') // {console.log('hello')} 返回undefined

箭头函数使用场景：当想要将一个函数作为参数传给另一个函数时
eg。

 setTimeOut(function(){

   },100)
    setTimeOut(()=>{
       
   },100)

三、this指向

箭头函数的this：向外层作用域中一层层查找，直到有this的定义

setTimeOut(function(){
	console.log(this) //window
},100)

setTimeOut(()=>{
	console.log(this)  //window
},100)

const obj = {
	aaa(){
		setTimeOut(function(){
			console.log(this) // window
		},100)

		setTimeOut(()=>{
			console.log(this) // aaa
		},100)
	}
}

const obj = {
      aaa() {
        setTimeout(function () {
          console.log('yi', this); // window
          
          setTimeout(function () {
            console.log('yi1', this); // window
          }, 100)

          setTimeout(() => {
            console.log('yi2', this); // window
          }, 100);
        }, 100)

        setTimeout(() => {
          console.log('er', this); // aaa
          
          setTimeout(function () {
            console.log('er1', this); // window--
          }, 100)

          setTimeout(() => {
            console.log('er2', this); // aaa
          }, 100);
        }, 100);
      }
    }
    obj.aaa();