typeof()でオーラロードをこじ開ける(もしくはデータ型について)[オレ得JavaScriptメモ]

JAVASCRIPT

オレ得JavaScript3枚目書きます。今日は(今日も)長いです。長いけどいっぱいあるサンプルコードはそれぞれ短いです。短くて単純な方がわかり易いからね。

今回はデータ型についての再整理と、その結果思ってもみなかったところに繋がる話です。お腹すいた。

データ型、意識してます?

JavaScriptには「typeof()」という便利な演算子がある。引数で指定されたオペランド(値や変数)のデータ型はなんなのか?というのを返してくれる。

JavaScriptでは明示的な型宣言はしなくてもいいし、必要ならば勝手に型変換してくれるので気にしない人もいるかもね。

console.log(typeof(1));//number

数字の1は数字だ。当然number型である。

console.log(typeof('1'));//string

数字の1を意味する文字’1’は文字列だ。当然string型である。

console.log(typeof(true));//boolean

trueやfalseは真偽値だ。こういうのはboolean型だ。

console.log(typeof('true'));//string

‘true’という文字列は真偽値ではないよね。

console.log(typeof([1,2,3]));//object

配列はarray型…いやいやそんなのない。構造が単純なだけでobject型だよ。

console.log(typeof(abc));//undefined

宣言されてない変数に型はない。typeof()はundefinedを返してるだけで、undefined型というデータ型ももちろんない。

var abc;
console.log(typeof(abc));//undefined

宣言されているけど中身がない。これもundefinedだ。型はない。

var abc = 1;
console.log(typeof(abc));//number

数値が代入された変数はもちろんnumber型だ。

var abc = 0;
console.log(typeof(abc));//number

数値が0でもおんなじだ。

var abc = 'アルコール依存症';
console.log(typeof(abc));//string

文字列が代入されればstring型になるよね。

var abc = '1';
console.log(typeof(abc));//string

これもstring型だ。実につまらない。

var abc = '';
console.log(typeof(abc));//string

空の文字列は0でもないしundefinedも返されない。立派な文字列だ。

var a = null;
console.log(typeof(a));//object

nullはobject型…だと…!?

これはちょっと特殊な例だ。

typeof 演算子 – JavaScript | MDN

こちらを参考にしてほしいが、

JavaScript の最初の実装では、値は、型を表す「タグ」と「値そのもの」で表されていました。 オブジェクトの型タグは 0 で。そして null のそれは NULL ポインタ(0x00 は殆どのプラットフォームに存在する)で示されていました。その為 Null の型タグは 0 と見做され、「typeof Null は “object”」という、悪い冗談の様な結果になったのです。

この挙動はECMAScriptにオプトインとして提案されましたが、却下されました。この変更が通れば、 typeof null は ‘null’ を返すようになるはずでした。

…だそうだ。これはあまり深く考えずに「そういうものだ」と覚えておくだけでいいんじゃないかな。その成立自体に理論的裏付けがないんだから。

var abc = [];
console.log(typeof(abc));//object

空でも配列は配列。つまりオブジェクト。object型だ。

var abc = new Array;
console.log(typeof(abc));//object

Arrayオブジェクトからnew演算子で生成しても同じだね。

var abc = [55,56,57];
console.log(typeof(abc));//object

中身のある配列。object型以外の何物でもない。

number型やstring型やboolean型のデータは総称して「プリミティブ型」と呼ばれる。プリミティブっていうのは原始的とか素朴な、という意味だ。ここでは「基本構成要素」だととらえておこうか。

オブジェクト型(=object型)ってのはその構成要素を0個以上まとめたもの、というように考えるとわかり易いかもしれない。配列がobject型なのもきっとそういうことだ。閑話休題。

var abc = [55,56,57];
console.log(typeof(abc[1]));//number

配列(ってみんなが呼んでるオブジェクト)を構成する個々の要素に注目してみた場合、それぞれが各々データ型を有するのは直観的にもわかるだろう。数字が入っていればnumber型だし…

var abc = ['五十五','五十六','五十七'];
console.log(typeof(abc[1]));//string

…文字列が入っていればそれはその構成要素のデータ型はstring型だ。

var abc = {};
console.log(typeof(abc));//object

空の配列がobject型なんだから空のオブジェクトはobject型になって然るべき。

var sake = {junmai:2980,ginjo:7480,daiginjyo:12980};
console.log(typeof(sake.junmai));//number

