es6的基本用法

Bound_w發表於2018-11-26

1.es6中的let和const的區別

(1) let

　　在區域性作用域有效

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

註釋:
上面程式碼中，計數器i只在for迴圈體內有效，在迴圈體外引用就會報錯。

下面的程式碼如果使用var，最後輸出的是10。
上面程式碼中，變數i是var命令宣告的，在全域性範圍內都有效，所以全域性只有一個變數i。每一次迴圈，變數i的值都會發生改變，而迴圈內被賦給陣列a的函式內部的console.log(i)，裡面的i指向的就是全域性的i。也就是說，所有陣列a的成員裡面的i，指向的都是同一個i，導致執行時輸出的是最後一輪的i的值，也就是 10。

如果使用let，宣告的變數僅在塊級作用域內有效，最後輸出的是 6。

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

上面程式碼中，變數i是let宣告的，當前的i只在本輪迴圈有效，所以每一次迴圈的i其實都是一個新的變數，所以最後輸出的是6。你可能會問，如果每一輪迴圈的變數i都是重新宣告的，那它怎麼知道上一輪迴圈的值，從而計算出本輪迴圈的值？這是因為 JavaScript 引擎內部會記住上一輪迴圈的值，初始化本輪的變數i時，就在上一輪迴圈的基礎上進行計算。

另外，for迴圈還有一個特別之處，就是設定迴圈變數的那部分是一個父作用域，而迴圈體內部是一個單獨的子作用域。

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc
上面程式碼正確執行，輸出了 3 次abc。這表明函式內部的變數i與迴圈變數i不在同一個作用域，有各自單獨的作用域。
let在區域性作用域有效

　　不會存在變數提升

var命令會發生”變數提升“現象，即變數可以在宣告之前使用，值為undefined。這種現象多多少少是有些奇怪的，按照一般的邏輯，變數應該在宣告語句之後才可以使用。

為了糾正這種現象，let命令改變了語法行為，它所宣告的變數一定要在宣告後使用，否則報錯。

// var 的情況
console.log(foo); // 輸出undefined
var foo = 2;

// let 的情況
console.log(bar); // 報錯ReferenceError
let bar = 2;

上面程式碼中，變數foo用var命令宣告，會發生變數提升，即指令碼開始執行時，變數foo已經存在了，但是沒有值，所以會輸出undefined。變數bar用let命令宣告，不會發生變數提升。這表示在宣告它之前，變數bar是不存在的，這時如果用到它，就會丟擲一個錯誤。
不會存在變數提升

　　變數不能重複宣告

let不允許在相同作用域內，重複宣告同一個變數。

// 報錯
function func() {
  let a = 10;
  var a = 1;
}

// 報錯
function func() {
  let a = 10;
  let a = 1;
}

因此，不能在函式內部重新宣告引數。

function func(arg) {
  let arg; // 報錯
}

function func(arg) {
  {
    let arg; // 不報錯
  }
}
變數不能重複的宣告

(2) const

　　區域性作用域

　　不會存在變數的提升

　　變數不能重複宣告     只宣告常量,不可變的量

(3) 模板字串

table鍵上的反引號$(變數名)來實現字串的拼接

egg:

　　let name = "張三";

　　let str = `我是${name}`

2.es6的箭頭函式      this的指向發生了改變

方式一:
let  add = (x) =>{
  return x           
}
  console.log(add(20))
方式二:
let  add2 =x=>:
    console.log(add2(20))

 

3.es6的物件

let person ={
        name:"張三",
        age:30,
        fav:function () {
            console.log(this.name)//匿名函式this指向當前物件
        }
    }
    person.fav()


    let person={
        name:'張三',
        age:20,
        fav:() => {
            console.log(this),//指向定義 person的父類(上下文)
            console.log(this.name)
        }
    }



物件的單體模式
let person={
　　name='張三',
　　fav (){
　　console.log(this.name)   //指的當前的物件
}
}

person.fav()


//張三


 

4.es6的類

class person{
        constructor(name='alex',age=18){
            this.name=name;
            this.age=age;
        }
        showname(){
            console.log(this.name)
        }
        showage(){
            console.log(this.age)
        }

    }
    let v=new person();
    v.showname()
    v.showage()

 補充:es5中的函式this指向了使用該函式的物件

var person = {
    name:'alex',
    fav:function(){
        console.log(this);//person
    }
}
person.fav()

-箭頭函式

var person = {
    name:'alex',
    fav:()=>{
        console.log(this);//window
    },
    showName(){
        console.log(this);//person
    }
}
person.fav()

有關this指向問題的總結:

　　--this的指向和vm例項沒有任何的關係,而是與箭頭函式和普通函式的區別

　　1.es5的普通函式,this指向是指向了呼叫者,比如vue例項的方法（在methods中宣告瞭一個方法）是由vue例項vm呼叫的，所以this指向vm。

　　2、箭頭函式的this指向它的呼叫者所在的上下文，也就是vm例項所在的上下文（定義vm的父類），即window.

相關文章