【JavaScript】関数とオブジェクト⑬ 関数コンストラクター

#はじめに

Udemyの【JS】ガチで学びたい人のためのJavaScriptメカニズムの講座の振り返りです。

前回の記事

#目的

• 関数とオブジェクトについての理解を深める

#本題
###1.関数コンストラクター

####使い方

//　new 演算子で定義する
//  基本的に大文字で始める（このFunctionの部分を関数コンストラクターという）
// 引数は文字列で定義
// 一番最後の引数は関数宣言でいうところのボディ部分
// 関数fn1に入れる
const fn1 = new Function("a", "b", "return a + b");
// 値を入れて結果を出力する
const result = fn1(1,2);
// 結果は3と出力される
console.log(result);

// 関数宣言に直すと以下の通りとなる
function fn2(a,b){
  return a + b ;
}
// ここで返ってくるのは関数コンストラクタから作成されたインスタンスになる
// instanceofで確認すると以下の通りとなる
console.log(fn2 instanceof Function)
// この結果がtrueで返ってくるので、fn2もFunctionコンストラクタから生成されたものであると確認できる

####例1

関数コンストラクターで関数を作成したときに注意すべきこと

new Functionで関数を生成する作業は内部的にグローバルスコープで行われるため、外部変数が引数内に含まれていた場合は、スクリプトスコープもしくはグローバルスコープに変数を探しに行くことになる。
どういうことか？？？？

// dという外部変数を定義
// 関数スコープ内にfn1を持ってきて、
// 変数dを定義
function fn(){
  let d = 1;
  const fn1 = new Function("a", "b", "return a + b" * d);
  // 普通ならここで1が入るが、エラーになってしまう
}

// 関数スコープ外にdを別に定義
let d = 0;
function fn(){
  let d = 1;
  const fn1 = new Function("a", "b", "return a * b * d");
  // fn()にfn1の値を戻す
  return fn1;
}
// fn()の値(fn1の値)をfに入れる
const f = fn();
const result = f(1,2);
// 実行結果は0となる
console.log(result);
// なぜそうなるのか
// a=1, b=2 d=0 が代入されている
// つまり、関数スコープ内の1ではなく、スクリプトスコープの0が使われている

####例2

コンストラクターで作ってきたのと少し違う

// 関数宣言と関数コンストラクターを定義
const obj = new function(){
  this.a = 0;
}
const fn3 = new Function("return;");
// それぞれfn3とobjをコンソールで確認してみると
console.log(obj, fn3);
// objは無名関数で書かれているので、オブジェクトリテラルで表示される
// fn3はnew Functionはあくまで関数を作成するためのものなのでfn3も関数となる

どのようにすれば関数からインスタンス化されたオブジェクトとなるのか

const obj = new function(){
  this.a = 0;
}
// 引数にそのままthis.a = 0;を代入する
const fn3 = new Function("this.a = 0");
// fn3を更にnew(インスタンス化)する
const obj3 = new fn3();
// {a: 0} {a: 0}と出力される
console.log(obj, obj3);

関数宣言が基本的に使われる

今日はここまで！

#参考にさせて頂いた記事

• 【JS】ガチで学びたい人のためのJavaScriptメカニズム