前言:什麼是ES6?ECMAScript 6(簡稱ES6)是JavaScript語言的下一代標準,已經在2015年6月正式發佈了。其中相比較於ES5新增了諸多的特性,並且ES6可轉換為ES5的語法。->線上ES6轉換為ES5工具。 本系列學習隨筆參考了阮一峰老師的《ES6標準入門》。 一、let關鍵 ...
前言:什麼是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。