javascriptのオブジェクトのプロパティとは?

このQ&Aのポイント
  • JavaScriptのオブジェクトのプロパティに関して理解できない箇所があります。
  • オブジェクトのメソッドをプロパティとして設定することで関数として呼び出すことができます。
  • プロパティのなかにプロパティを設定することも可能です。
回答を見る
  • ベストアンサー

【javascript】プロパティ?オブジェクト?

皆様あけましておめでとうございます!! 新年早々質問させていただけたらと思います。 ただいまオライリーのjavascriptのサイ本第六版を読みながら勉強してるのですが、 以下の部分がどうしても理解できません・・・ range.methods = { includes: function(x) { return this.from <= x && x <= this.to; }, foreach: function(f) { for(var x = Math.ceil(this.from); x <= this.to; x++) f(x); }, toString: function() { return "(" + this.from + "..." + this.to + ")"; } }; var r = range(1,3); // Create a range object r.includes(2); // => true: 2 is in the range r.foreach(console.log); // Prints 1 2 3 console.log(r); // Prints (1...3) 本にmethodsプロパティにinculedsやforeachを格納すると書いてあります。 2行目:includesや3行目foreachはプロパティでプロパティに関数を設定することでr.inculdes(2)で関数として呼び出しているんですよね!? なので2行目:includesや3行目foreachはプロパティという認識で間違いないでしょうか? ということはプロパティのなかにプロパティをを設定してるという形になるのでしょうか? どうもしっくりこなくて悩んでおります。 よろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • b0a0a
  • ベストアンサー率49% (156/313)
回答No.5

2行目:includesや3行目foreachはプロパティ名 関数がプロパティ値 2つあわせてrange.methodsのプロパティ JavaScriptにおいて多くのものはオブジェクト(Objectのインスタンス) オブジェクトじゃないものも暗黙でラッパーされてオブジェクトにされる

その他の回答 (4)

  • think49
  • ベストアンサー率59% (285/482)
回答No.4

「オブジェクトがプロパティの集合である」という概念は理解できているでしょうか。 var obj = {x: true, y: false}; // obj は プロパティ x,y の集合である var arr = [true, false]; // arr はプロパティ 0,1 の集合である JavaScript ではオブジェクトのプロパティにどんな値でも格納できます。 つまり、オブジェクトのプロパティにオブジェクトを格納することも当然できるわけです。 var foo = {x: true, y: false}; var piyo = {hoge: foo} // プロパティ hoge に オブジェクト foo を格納している alert(piyo.hoge.x); // true piyo.hoge はオブジェクト foo を「参照」しています。 ですので、piyo.hoge.x のように foo のプロパティ x を使用できるのです。 piyo.hoge が参照するのはあくまでオブジェクト foo ですから、プロパティにプロパティを設定するわけではありません。 プロパティに設定したオブジェクトから更にプロパティを参照している、と理解するのが適切かと思います。 > ということは、プロパティ=オブジェクトという結論に至ってしまいました。。 「プロパティ=オブジェクト」ではなく、プロパティがオブジェクトを参照していると覚えてください。 var obj = {x: true, y: false}; この例でいえば、「プロパティ === Boolean値」とはいわないでしょう? 「プロパティ名」と「プロパティ値」は明確に区別してください。

回答No.3

実はここら辺の深い所は自分もあやふやなんですが、質問者の方の理解でよろしいかと思います。 osaka58さんはプロパティの中にプロパティが設定されているのが、しっくり来てないんだと思うんですが特に不思議なことではないです。 多次元の配列みたいな物で、オブジェクトの中にオブジェクトを設定しているということです。 説明が難しいですが、以下のコードが動くのは理解できますか? --------------------- コードここから --------------------- var hash = { aa: { bb: "bb" } }; alert(hash.aa.bb); // "bb"が出力される --------------------- コードここまで --------------------- それと下のコードも動くのも分かりますでしょうか? --------------------- コードここから --------------------- var method = function(){ alert("aa"); } method(); // alert("aa")が実行される --------------------- コードここまで --------------------- osaka58さんが書かれたコードは、おそらくこの2つのコードの合わせ技と考えて問題ないかと思います。 説明が分かりにくいかもしれませんが、理解の手助けになれば嬉しいです。

  • osamuy
  • ベストアンサー率42% (1231/2878)
回答No.2

