Javascript ES5,6 の新機能(letとconst,アロー関数,クラスなど)
公開日:
:
javascript
ESとはECMASCriptの略で、ECMA という国際的な標準化機関が定めた JavaScript の標準規格のこと。ECMASCript5は2009年12月、ECMASCript6(正式名ES2015)は2015年に標準化された。
今回はそこから分かりにくい変数定数宣言、アロー関数、クラスなどをメモっておこうと思います。
let と const
Javascript の変数宣言は var のみだったが、ES6 から let と const が採用された。
var、let、const の使い分け
- var:変数の使用開始を明示的に宣言
- let:ブロックの中だけで有効な局所変数宣言
- const:定数宣言
var、let、const 再宣言と再代入
var a = 1; let b = 1; const c = 1; var a = 2; // 再宣言OK let b = 2; // 再宣言エラー const c = 2; // 再宣言エラー a = 3; // 再代入OK b = 3; // 再代入OK c = 3; // 再代入エラー
var、let、const ブロックスコープ
let と const は ブロック{}内のみで有効になる。
{ var a = 1; let b = 2; const c = 3; } console.log(a); // 1 (出来る) console.log(b); // undefined (出来ない) console.log(c); // undefined (出来ない)
関数
デフォルト引数
引数を省略した場合のデフォルト値を指定できる。
function f(a, b = 2) { return a + b; } console.log(f(1));//デフォルト値が2なので3が出力される
可変長引数
個数が変動する引数。関数に渡された全ての引数を arguments で取得できる。
var f = function(){ for(let i = 0; i < arguments.length; ++i){ console.log(arguments[i] * 2); } }; f(0, 1, 2, 3);//0246
アロー関数
アロー関数は関数をより短く記述できる。
function () {} //通常関数 ↓ 省略 () => {} //アロー関数
// 通常の無名関数 var f = function (a, b) { return a + b; }; ↓ 省略 // アロー関数にできる const f = (a, b) => { return a + b; }; ↓ 省略 // 単一式の場合は{}やreturn を省略できる const f = (a, b) => a + b; ↓ // {}やreturn を省略してオブジェクトを返したい場合はカッコ()で囲む const f = (a, b) => ({ sum: a + b });
// 通常の無名関数 function (a) { return a + 2; }; ↓ 省略 // アロー関数 引数が1個の場合は ( ) を省略可 a => { return a + 2; }
// 通常の無名関数 function () { return 10; }; ↓ 省略 // アロー関数 引数が0個の場合は ( ) が必要 () => { return 10; }
※ 通常の関数では this の値は呼び出される時に決まるが、アロー関数では関数が宣言された時に確定するので注意。
クラス
クラスの定義
定義の方法は「クラス宣言文」と「クラス式」の2種類あります。
class クラス名 { }; //クラス宣言文 const 変数名 = class クラス名 { }; //クラス式 const 変数名 = class { }; //クラス式でクラス名の省略形
クラスの基本例
class Myclass { constructor(a, b) { //初期化関数コンストラクター this.a = a; this.b = b; } } let obj = new Myclass(1, 2); console.log(obj.a);// 1
コンストラクタ(constructor)はオブジェクトを生成する際に最初に呼ばれるメソッド。
class 自身 は インスタンスオブジェクト(this)に代入される。
メソッド
class Myclass { f1(a) { this.a = a; } f2() { return this.a; } } var obj = new Myclass(); obj.f1("test"); console.log(obj.f2());//test
スタティックメソッド(static)
スタティック関数は、new でオブジェクトを生成しなくても呼び出すことができるメソッドです。
class Myclass { static f1() { console.log("test"); } } Myclass.f1(); // test
ゲッター(getter)とセッター(setter)
ゲッターはプロパティとしてアクセスされた場合に実行される。
セッターはプロパティに値を代入された際に実行される。
class Myclass { get f1() { return this._a; } set f2(a) { this._a = a; } } var obj = new Myclass(); console.log(obj.a); // プロパティアクセスなので getter メソッドが呼ばれる obj.a = "test"; // 代入なので setter メソッドが呼ばれる
外から直接読み書きしてほしくないプライベート的なプロパティを _(アンダーバー)を付けた書き方は、見やすくするだけのよく使われるルールで特に特性はない。
プロトタイプ(prototype)
定義済のクラスに変数やメソッドを追加することができる。
class Myclass { } Myclass.prototype.f1 = "test1"; Myclass.prototype.f2 = function() { console.log("test2"); } var obj = new Myclass.(); console.log(obj.f1); // test1 obj.f2(); // test2
継承(extends)
class Myclass { f1() { console.log("test1"); } } class Exclass extends Myclass { f2() { console.log("test2"); } } var obj = new Exclass(); obj.f1(); // test1 obj.f2(); // test2
参考サイト
関連記事
-
Javascript ノードの取得や挿入
ノードの取得 ノードの取得(ダイレクトアクセス) document.getElementById
-
画像の拡大縮小を javascript の touch イベントでやってみる
画像の幅と高さを取得 まずは、neko.jpg という画像を用意して、幅と高さを取得します。
-
Javascript Strictモード “use strict”;
Strict モード(厳格モード) Strict モードとは、ECMAScript5(2009年1
-
javascriptで複数同じ名前のformの値を取得するとエラー Cannot read property ‘value’ of undefined
Javascript で value の値を取得する このようなHTMLフォームがあった場合、
-
WordPress エラー:Failed to load plugin: table from url https://cdn.tinymce.com/4/plugins/table/plugin.min.js
WordPress エラーの状態 WordPress 管理画面のテキスト入力欄で(ビジュアルタブの
-
写真をアップロードして切り抜きが出来るcropboxにタッチイベントを付けてみる
Git Hub の cropbox 写真をアップロードしてカット出来るjQueryのプラグイン c
-
canvas タグでお絵描き(レスポンシブ)
簡単なメモ張みたいなものが欲しいので作ってみました。 canvas のレスポンシブが少しひっかかっ
-
WordPress で VR させて、360°のパノラマ画像を表示する
WordPress.com内ショートコードで VR させる WordPress.com内で、VR(
-
Three.jsで360°パノラマ画像を VR させる
Three.jsで360°パノラマ画像を VR させる VRを作るのに前回のプラグイン「WP-VR
-
Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応
Javascript でマウスドラッグのテストをしていきます。 分かりやすいように、ボールを投げる