内容へ移動
Water Sunlight
軽量プログラミングの文法 - JavaScript/Python
ユーザ用ツール
ログイン
サイト用ツール
検索
ツール
文書の表示
以前のリビジョン
バックリンク
最近の変更
メディアマネージャー
サイトマップ
ログイン
>
最近の変更
メディアマネージャー
サイトマップ
トレース:
js:object:basic
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== JavaScript オブジェクトの基本 ====== --- //[[http://www.y2sunlight.com/water|y2sunlight]] 2020-10-28// ===== プロトタイプベースのオブジェクト指向 ===== JavaScriptでは関数オブジェクトがクラスの役割を果たします。以下の例の様に、関数リテラルを使ってクラスを記述することができます。 <sxh javascript;title:Example> var Student = function(name) { // コンストラクタ this.name = name; // プロパティ this.greeting = function() { // メソッド console.log(`I am ${this.name}`); }; }; var suzuki = new Student('suzuki'); </sxh> - 関数オブジェクト(コンストラクタ)によってクラスを作る。 - ''this.プロパティ名'' でプロパティを定義する。 - 関数を値に持つプロパティがメソッドの役割を果たす。 - new演算子でクラスからインスタンスを作る。 この例と同様に、次の様に名前付きの関数定義によってクラスを記述することができます。 <sxh javascript;title:Example> function Student(name) { // コンストラクタ this.name = name; // プロパティ this.greeting = function() { // メソッド console.log(`I am ${this.name}`); }; }; var suzuki = new Student('suzuki'); </sxh> \\ === new演算子 === <code javascript> var 変数名 = new オブジェクト名([引数, ・・・]) </code> === プロパティの定義 === <code javascript> this.プロパティ名 </code> === プロパティとメソッドのアクセス === <sxh javascript;title:Example> var name = suzuki.name(); // プロパティの読み込み suzuki.name = 'suzuki taro'; // プロパティの書き込み suzuki.greeting(); // メソッドの呼び出し </sxh> === メンバーの有無の判定(in演算子) === in演算子を使って、メンバーの存在の有無を判定することができます。 <sxh javascript;title:Example> console.log('name' in suzuki); // true console.log('greeting' in suzuki); // true </sxh> \\ ===== 静的プロパティと静的メソッド ===== 静的プロパティ(またはメソッド)は、インスタンスを生成しなくてもオブジェクトから直接呼び出すことができるプロパティ(またはメソッド)です。これは以下の様に定義することができます。 <code javascript> オブジェクト名.プロパティ名 = 値; オブジェクト名.メソッド名 = function() {/* メソッドの定義 */}; </code> <sxh javascript;title:Example> var Student = function(name) { this.name = name; // インスタンスプロパティ this.greeting = function() { // インスタンスメソッド console.log(`I am ${this.name}.`); }; } Student.age = 15; // 静的プロパティ Student.getSchoolName = function() { // 静的メソッド return 'AbcSchool'; } console.log(Student.age); // OK (15) console.log(Student.getSchoolName()); // OK (AbcSchool) </sxh> 静的プロパティ(またはメソッド)は、インスタンスからアクセスすることはできません。 <sxh javascript;title:Example> var taro = new Student('taro'); taro.name = 'suzuki taro' // OK taro.greeting(); // OK (I am suzuki taro.) console.log(taro.age); // NG (undefined) console.log(taro.getSchoolName()); // NG (taro.getSchoolName is not a function) </sxh> === メンバーの有無の判定(in演算子) === in演算子を使って、メンバーの存在の有無を判定することができます。 <sxh javascript;title:Example> console.log('name' in taro); // true console.log('greeting' in taro); // true console.log('age' in taro); // false console.log('getSchoolName' in taro); // false console.log('age' in Student); // true console.log('getSchoolName' in Student); // true </sxh> \\ ===== 組み込みオブジェクト ===== * 組み込みオブジェクト ・・・ 全てのJavaScriptに標準で組み込まれている * ブラウザーオブジェクト ・・・ 特定の環境(ブラウザー上)で動作する ^オブジェクト^^説明^ |Global||JavaScriptの基本機能| |参照型|Object|ラッパーオブジェクト \\ JavaScriptの標準なデータ型(基本型、参照型)をラップしたもの| |:::|Array|:::| |:::|Function|:::| |基本型|String|:::| |:::|Boolean|:::| |:::|Number|:::| |:::|Symbol|:::| |Math||数値演算| |Date||日付| |RegExp||正規表現| |Error/XxxxError||エラー| |Map/WeakMap<sup>[[js:top#ECMAScript|*2015]]</sup>||ディクショナリー| |Set/WeakSet<sup>[[js:top#ECMAScript|*2015]]</sup>||集合(セット)| |Proxy<sup>[[js:top#ECMAScript|*2015]]</sup>||オブジェクトの基本動作のカスタマイズ| |Promise<sup>[[js:top#ECMAScript|*2015]]</sup>||非同期処理| <sxh javascript;title:Example> var str = 'こんにちは'; // 基本型のプロパティにアクセスすると一時的にオブジェクトが作られる // str.length => (new String(str)).length console.log(str.length); </sxh> <sxh javascript;title:Example> // 基本型 var flag = false; if(flag){ // ここには来ない } // 参照型 var flag = new Boolean(false); if(flag){ // ここには来る } if(flag.valueOf()){ // 正解の書き方 // ここには来ない } </sxh> \\
js/object/basic.txt
· 最終更新: 2021/07/19 10:58 by
y2sunlight
ページ用ツール
文書の表示
以前のリビジョン
バックリンク
文書の先頭へ