vue之箭头函数

合集 - 前端_vue(9)
1.前端学习之vue简介2.vue了解与初步接触/使用3.Vue之指令
4.vue之箭头函数
5.vue之修饰符6.vue与后端的数据交互7.vue之计算属性与监听属性8.vue之生命周期钩子9.vue工程化创建项目
收起

箭头函数定义

箭头函数（将原函数的“function”关键字和函数名都删掉，并使用“=>”连接参数列表和函数体。）：
const ddd=()=>{}：（）参数；{}方法体，可以直接是返回的表达式

1、箭头函数的使用

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

}

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

    },
    ccc() {

    }
  }
//3.es6中的箭头函数
//   const ddd=(参数列表)=>{}
  const ddd=()=>{}//无参写法
</script>

2、箭头函数参数和返回值

当函数参数只有一个，括号可以省略；但是没有参数时，括号不可以省略。

// 无参
var fn1 = function() {}
var fn1 = () => {}
 
// 可变参数
var fn4 = function(a, b, ...args) {}
var fn4 = (a, b, ...args) => {}

<script>
  //1.参数问题：
  //1.1放入两个参数
  const sum =(num1,num2)=>{
    return num1+num2
  }

//  1.2放入一个参数,小括号省略
  const power= num=>{
    return num*num
  }


//  2.
//  2.1函数代码块中有多行代码时
  const test=()=>{
  //  1.打印一个hello Word
    console.log("hello world");

  //  2.打印hell vue
    console.log("hello vue");
  }

//  2.2函数代码块中只有一行代码时,有特殊写法
//   const mul=(num1,num2)=>{
  //     return num1*num2
  //   }
  const mul=(num1,num2)=> num1*num2
  console.log(mul(20, 30));

//  无返回值
  const demo=()=>console.log("hello world");
  demo()
</script>


注意：
· 对于箭头函数的返回值，如果是return一个对象的话，需要特别注意：如果是单表达式要返回自定义对象时，一定要加上括号，不加括号的话会报错，因为和函数体的{ … }有语法冲突。

x => {key: x} // 报错
x => ({key: x}) // 正确
//注意，用小括号包含大括号则是对象的定义，而非函数主体


· 箭头函数看上去像是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。（词法作用域就是定义在词法阶段的作用域。换句话说，词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的，因此当词法分析器处理代码时会保持作用域不变 。）简单来说，箭头函数中的this是向外层作用域中一层层查找this的指向的，直到查到有this的定义为止。

3、箭头函数中的this

在讲箭头函数中的this的时候先来看看普通函数的this是指向什么的：
普通函数的this在声明时指向window，在调用时指向调用它的对象，如果直接调用，也指向window

function b() {
	function a(){ 
		console.log(this) 
	}
	let c = function() {
		a()
	}
	let obj2 = {a,c}
	obj2.a()//打印出obj2,打印出调用时的对象obj2
	obj2.c()//打印出window,打印出直接调用时的对象window
}
let obj = {b}
obj.b()//使函数b内上下文this为obj


箭头函数的this在声明时指向window，在调用时指向声明时所在的上下文this。也就是说箭头函数中的this是向外层作用域中一层层查找this，查到有this的定义为止

<script>
  //什么时候使用箭头函数
  // setTimeout(function () {
  //    console.log(this)
  // },1000)
  // setTimeout(()=>{
  //   console.log(this)
  // },1000)


  //结论：箭头函数中的this是如何查找的
  //答案：向外层作用域中一层层查找this，查到有this的定义为止
  const obj={
    aaa() {
      setTimeout(function () {
        console.log(this)//window
      })
      setTimeout(()=>{
        console.log(this)//obj
      })
    }
  }

  obj.aaa()
</script>

4、关于call、apply、bind

对于普通函数来说，这三个方法都适用：
let obj = {}
let a = function() { console.log(this) }
a.call(obj)//obj
a.apply(obj)//obj
a = a.bind(obj)
a()//obj


而对于箭头函数来说，因为箭头函数的特殊性三个方法都不适用：
let obj = {}
let a = () => { console.log(this) }
a.call(obj)//window
a.apply(obj)//window
a.bind(obj)
a()//window

5、注意事项

不能用作构造函数
不能使用arguments
不能作为对象的方法调用，因为还是指向上下文，而不是调用的对象
如果需要this操作，不能用作addEventListener里传的参数

6、结合箭头函数写过滤案例

//  箭头函数

    // 1 匿名函数
    // var f=function (name) {
    //     console.log(name)
    // }
    // f('quan')

    // 2 箭头函数--》无参数无返回值
    // var f1 = () => {
    //     console.log('我是箭头函数')
    // }
    // f1()

    // 3 箭头函数--》有多个参数无返回值
    // var f2 = (name,age) => {
    //     console.log(name,age)
    // }
    // f2()

    // 3 箭头函数--》有一个参数无返回值
    // var f3 = name => {
    //     console.log(name)
    // }
    // f3('pengyuyan')

    // 4 箭头函数：有一个参数，一个返回值
    // var f4 = name => {
    //     return name+'_nb'
    // }
    // f4('pengyuyan')

    //5 简写成
    var f5 = name => name+'_nb'
    var res=f5('pengyuyan')
    console.log(res)

    // 6 箭头函数内部，没有自己this，箭头函数内部用this---》就是上面作用域的this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>过滤案例</h1>
    <input type="text" v-model="myText" @input="handleInput">
    <hr>
    <ul>
        <li v-for="item in newdataList">{{item}}</li>
    </ul>

</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            myText: '',
            dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'atome', 'atomem'],
            newdataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'atome', 'atomem'],
        },
        methods: {
            handleInput() {
                this.newdataList = this.dataList.filter(item=> item.indexOf(this.myText) >= 0)
            },
        }
    })
</script>
</html>
posted @   Unfool  阅读(471)  评论(0)  编辑  收藏  举报
相关博文：
·  Vue之指令
·  vue之修饰符
·  vue中的普通函数与箭头函数以及this关键字
·  箭头函数详解
·  ES6 箭头函数（=>）
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
点击右上角即可分享
微信分享提示
AI IDE Trae