このサンプル? http://books.google.co.jp/books?id=wz0Rpydy-iEC&pg=PA135&lpg=PA135&dq=javascript+%22range.methods%22+r.foreach+-okwave&source=bl&ots=OT2nIzOb06&sig=7NV5b349FUFE-3FmorrtQmJyUQY&hl=ja&sa=X&ei=czblUKT3D8romAXzjoCwCw&ved=0CC4Q6AEwAA#v=onepage&q=javascript%20%22range.methods%22%20r.foreach%20-okwave&f=false だとすると、osaka58さんの質問文に対しての回答はANo.1のとおりなんだけど、実際のところは、JavaScriptのオブジェクト指向の仕掛けについて、osaka58さんがどれだけ理解しているかを、回答者が把握しないと説明が難しそうな。

noname#177743
noname#177743
回答No.1

このmethodに設定されている値は、{ includes:○○ , foreach:○○ , toString: ○○ } という形の値になっている、ということはおわかりだと思います。これは、なんだかわかりますか? 一般に連想配列と呼ばれるものですね。すなわち、通常の配列のようにインデックス番号で値を指定するのでなく、名前をつけて値を管理するタイプの配列ですね。 そして、JavaScriptでは、オブジェクトというのは実は連想配列のこと(?)なのです。連想配列の中の値が、いわばオブジェクトの中のプロパティに相当するものである、と考えればよいと思います。 また、JavaScriptでは、関数そのものもオブジェクトとして扱うことができます。オブジェクトのプロパティに関数を代入すれば、それを呼び出すことでその関数が実行されます。こうした、オブジェクトのプロパティに関数が代入されているものをメソッドと呼びます。 ですから、r.inculdes(2)というのは、「rangeオブジェクトのincludesプロパティに設定された関数を実行している」ということであり、これを言い換えれば、「rangeオブジェクトのincludesメソッドを実行している」ということにもなります。 >プロパティのなかにプロパティを設定してる プロパティに、オブジェクトを設定しているのです。そのオブジェクトは関数である場合もありますし、そのオブジェクトの中に更にメソッドが用意されていることもあります。

osaka58
質問者

お礼

さっそくの御回答本当にありがとうございます! まだちょっと腑に落ちない部分があり、ご質問させていただけたら助かります。 [プロパティに、オブジェクトを設定しているのです。] とご説明いただいておりますが、range関数(オブジェクト)のmethodsという名前のプロパティの値にinclude:function~などのプロパティ(関数が設定されてるこでここではメソッドとも言える)の集まりのオブジェクトを設定する。という意味でしょうか? 今回はメソッドの集まりだからオブジェクトになるのでしょうか? 仮にinclude: 'test'とかのプロパティの値が文字列だった場合も同様でしょうか? ということは、プロパティ=オブジェクトという結論に至ってしまいました。。 面倒くさい質問かと思いますがお知恵をお借りできれば助かります。

