JavaScriptについて、備忘録としてまとめる。
関数の書き方
function命令で定義
function 関数名(引数, ...){
...任意の処理...
return 戻り値;
}
Functionコンストラクター経由で定義
- 関数が受け取る仮引数を順に並べ、最後に関数の本体を指定する。
- JavaScriptの関数は原則として、function命令, または関数リテラル/アロー関数で定義する
var 変数名 = new Function(引数,...,関数本体);
例
var getArea = new Function('base', 'height', 'base' * 'height');
関数リテラル表現で定義する
- JavaScriptにおいて関数はデータ型の一種
- リテラルとして表現でき、関数リテラルを変数に代入したり、ある関数の引数として渡したり、戻り値として関数を返すことが可能
var 変数名 = function(変数、 変数) {...処理...};
例
var getArea = function(base, height) { base * height}
- ES2015でが、オブジェクトリテラルの構文を改善し、プロパティ/メソッドをよりシンプルに表現できる
名前(引数) {...処理...}
例
run() {
return 'tokotoko'
}
＊function命令と関数リテラルの違い
- function命令 : 関数getAreaを直接定義
- 関数リテラル : 「function(base,height {...}」と名前のない関数を定義し、変数getAreaに格納している
アロー関数で定義する
(引数...) => {...関数の本体...}
例
let getArea = (base,height)=> { return base * height }
ブロックを表す{...}は省略可能
let getArea = (base,height) => base * height;
引数が１個の場合には、引数をくくる()も省略可能
let price = cost => cost * 1.08;
JavaScriptにおけるオブジェクト指向
最もシンプルな「クラス」
- JavaScriptでは関数(Functionオブジェクト)にクラスとしての役割を与えている。
var Member = function(){};
var mem = new Member();
コンストラクターで初期化する
- コンストラクターとはインスタンスを生成する際に、オブジェクトを初期化する処理を記述するための特殊なメソッド
- thisキーワードは、コンストラクターによって生成されるインスタンスを表す
-
this.プロパティ名 = 値;でプロパティを指定でき、文字列や整数、日付を指定できるだけでなく、関数オフジェクトも指定できる。
var Member = function(firstName,lastName) {
this.firstName = firstName;
this.lastName = lastName;
this.getName = function() {
return this.lastName + '' + this.firstName;
}
};
- クラスという抽象的な設計図が存在しないのがJavaScriptの世界
- JavaScriptの世界にあるのは、あくまで実体化されたオブジェクトだけで、新しいオブジェクトを生成するにも（クラスではなく）オブジェクトがもとになっている。
オブジェクトの継承
アクセサーメソッド
- プロパティそのものはクラス外部からアクセスできなようにして、代わりにプロパティにアクセスするためのメソッド
get/set
get: function() {
return プライベート変数
},
set: function(value) {
プライベート変数 = value
クラス定義
クラスの定義
class クラス名 {
...コンストラクターの定義...
...プロパティの定義...
...メソッドの定義...
}
クラスのコンストラクター
- インスタンスを生成する際に引数として文字列や数値を受け取るために用意する。
メソッド名(引数...) {
...メソッドの本体...
}
例
constructor(email, password) {
this.email = email;
this.password = password
}
既存のクラスを継承
- extendsの使い方
class Human {
get walk()
return 'tokotoko'
}
}
class Man extends Human {
run() {
return 'dodododo'
}
}
let keigo = new Man
console.log(keigo.walk()); //結果:tokotoko
console.log(keigo.run()); //結果:dododo
モジュールの基本
- モジュールは1つのファイルとして定義するのが基本
- モジュール内はデフォルトでは非公開.
- exportで指定する必要がある。
lib/Utill.js
export class Human { ...中略... }
export class Cat { ...中略... }
以下のようのインポート
main.js
import { Human, Cat } from './lib/Util'
import命令記法
import { name, ...} from module
name:インポートする要素
module:モジュール(拡張子を抜いたパス)
- アスタリスクを（*）でモジュール内での全ての要素をインポートできる
import * as animals form '.lib/Util'
- モジュールに含まれる要素が1つだけであれば、デフォルトのエクスポートを宣言できる
./lib/Area.js
export default class {
static getArea(base,height) {
return base*height
};
}
参考文献
JavaScript本格入門