読者です 読者をやめる 読者になる 読者になる

tweeeetyのぶろぐ的めも

アウトプットが少なかったダメな自分をアウトプット<br>\(^o^)/

javascriptのconstructorについてメモ

javascript結構好きなんですが、constructorについて理解が浅いなーと思ったので理解を深めるために自分用メモ

れしぴ

1.javascriptコンストラクターとは
2.ネイティブオブジェクトの種類
3.new演算子で生成したネイティブオブジェクト.constructorを見てみる
4.リテラル系とオブジェクト系のコンストラクタ比較
5.ネイティブオブジェクトのnew無しはなに?
6.new無しはリテラル系とおなじ?
7.オブジェクト.constructorはコンストラクタ関数と同値?
8.Functionの名前つきコンストラクタを見てみる

1.javascriptコンストラクターとは

参考にさせて頂いた一文に自分なりの言葉をアレンジしての引用です

コンストラクタは、
new演算子を伴うことで、オブジェクトを作成し初期化する特別な役割を果たす関数オブジェクト (Function オブジェクト)

※あくまでも自分用なのであしからず
→引用もとはこちら

2.ネイティブオブジェクトの種類

こちらもネットや書籍のまんまです。こーらしいです以上って感じということで列挙のみ

Object
Function
Array
String
Number
Boolean
Date
RegExp
Error

3.new演算子で生成したネイティブオブジェクト.constructorを見てみる

ネイティブjavascriptオブジェクトのconstructorを見てみるテスト

  • ソース
// number
var num = new Number(10);
console.log(num.constructor);
console.log(typeof num);
console.log(typeof num.constructor);

// string
var str = new String('piyo');
console.log(str.constructor);
console.log(typeof str);
console.log(typeof str.constructor);
  • 出力

function Number() { [native code] }
object
function

function String() { [native code] }
object
function

ふむふむ。

4.リテラル系とオブジェクト系のコンストラクタ比較

リテラル系ってどーなんだろーと思ってその比較です

  • ソース
// number
var numObj = new Number(10);
var numLit = 10;
console.log(numObj.constructor);
console.log(numLit.constructor);

// string
var strObj = new String('piyo');
var strLit = 'piyo';
console.log(strObj.constructor);
console.log(strLit.constructor);
  • 出力

function Number() { [native code] }
function Number() { [native code] }
function String() { [native code] }
function String() { [native code] }

ふむふむ、リテラル系も同じなんだー、っていうよりconstructorがあるんですねw

5.ネイティブオブジェクトのnew無しはなに?

こちらも論より証拠ってことでとりあえずconsoleってみる

  • ソース
// number
var num = Number(10);
console.log(num.constructor);
console.log(typeof num);
console.log(typeof num.constructor);

// string
var str = String('piyo');
console.log(str.constructor);
console.log(typeof str);
console.log(typeof str.constructor);
  • 出力

function Number() { [native code] }
number
function

function String() { [native code] }
string
function

newつけるとtypeof numなんかはobjectでしたが、こちらは'number'と表示されるのでリテラル系と同じ?なんですかね?
ここはよくわかってないです。
ってことで、次はリテラル

6.new無しはリテラル系とおなじ?

  • ソース
// number
var num = 10;
console.log(num.constructor);
console.log(typeof num);
console.log(typeof num.constructor);

// string
var str = 'piyo';
console.log(str.constructor);
console.log(typeof str);
console.log(typeof str.constructor);
  • 出力

function Number() { [native code] }
number
function

function String() { [native code] }
string
function

これだけの結果を見る限りではnew無しと同じ?ようです。

7.オブジェクト.constructorはコンストラクタ関数と同値?

何が言いたいかはソースでw

  • ソース
var num = new Number(10);
console.log(num.constructor);
console.log(num.constructor === Number);
  • 出力

function Number() { [native code] }
true

8.Functionの名前つきコンストラクタ

これも見てみる系です

  • ソース
var funcA = new Function();
console.log("--funcA--");
console.log(funcA);
console.log(funcA.constructor);

var FuncB = function(){};
var funcB = new FuncB();
console.log("--funcB--");
console.log(funcB);
console.log(funcB.constructor);

var FuncC = function hoge(){};
var funcC = new FuncC();
console.log("--funcC--");
console.log(funcC);
console.log(funcC.constructor);
  • 出力

--funcA--
function anonymous() {

}
function Function() { [native code] }

--funcB--
FuncB {}
function (){}

--funcC--
hoge {}
function hoge(){}

最後のcのvar FuncC = function hoge(){}って宣言はあまりしたことありませんが
こーゆーのもできる&constructorにも名前が入るんですね。

何パターンかやってみたものの奥が深い。。。

この記事で参考にした書籍