関数の定義
- 名前付き関数
function 関数名{
return
}
- 無名関数
let a = function(x, y){ return x+y }
名前付き関数、関数名が無名であることを削除、関数式とも呼ばれます。
- 矢印関数
let f1 = x => x*x
let f2 = (x,y) => x+y // 括弧は省略できない。
let f3 = (x,y) => {return x+y} // 中括弧は省略できない。
let f4 = (x,y) => ({name:x, age: y})
オブジェクトを直接返すとエラーになるので、括弧を追加する必要があります。
- コンストラクタ
let f = new Function('x', 'y', 'return x+y')
すべての関数は、オブジェクト、配列、関数を含む関数から構成されます。
関数そのものと関数呼び出し
- 関数自体 fn
let fn = () => console.log('hi')
fn
fnが
- 関数呼び出しfn()
let fn = () => console.log('hi')
fn()
は 'hi' を出力します。
関数の要素
呼び出しのタイミング
- JS関数呼び出しのタイミング
let a = 1
function fn(){
console.log(a)
}
が出力されます：呼び出しコードがないのでわかりません
let a = 1
function fn(){
console.log(a)
}
a = 2
fn()
印刷されます: 2
スコープ
- グローバル変数とローカル変数
トップレベルのスコープで宣言された変数はグローバル、ウィンドウのプロパティはグローバル、それ以外はすべてローカルです。
function fn(){
let a = 1
}
fn()
console.log(a) // a は存在しない。
- スコープルール
複数のスコープが同じ名前の変数を持つ場合、aの宣言は最も近いスコープを検索します。aを見つけるプロセスは関数の実行に依存しませんが、aの値は関数の実行に依存します。
function f1(){
let a = 1
function f2(){
let a = 2
console.log(a)
}
console.log(a)
a = 3
f2()
}
f1() // 1,2
クロージャ
関数が外部変数を使用する場合、関数とその変数を合わせてクロージャと呼びます。
形式のパラメータ
- 形式的なパラメータとは、実体のないパラメータを意味します。
function add(x, y){
return x+y
}
// ここで、xとyは実際の引数ではないので、正式なパラメータである。
add(1,2)
// addが呼ばれたとき、1と2は実際の引数であり、xとyに代入される。
// 上記のコードは次のコードとほぼ等価である。
function add(){
var x = arguments[0]
var y = arguments[1]
return x+y
}
戻り値
- すべての関数には戻り値があり、関数のみが戻り値を持ち、関数の実行が終了したときに返されます。
function hi(){ console.log('hi') }
hi()
戻り値がないので、戻り値は未定義である。
function hi(){ return console.log('hi') }
hi()
戻り値はconsole.log('hi')の値、つまり未定義です。
コールスタック
- コールスタック
JSエンジンは関数を呼び出す前に、関数がある環境をコールスタックと呼ばれる配列にプッシュする必要があります。関数の実行が終わると、環境はポップアップされ、その後に続くコードを実行するために環境が返されます。
- コールスタックの長さは？
function computeMaxCallStackSize() {
try {
return 1 + computeMaxCallStackSize();
} catch (e) {
// エラー：スタックオーバーフロー
return 1;
}
}
Chrome 12578; Firefox 26773; Node 52136
- スタックバースト
コールスタックに多くのフレームが押し込まれると、プログラムはクラッシュします。
関数の拡張
- function fn(){} 名前付き関数がどこで宣言されても、最初の行まで実行されます。
- let fn = function(){}これは代入で、右側の匿名関数宣言は
argumentsと this。
- 矢印関数を除き、すべての関数には引数と thisがあります。
- 引数を渡すためにfnを呼び出します
- fn(1,2,3) 引数は[1,2,3]
- 現在、thisと引数をfn.call(xxx, 1,2,3)で渡すことができ、xxxは自動的にオブジェクトに変換されます。
- thisは隠しパラメータで、引数は通常のパラメータです。
- this "でオブジェクトへの参照を取得します。
let person = {
name: 'frank',
sayHi(this){
console.log(`こんにちは、私の名前は` + this.name)
}
}
person.sayHi()
person.sayHi(person)
と人を thisに渡す。
こうすることで、どの関数も thisを使って未知のオブジェクトへの参照を得ることができる。
- thisがお勧めです。
fn(1,2) // はfnと等価である。.call(undefined, 1, 2)
obj.child.fn(1) // はobjと等価である。.child.fn.call(obj.child, 1)
矢印関数
内側の "これ "は外側の "これ"。
console.log(this) // window
let fn = () => console.log(this)
fn() // window
fn.call({name:'frank'}) // window
即時関数
目的：ローカル変数の取得
方法：無名関数の前に演算子を追加します！, ~, (), +, - が使えますが、！
