一、几种函数的定义方式及其使用

1.函数声明方式function字段关键字（命名函数）

//定义函数
function app() {
  console.log('Hello World')
}
//调用
app()

2.函数表达式（匿名函数）

//定义函数
const app = function() {
  console.log('Hello World')
}
//调用
app()
/***********************或者********************/
(function() {
  console.log('Hello World')
})()

3.new Function()

// 利用 new Function('参数1','参数2',...,'参数n','函数体');
//定义
var f = new Function('a','b','console.log(a+b)')
//调用
f(1,2)

4.箭头函数

1.不带参数

const app = () => {
  console.log('Hello World')
  console.log(123)
}
app()
//如果函数体内只有一行代码，可以简化成如下的形式
const app = () => console.log('Hello World')
app()

2.带多个参数

const app = (num1,num2) => {
  return num1 + num2
}
console.log(app(1,2))
//如果函数体内只有一行代码，可以简化成如下形式（有return语句，return可以省略）
const app = (num1,num2) => num1 + num2
console.log(app(1,2))

3.只带一个参数

const app = (param1) => {
  return 'Hello ,' + param1
}
console.log(app('zhouxingxing'))

//同样的，以上的函数因为只有一个参数，
//并且函数体内只有一行代码，所以可以可以简写成如下形式：
const app = param1 => 'Hello ,' + param1
console.log(app('zhouxingxing'))

//类似Vue里面的render函数的写法，大家就不陌生了吧
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})
//实际上可以写成：
new Vue({
  el: '#app',
  router,
  render: (h) => {
    return h(App)
  }
})
//也可以写成：
new Vue({
  el: '#app',
  router,
  render: function(h) {
    return h(App)
  }
})
//也可以写成：
new Vue({
  el: '#app',
  router,
  render(h) {
     return h(App)
  }
})

二、箭头函数中this作用域与普通函数this作用域对比

1.案例一代码

const obj = {
  name:'zhouxingxing',
  hello() {
    //setTimeout的回调函数采用普通函数的形式
    setTimeout(function () {
      console.log(this)  //window对象
    })
    //setTimeout的回调函数采用箭头函数的形式
    setTimeout(() => {
      console.log(this)  //obj对象
    })
  }
}
obj.hello()

2.案例一测试结果

image.png

3.案例二代码

const obj = {
  name:'zhouxingxing',
  hello() {
    //setTimeout的回调函数采用普通函数的形式
    setTimeout(function () {
      setTimeout(function () {
        console.log(this) // window对象
      })
      setTimeout(() => {
        console.log(this) // window对象
      })
    })
    //setTimeout的回调函数采用箭头函数的形式
    setTimeout(() => {
      setTimeout(function () {
        console.log(this) // window对象
      })
      setTimeout(() => {
        console.log(this) // obj对象
      })
    })
  }
}
obj.hello()

4.案例二测试结果

image.png
5.总结结论
结论： 箭头函数中的this引用的是最近作用域中的this，也就是说箭头函数中如果有this的定义，这个时候它会向外层作用域中，一层一层查找this，直到找到this的定义。

三、备注

1.本文总结的来源：https://www.bilibili.com/video/BV15741177Eh?p=99，有兴趣的朋友可以看一下。