構成要素がそれぞれのデータ型を持つのも配列(ってみんなが呼んでるオブジェクト)の場合と一緒。junmaiというプロパティには2980という数字が入っている。だからnumber型。大吟醸は高いね!ちなみに私は鏡月プレゼントされただけでも泣いて喜ぶ。

var sake = {otokoyama:'国芳乃名取',takasago:'国士無双',godo:'大雪乃蔵'};
console.log(typeof(sake.takasago));//string

takasagoというプロパティには’国士無双’という文字列がセットされている。string型だ。年始のお神酒は男山純米の金箔入りを供えます。純米だけど金箔。私なりの精一杯の努力というか気持ち。

var abc = new Object;
console.log(typeof(abc));//object

Objectオブジェクトからnewで生成されたオブジェクト、中身がなくてもobject型。配列と一緒。

var abc = function(){};
console.log(typeof(abc));//function

初めて出てきたfuntion型。関数のデータ型はfunction型なんだ。

function abc(){};
console.log(typeof(abc));//function

関数宣言の場合でも同様。

function abc(){};
console.log(typeof(abc));//function
var xyz = new abc;
console.log(typeof(xyz));//object

えっ。おっ?

function型のデータを元にnewで生成されたもののデータ型は…function型ではない、object型だ。意外?だとすれば、これは注目すべきことなんじゃないかな?

つまりあれだ、object型のオブジェクトを作るには(最低でも)3つ(以上は)あるということだ。

  1. オブジェクトリテラルで直接記述する方法
  2. Objectオブジェクト(またはArrayオブジェクト)を元にnew演算子で生成する方法
  3. 既存の関数を元にnew演算子で生成する方法

3つ目は最初の2つとは決定的に異なる。生成元となった関数は「コンストラクタ関数」と呼ばれる。コンストラクタ関数にはさらにその中に性質(プロパティ≒変数や値)や振る舞い(メソッド≒関数)を定義できるが、関数はあくまで関数だ。定義しただけでは実行されない。

コンストラクタ関数はnew演算子で生成されたとき、はじめて実態を持ったobject型データになる。「functionからnewでobject」というのはそういうことだ(たぶん)。

コンストラクタ関数は「ひな形」で、生成されたobject型データは「ひな形を通して作られたモノ」とでもとらえればいいのかな?コンストラクタ関数は「お酒の醸造方法」で、生成されたobject型データは「商品として売られるお酒」という例えはダメですか?ダメですね。すみません。

ちなみに「他の通常の関数と区別する意味で、コンストラクタ関数の最初一文字は大文字で書く」という慣習(文法ではない)があるようなので、上の例は

function Abc(){};
var xyz = new Abc;

とか

var Abc = function(){};
var xyz = new Abc;

と書くといいらしいよ。

ところで、コンストラクタ関数から生成されたobject型オブジェクト(前述の3)と、それ以外の単なるobject型オブジェクト(前述の1,2)にはもう一つ決定的な違いがある。

var abc = {};
console.log(typeof(abc.prototype));//undefined

空のobject型オブジェクトを作ってそのオブジェクトのprototypeというプロパティの型を調べる。空のオブジェクトで、プロパティも一切セットしていないのでundefinedが返される。当たり前だね。だって空なんだから。

では次の場合は?

var abc = function(){};
console.log(typeof(abc.prototype));//object

空のfunction型オブジェクトを作ってそのブジェクトのprototypeというプロパティの型を調べる。objectが返されるではないか!そんなプロパティ作った覚えないぞ!?

じゃあさ、この関数からnewで作られたobject型オブジェクトはどうなのよ?

var Abc = function(){};
var xyz = new Abc;
console.log(typeof(xyz.prototype));//undefined

お、おう、またいなくなったか…

typeof()を使ってJavaScriptのデータ型を復習していたら、謎のプロパティprototypeに辿りついてしまった。まるでバイク乗ってたら突然オーラロード開いてバイストン・ウェルに召喚されてしまったみたいではないか。

この話はプロトタイプチェーンとか継承とかそういうところに話がつながるのか?落としどころはあるのか?それは私も調べて勉強しながら書いてるからわからないよ!来世にこうご期待!んじゃまたー。

コメント

