定义

// 无参数定义
const fn = () => {
  return '渡远荆门外';
};
console.log(fn()); // 渡远荆门外

// 一个参数定义
const fn1 = str => {
  return str;
};
console.log(fn1('渡远荆门外')); // 渡远荆门外

// 多个参数
const fn2 = (str1, str2, str3) => {
  return `${str1}
${str2}
${str3}`;
}
console.log(fn2('渡远荆门外','来从楚国游','山随平野尽'));
// 渡远荆门外
// 来从楚国游
// 山随平野尽

函数内部无逻辑,直接返回的，省略大括号

const fn = () => '渡远荆门外'; // 表示直接返回内容
console.log(fn()); // 渡远荆门外

const fn1 = str => str;
console.log(fn1('渡远荆门外')); // 渡远荆门外

const fn3 = str => console.log(str); // 表示 直接打印参数
fn3('山随平野尽'); // 山随平野尽

const fn4 = () => fn1('月涌大荒流'); // 表示 返回fn1的执行结果
fn4(); // 月涌大荒流

const fn2 = (str1, str2, str3) => `${str1}
${str2}
${str3}`;
console.log(fn2('渡远荆门外','来从楚国游','山随平野尽'));
// 渡远荆门外
// 来从楚国游
// 山随平野尽

关于this指向

• funtion 定义函数时this指向是运行时决定的；箭头函数的指向时编译时决定的

<template>
	<div class="container">
    <button @click="handleClick">
      {{btnText}}
  	</button>
  </div>
</template>
<script>
import { MessageBox } from 'element-ui';
export default {
  data() {
    return {
      btnText: '提交',
    };
  },
  methods: {
    handleClick() {
      MessageBox({
        title: '弹窗标题',
        message: '弹窗消息祝内容',
        type: 'success',
        callback: (action, instance) => {
          this.btnText = '提交中'; // 箭头函数的this是继承下来的指向的是组件实例
        }
      })
    },
    handleClickFn() {
      const self = this;
    	MessageBox({
        title: '弹窗标题',
        message: '弹窗消息祝内容',
        type: 'success',
        callback: function(action, instance) {
          self.btnText = '提交中'; // 如果使用的是function定义函数，必须提前定义this
        }
      })
  	}
  },
}
</script>

箭头函数的解构

const params = {
  name: '李白',
  isDie: true,
}
const getName = params => params;
const friends = [params, '小白', getName];

const fn = ([{name, isDie},,fn],fn2) => {
  console.log(name,fn(name), fn2(isDie))
}
fn(friends,getName); // 李白 李白 true

对象属性是函数

const people = {
  name: '李白',
  getAge() {
    console.log(this.name); // 李白
    return 18;
  }
}
// 这里getAge用了简写 实质是function定义的，并不是箭头函数；在这里使用this指向的是对这个对象，如果用的是箭头函数定义的，指向取决于对象所处环境，this指向就是上下文

// 上面代码完全等于以下代码
const people = {
  name: '李白',
  getAge: function () {
    console.log(this.name); // 李白
    return 18;
  }
}

// 如果是用箭头函数定义的
const people = {
  name: '李白',
  getAge: () => {
    console.log(this.name); // 这里的this就是看你在哪里调用的 在全局就指向window。
    return 18;
  }
}