1. ES6的物件屬性增強型寫法

ES6以前定義一個物件

const name = "zzz";
const age = 18;
const user = {
  name:name,
  age:age
}
console.log(user);

ES6寫法

const name = "zzz";
const age = 18;
const user = {
	name,age
}
console.log(user);

2 ES6物件的函式增強型寫法

ES6之前物件內定義函式

const obj = {
  run:function(){
     console.log("奔跑");
  }
}
 

ES6寫法

const obj = {
  run(){
     console.log("奔跑");
  }
}

3. 箭頭函式

傳統定義函式的方式

  const aaa = function (param) {
      
  }

物件字面量中定義函式

const obj = {
    bbb (param) {  },
}

ES6中的箭頭函式

//const ccc = (引數列表) => {}
  const ccc = () => {}

4. 箭頭函式的引數和返回值

4.1 引數問題

1.放入兩個引數

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

2.放入一個引數,()可以省略

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

4.2 函式內部

1.函式中程式碼塊中有多行程式碼

const test = () =>{
  console.log("hello zzz")
  console.log("hello vue")
}

2.函式程式碼塊中只有一行程式碼，可以省略return

// const mul = (num1,num2) => {
//   return num1 * num2
// }
const mul = (num1,num2) => num1* num2
// const log = () => {
//   console.log("log")
// }
const log = () => console.log("log")
 

4.3 箭頭函式的this使用

什麼時候使用箭頭函式

setTimeout(function () {
	console.log(this)
} , 1000);
setTimeout(() => {
	console.log(this)//這裡this找的是window的this
}, 1000);

結論：箭頭函式沒有this，這裡this引用的是最近作用域（aaa函式裡的this）的this。

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

上述中第一個是window物件的this，第二個箭頭函式的this是obj的。

    const obj = {
      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
          })
        })
      }
    }
    obj.aaa()