ES 6学習のキーワード

3397 ワード

前書き:ES 6とは?ECMAScript 6(ES 6と略称)はJavaScript言語の次世代規格で、2015年6月に正式に発表されました.ES 5より多くの特性が追加され、ES 6はES 5のシンタックスに変換される.オンラインES 6はES 5ツールに変換されます.このシリーズは随筆を勉強して、阮一峰先生の『ES 6標準入門』を参考にしました.
一、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キーワードはいつも関数のありかの現在の対象を指して、ES 6はまた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キーワードを見てみます.次の二つの例を見られます.

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である.

Javascriptデバッグ文