',b.captions&&s){var u=J("figcaption");u.id="baguetteBox-figcaption-"+t,u.innerHTML=s,l.appendChild(u)}e.appendChild(l);var c=J("img");c.onload=function(){var e=document.querySelector("#baguette-img-"+t+" .baguetteBox-spinner");l.removeChild(e),!b.async&&n&&n()},c.setAttribute("src",r),c.alt=a&&a.alt||"",b.titleTag&&s&&(c.title=s),l.appendChild(c),b.async&&n&&n()}}function X(){return M(o+1)}function D(){return M(o-1)}function M(e,t){return!n&&0<=e&&e=k.length?(b.animation&&O("right"),!1):(q(o=e,function(){z(o),V(o)}),R(),b.onChange&&b.onChange(o,k.length),!0)}function O(e){l.className="bounce-from-"+e,setTimeout(function(){l.className=""},400)}function R(){var e=100*-o+"%";"fadeIn"===b.animation?(l.style.opacity=0,setTimeout(function(){m.transforms?l.style.transform=l.style.webkitTransform="translate3d("+e+",0,0)":l.style.left=e,l.style.opacity=1},400)):m.transforms?l.style.transform=l.style.webkitTransform="translate3d("+e+",0,0)":l.style.left=e}function z(e){e-o>=b.preload||q(e+1,function(){z(e+1)})}function V(e){o-e>=b.preload||q(e-1,function(){V(e-1)})}function U(e,t,n,o){e.addEventListener?e.addEventListener(t,n,o):e.attachEvent("on"+t,function(e){(e=e||window.event).target=e.target||e.srcElement,n(e)})}function W(e,t,n,o){e.removeEventListener?e.removeEventListener(t,n,o):e.detachEvent("on"+t,n)}function G(e){return document.getElementById(e)}function J(e){return document.createElement(e)}return[].forEach||(Array.prototype.forEach=function(e,t){for(var n=0;n","http://www.w3.org/2000/svg"===(e.firstChild&&e.firstChild.namespaceURI)}(),m.passiveEvents=function i(){var e=!1;try{var t=Object.defineProperty({},"passive",{get:function(){e=!0}});window.addEventListener("test",null,t)}catch(n){}return e}(),function a(){if(r=G("baguetteBox-overlay"))return l=G("baguetteBox-slider"),u=G("previous-button"),c=G("next-button"),void(d=G("close-button"));(r=J("div")).setAttribute("role","dialog"),r.id="baguetteBox-overlay",document.getElementsByTagName("body")[0].appendChild(r),(l=J("div")).id="baguetteBox-slider",r.appendChild(l),(u=J("button")).setAttribute("type","button"),u.id="previous-button",u.setAttribute("aria-label","Previous"),u.innerHTML=m.svg?f:"<",r.appendChild(u),(c=J("button")).setAttribute("type","button"),c.id="next-button",c.setAttribute("aria-label","Next"),c.innerHTML=m.svg?g:">",r.appendChild(c),(d=J("button")).setAttribute("type","button"),d.id="close-button",d.setAttribute("aria-label","Close"),d.innerHTML=m.svg?p:"×",r.appendChild(d),u.className=c.className=d.className="baguetteBox-button",function n(){var e=m.passiveEvents?{passive:!1}:null,t=m.passiveEvents?{passive:!0}:null;U(r,"click",x),U(u,"click",E),U(c,"click",C),U(d,"click",B),U(l,"contextmenu",A),U(r,"touchstart",T,t),U(r,"touchmove",N,e),U(r,"touchend",L),U(document,"focus",P,!0)}()}(),S(e),function s(e,a){var t=document.querySelectorAll(e),n={galleries:[],nodeList:t};return w[e]=n,[].forEach.call(t,function(e){a&&a.filter&&(y=a.filter);var t=[];if(t="A"===e.tagName?[e]:e.getElementsByTagName("a"),0!==(t=[].filter.call(t,function(e){if(-1===e.className.indexOf(a&&a.ignoreClass))return y.test(e.href)})).length){var i=[];[].forEach.call(t,function(e,t){var n=function(e){e.preventDefault?e.preventDefault():e.returnValue=!1,H(i,a),I(t)},o={eventHandler:n,imageElement:e};U(e,"click",n),i.push(o)}),n.galleries.push(i)}}),n.galleries}(e,t)},show:M,showNext:X,showPrevious:D,hide:j,destroy:function e(){!function n(){var e=m.passiveEvents?{passive:!1}:null,t=m.passiveEvents?{passive:!0}:null;W(r,"click",x),W(u,"click",E),W(c,"click",C),W(d,"click",B),W(l,"contextmenu",A),W(r,"touchstart",T,t),W(r,"touchmove",N,e),W(r,"touchend",L),W(document,"focus",P,!0)}(),function t(){for(var e in w)w.hasOwnProperty(e)&&S(e)}(),W(document,"keydown",F),document.getElementsByTagName("body")[0].removeChild(document.getElementById("baguetteBox-overlay")),w={},h=[],o=0}}})
タイトルとURLをコピーしました