ES6學習之關鍵字

打傘的魚l發表於2018-12-22

前言：什麼是ES6？ECMAScript 6（簡稱ES6）是JavaScript語言的下一代標準，已經在2015年6月正式釋出了。其中相比較於ES5新增了諸多的特性，並且ES6可轉換為ES5的語法。->線上ES6轉換為ES5工具。
本系列學習隨筆參考了阮一峰老師的《ES6標準入門》。

一、let關鍵字

1、解決變數提升現象

我們在js中定義變數時，用var宣告會出現這種情況：

console.log(a); //不會報錯，輸出為undefined
var a=1;

這就是js的變數提升現象，當瀏覽器在解析函式時，會將var 宣告的變數宣告到函式的最前端，導致變數在宣告之前使用不會報錯，此時let關鍵字就解決了這個問題。let的作用域只在當前的程式碼塊起作用。

console.log(a); //ReferenceError:a is not defined
let a=1;

2、不同程式碼塊互不影響

由於let關鍵字作用只在當前程式碼塊中起作用，所以不會受外部影響。

function n() {
  let a = 1;
  if (true) {
    let a = 5;
  }
  console.log(a); // 輸出1
};

3、同一程式碼塊不能重複定義

{
    var a=1;
    var a=2;//無報錯
}
{
	let a=1;
	let a=2;//Uncaught SyntaxError: Identifier `a` has already been declared
}

二、const關鍵字

1、const宣告一個只讀的常量。一旦宣告，常量的值就不能改變。

const PI = 3.1415;
PI = 3;//Uncaught TypeError: Assignment to constant variable.

其本質是物件所儲存的記憶體地址不可變。

const PI={}  
PI.num=3.14159;//不會報錯  
PI={num=3.14159};//VM1187:1 Uncaught SyntaxError: Identifier `PI` has already been declared

2、const宣告的常量必須宣告時就賦值；

const PI; // SyntaxError: Missing initializer in const declaration

3、const宣告的常量跟let的作用域一樣。

if (true) {
  const PI = 3.14159;
}
console.log(PI); // Uncaught ReferenceError: PI is not defined

三、super 關鍵字

我們都知道，this關鍵字總是指向函式所在的當前物件，ES6又新增super關鍵字，指向當前物件的原型物件。他有兩種使用方式：

1、當做函式使用

class parent {
    constructor() {
        console.log(11)
    }
}
class child extends parent{
    constructor() {
        super();
    }
}
let c = new child();//列印11

當做函式使用時，super()呼叫會生成一個空物件，作為context來呼叫父類的constructor，返回this物件，作為子類constructor的context繼續呼叫建構函式。

2、當做物件使用

const proto = {
  foo: `hello`
};
const obj = {
  foo: `world`,
  find() {
    return super.foo;
  }
};
Object.setPrototypeOf(obj, proto);
obj.find() // "hello"

上面程式碼中，物件obj.find()方法之中，通過super.foo引用了原型物件proto的foo屬性。

3、注意區分super與this

說到super與this的區別，我們就要先來看一下this關鍵字：
this關鍵字最終指向的是呼叫它的物件。我們可以看下面兩個例子；

function GetThis(){
	console.log(this);
};
GetThis();//列印出window物件。

為什麼會這樣呢。其實最後的呼叫我們也可以寫成window.GetThis();呼叫他的就是window物件。
如果不信的話我們可以再舉個例子；

var getThis={ 
	user:`me`,
	fn:function(){
		console.log(this);
	}
}
getThis.fn();//列印的就時getThis物件；

接下來我們再看一個this與super結合的例子就能理解了：

const proto = {
  x: `hello`,
  foo() {
    console.log(this.x);
  },
};
const obj = {
  x: `world`,
  foo() {
    super.foo();
  }
}
Object.setPrototypeOf(obj, proto);
obj.foo()// "world"

上面程式碼中，super.foo指向原型物件proto的foo方法，但是繫結的this卻還是當前物件obj，因此輸出的就是world。

相關文章