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
functionfunction 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
functionfunction 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
functionfunction 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にも名前が入るんですね。
何パターンかやってみたものの奥が深い。。。
この記事で参考にした書籍
オライリージャパン
売り上げランキング: 11,609