関連するQ&A

  • javascriptでオブジェクトのメソッドを使う

    JavaScriptでnewでオブジェクト化したクラス(?)のメソッド、フィールドを利用する方法を教えて下さい。 javascriptにもオブジェクト化という考え方があると聞いたのですが、 例えば、Javaでいうsetter getterのようなメソッドを作り、使用することはできるのでしょうか? 下記のようなコードを実行したところ Uncaught TypeError: Object #<mousePosi> has no method 'setPara' というエラーが出てしまい、setParaというメソッドはない。と言われてしまいます。 しかし、mousePosi()をオブジェクト化することはできているようなので、 setParaとgetParaを使えるのではないかとおもいました。 どなたかアドバイス下さい。お願いします。 ------------------------------------------------------------------------------------------------- (function LineMain() { console.log("マウスの位置座標を表示"); // console.log("X座標=" + mymouse.x + ",Y座標=" + mymouse.y); //マウスムーブでeventControlを呼び出し addEventListener("mousemove", eventControl, false); function eventControl(event) { var event = event; var myMousePosi = new mousePosi(); myMousePosi.setPara(event); // console.log("X座標=" + obj.getMouse().x + ",Y座標=" + obj.getMouse().y); } function mousePosi() { var paraMouse = { x : 0, y : 0 }; function setPara(event) { this.paraMouse.x = event.x; this.paraMouse.y = event.y; } function getPara() { return this.paraMouse; } } })();

  • javascriptのconstructorプロパティについて

    constructorプロパティとは、 オブジェクトの初期化で使用されたコンストラクタ関数を参照 とのことなので、下記2パターンのPGを作成しました 1.prototypeの明記なし function Hoge(){ this.init = "Hogeで初期化"; this.getInit = function(){ return this.init; } } var obj = new Hoge(); alert(obj.constructor == Hoge); for(prop in obj){ alert( prop + " - " + obj[prop]); } //実行結果 True init - Hogeで初期化 getInit - function () { return this.init; } 2.prototypeの明記あり function Hoge(){ this.initialize.apply(this,arguments); this.init = "Hogeで初期化"; this.getInit = function(){ return this.init; } } Hoge.prototype ={ initialize:function(){ this.init = "Hoge.prototype.initializeで初期化"; }, getInit:function(){ return "Hoge.prototype.getInit()"; } } var obj = new Hoge(); alert(obj.constructor == Hoge); for(prop in obj){ alert( prop + " - " + obj[prop]); } //実行結果 false init - Hogeで初期化 getInit - function () { return this.init; } initialize - function () { this.init = "Hoge.prototype.initialize\u3067\u521D\u671F\u5316"; } ・質問内容 prototypeの明記なしの場合は、Hogeのコンストラ関数を参照している(結果がTrueのため) prototypeの明記ありの場合は、falseのためコンストラ関数を参照していないのですが、 prototype明記あり、なしで結果が異なる理由が分からない状態です。 (prototype.constructorにも手を出したのですが、上記が解決しないため  constructorプロパティに関してのみ質問した次第です) ネット、書籍等で調べたのですが、検討がつかない状態です。 お手数ですが、ご教授お願い致します。

  • javascriptの呼び出し方

    「下記を組み込んで使って」知り合いより依頼を受けました。 そこで、下記処理を呼び出す場合、 var API = new GETAPI(); とすると、search.login/search.get/search/logout 全部callされる事になります。 それをここに呼び出す方法としてはどうしたらいいかご教授下さい。 例えば、search.loginだけを呼び出したい。 ======================================== (function(){ window.GETAPI = function(){ var search = this; search.login = function(param){ console.log("login"); }; search.get = function(param){ console.log("get"); } search.logout = function(param){ console.log("get"); } return search; } }()); ======================================== 自分のイメージとしては上記処理ではなく、 下記処理で知り合いから頂くものと思ってたので、 ここに呼び出す事は可能だと思っていました。 ========== GETAPI.prototype{ 'login' : function(param){ }, 'get' : function(param){ }, 'logout' : function(param){ } } ========== 基本的なjavascriptの質問になってしまいますが、 宜しくお願い致します。

  • [JS] private関数からオブジェクト参照

    JavaScriptにて外部から使用する関数をpublicに、内部的に使用するだけの関数をprivateにしたく、 <http://d.hatena.ne.jp/brazil/20051028/1130468761>や<http://www.findxfine.com/programming/javascript/59.html>を参考に以下のようにしてみました。 func1はtestクラス内からしか呼び出せず、privateになっており、 func2はtestクラス外からも呼び出せて、publicになっているようです。 しかし、func2からfunc1を呼び出した際に、func2の呼び出しもとのオブジェクトを参照しようとすると undefinedになってしまいます。 var a = new test(); //a.func1(); // これはprivateなのでエラー a.func2(); // こちらはpublicなのでOK function test(){ var self = this; // private variable var data1 = 1; // public variable this.data2 = 2; // private function function func1(){ console.log(data1); // 1を表示 console.log(this.data2); // これがundefinedとなってしまう } // public function this.func2 = function(){ console.log(data1); // 1を表示 console.log(this.data2); // 2を表示 func1(); }; } どのようにすれば、オブジェクト変数を参照でき、 クラス内でのみ使用可能なprivate関数を定義できるのでしょうか。

  • [初歩]プロパティについて

    いつも拝見させていただいています。 現在JavaScriptを学習しているのですが、教えていただきたいことがあります。 プロパティなのですが、私の中では3種類あると思っています。 1)型に対するプロパティ function Rectangle(){}; Recangle.p1 = 10; 2)プロトタイプに対するプロパティ var r = new Rectangle(); r.prototype.p2 = 30; 3)インスタンスに対するプロパティ var r = new Rectangle(); r.p3 = 50; こんな感じであると思っていますが、あっていますでしょうか? 2と3の場合ではプロパティ名が同じであれば2の方が隠されると思っています。 ここが間違っているよ、とか、全然ちがうよとか、それでいいよとか、何かしらのお返事お待ちしております。 よろしくお願いいたします。

  • jsのオブジェクトに関する疑問です。

    下記コードは、私には同じことをしているように見えるのですが、 Aの方じゃないと駄目なケース、 Bの方じゃないと駄目なケースというのは存在しますか? それともAとBは完全に、お互いを代替え可能なものでしょうか? //----------------------------------------------- // A //----------------------------------------------- var Box = { a: 1 } console.debug( Box.a );// 1 //----------------------------------------------- // B //----------------------------------------------- function Box() { this.a = 1; } var hoge = new Box; console.debug( hoge.a );// 1

  • JavaScriptって何者だ。

    参考までにソースを見ることができました。 HTMLで書かれているのは解りそうな気がしますが、JavaScriptは一生理解できないような気がします。メチャクチャ複雑でゴチャゴチャしています。 これって人間業じゃないような気がします。 マダ、PHPやPerl等も覚えようと思っていますが、JavaScriptはメチャクチャ 難しそうです。 WEBデザイナーの方なんか余程勉強したのでしょうね。 お先真っ暗です。 どうやって勉強するのかアドバイスをください。 宜しくお願い申し上げます。 n[e].exports}if("function"==typeof __nr_require)return __nr_require;for(var o=0;o<e.length;o++)r(e[o]);return r}({1:[function(t,n,e){function r(t){try{s.console&&console.log(t)}catch(n){}}var o,i=t("ee"),a=t(15),s={};try{o=localStorage.getItem("__nr_flags").split(","),console&&"function"==typeof console.log&&(s.console=!0,o.indexOf("dev")!==-1&&(s.dev=!0),o.indexOf("nr_dev")!==-1&&(s.nrDev=!0))}catch(c){}s.nrDev&&i.on("internal-error",function(t){r(t.stack)}),s.dev&&i.on("fn-err",function(t,n,e){r(e.stack)}),s.dev&&(r("NR AGENT IN DEVELOPMENT MODE"),r("flags: "+a(s,function(t,n){return t}).join(", ")))},{}],2:[function(t,n,e){function r(t,n,e,r,o){try{d?d-=1:i("err",[o||new UncaughtException(t,n,e)])}catch(s){try{i("ierr",[s,c.now(),!0])}catch(u){}}return"function"==typeof f&&f.apply(this,a(arguments))}function UncaughtException(t,n,e){this.message=t||"Uncaught error with no additional information",this.sourceURL=n,this.line=e}function o(t){i("err",[t,c.now()])}var i=t("handle"),a=t(16),s=t("ee"),c=t("loader"),f=window.onerror,u=!1,d=0;c.features.err=!0,t(1),window.onerror=r;try{throw new Error}catch(l){"stack"in l&&(t(8),t(7),"addEventListener"in window&&t(5),c.xhrWrappable&&t(9),u=!0)}s.on("fn-start",function(t,n,e){u&&(d+=1)}),s.on("fn-err",function(t,n,e){u&&(this.thrown=!0,o(e))}),s.on("fn-end",function(){u&&!this.thrown&&d>0&&(d-=1)}),s.on("internal-error",function(t){i("ierr",[t,c.now(),!0])})},{}],3:[function(t,n,e){t("loader").features.ins=!0},{}],4:[function(t,n,e){function r(t){}if(window.performance&&window.performance.timing&&window.performance.getEntriesByType){var o=t("ee"),i=t("handle"),a=t(8),s=t(7),c="learResourceTimings",f="addEventListener",u="resourcetimingbufferfull",d="bstResource",l="resource",p="-start",h="-end",m="fn"+p,w="fn"+h,v="bstTimer",y="pushState",g=t("loader");g.features.stn=!0,t(6);var b=NREUM.o.EV;o.on(m,function(t,n){var e=t[0];e instanceof b&&(this.bstStart=g.now())}),o.on(w,function(t,n){var e=t[0];e instanceof b&&i("bst",[e,n,this.bstStart,g.now()])}),a.on(m,function(t,n,e){this.bstStart=g.now(),this.bstType=e}),a.on(w,function(t,n){i(v,[n,this.bstStart,g.now(),this.bstType])}),s.on(m,function(){this.bstStart=g.now()}),s.on(w,function(t,n){i(v,[n,this.bstStart,g.now(),"requestAnimationFrame"])}),o.on(y+p,function(t){this.time=g.now(),this.startPath=location.pathname+location.hash}),o.on(y+h,function(t){i("bstHist",[location.pathname+location.hash,this.startPath,this.time])}),f in window.performance&&(window.performance["c"+c]?window.performance[f](u,function(t){i(d,[window.performance.getEntriesByType(l)]),window.performance["c"+c]()},!1):window.performance[f]("webkit"+u,function(t){i(d,[window.performance.getEntriesByType(l)]),window.performance["webkitC"+c]()},!1)),document[f]("scroll",r,{passive:!0}),document[f]("keypress",r,!1),document[f]("click",r,!1)}},{}],5:[function(t,n,e){function r(t){for(var n=t;n&&!n.hasOwnProperty(u);)n=Object.getPrototypeOf(n);n&&o(n)}function o(t){s.inPlace(t,[u,d],"-",i)}function i(t,n){return t[1]}var a=t("ee").get("events"),s=t(18)(a,!0),c=t("gos"),f=XMLHttpRequest,u="addEventListener",d="removeEventListener";n.exports=a,"getPrototypeOf"in Object?(r(document),r(window),r(f.prototype)):f.prototype.hasOwnProperty(u)&&(o(window),o(f.prototype)),a.on(u+"-start",function(t,n){var e=t[1],r=c(e,"nr@wrapped",function(){function t(){if("function"==typeof e.handleEvent)return e.handleEvent.apply(e,arguments)}var n={object:t,"function":e}[typeof e];return n?s(n,"fn-",null,n.name||"anonymous"):e});this.wrapped=t[1]=r}),a.on(d+"-start",function(t){t[1]=this.wrapped||t[1]})},{}],6:[function(t,n,e){var r=t("ee").get("history"),o=t(18)(r);n.exports=r,o.inPlace(window.history,

  • javascript Param

    * @param {string} coding1 * @param {string} coding2 * @param {string} coding3 */ var App = function( coding1 , coding2 , coding3 ) { console.log(source_code); $.App.call(this, hospital_code, terminal_code, source_terminal_code); this._client.add('lodging_reservations'); /** @private {array<object>} this._lodging_reservations = []; /** @private {object} this._lodging_reservation_setting = {}; }; 今訳あって他人の作ったJavascriptのソースコードを熟読するという作業を行っているのですが 1行目~3行目の「 @param ~」って5行目の変数Appの関数に引数として渡されてるのでしょうか? 馬鹿な質問でスミマセン。

  • javascriptで困っています。教えてください

    javascript初心者です。以前javascriptでクラスについていろいろな方にアドバイスをいただき、疑問が解決しました。ありがとうございました。 そこで、そのクラスから作ったインスタンスを移動させようとしているのですが、うまくいきません。 html <body onload="init();"> <div id="a"></div> </body> css body{ position:relative; } #a{ width:100px; height:100px; position:absolute; background-color:#0F0; } javascript function Character(x,y){      this.ele = document.getElementById("a"); this.x = x; this.y = y; this.move = function () { this.x += 10; this.y += 10; this.ele.style.left = this.x+"px"; this.ele.style.top = this.y+"px"; } } function init(){ var cha = new Character(10,10); var timer; timer = setInterval("loop()",1000); } function loop(){ cha.move(); } としたら、緑の正方形がx方向、y方向に移動1秒毎に10pxずつ増えながら移動していくと思っていたのですが、うまくいきませんでした。 setIntervalを使わず、var cha = new Character(10,10);の後にcha.move();cha.move();cha.move();c1.move();cha.move();とすると、座標(60,60)に緑の正方形が現れます。 緑の正方形を移動させるにはどうしたらいいのでしょうか。教えてください。

  • JavaScript thisとvarの違い

    以下のスクリプトをRhino 1.7 で実行しました。 var a = 1; this.a = 2; function MyFunc() { var a = 3; this.a = 4; print(a); } var func = new MyFunc(); print(a); print(this.a); print(func.a); 結果は以下の通りです。 3 2 2 4 1行目と4行目の結果が違います。 トップレベル(2と3行目)ではthisとvarの値が同じなのに1と4行目の値が違うのは、どのような理由でしょうか? JavaScriptの動作から含めて、教えていただければ幸いです。 よろしくお願いします。

専門家に質問してみよう