JavaScript基礎チュートリアル

JavaScriptオブジェクト

JavaScript関数

JSHTMLDOM

JSブラウザBOM

AJAX基礎チュートリアル

JavaScriptリファレンスマニュアル

JavaScript のオブジェクトのコンストラクタ JavaScript のオブジェクトの属性

JavaScript のオブジェクトのメソッド

メソッドオブジェクト、または関連する関数と呼ばれるものです。メソッドは、関数の属性として関連付けられたオブジェクトです。

メソッドの定義方法は通常の関数の定義方法と同じですが、それらをオブジェクトの属性として割り当てる必要があります。

JavaScriptメソッドにアクセス

例

//　オブジェクトの作成
var user = {
　　firstName: "Seagull",
　　lastName　: \
　　age:　22,
　　location: "New Delhi",
　　getName　　: function() {
　return this.firstName　+　"　"　+　this.lastName;
　　}
;
//getName()メソッドにアクセス
user.getName();

テストを見て‹/›

()括弧を付けないメソッドにアクセスすると、関数定義が返されます：

例

user.getName;

テストを見て‹/›

を使用してthisオブジェクト参照として

JavaScriptには特別なキーワードthisがあります。メソッド内で使用して、現在のオブジェクトを参照できます。

あなたは既に、私たちのメソッドが少し奇妙だと思っているかもしれません。この例を考えてみてください：

　　getName: function() {
　　　return this.firstName　+　"　"　+　this.lastName;
　　}

thisキーワードは、コードが現在の内部オブジェクトに書かれていることを指します。-したがって、この場合、thisは以下に等しいです。user。

言い換えれば、this.firstNameは以下を意味します。このオブジェクトのfirstName属性。

以下の場所で使用できます：JSキーワードチュートリアルJS中このthisキーワードに関する詳細な情報を学びます。

新しいメソッドの追加

新しいメソッドをオブジェクトに追加するには、新しい関数を属性に割り当てるために割り当て演算子（=）を使用できます。

この例では、ユーザーオブジェクトに「greet」メソッドを追加します：

例

user.greet = function() {
　　　　return \
;

テストを見て‹/›

GettersとSetters

ECMAScript 5(2009) GettersとSettersが導入されました。

getterは特定の属性値を取得する方法です。

setterは特定の属性値を設定する方法です。

getterとsetterを定義できるのは、新規属性を追加できるあらゆるプリセットのコアオブジェクトやユーザー定義オブジェクトです。

JavaScript Getter（getキーワード）

この例ではgetを使用しています loc属性としてlocation属性の値：

例

//オブジェクトの作成
var user = {
　　firstName: "Seagull",
　　lastName: "Anna",
　　age:　22,
　　location: "New Delhi",
　　get loc() {
　　　　　return this.location;
　　}
;
//オブジェクトからのデータを表示
document.getElementById("para").innerHTML = user.loc;

テストを見て‹/›

JavaScript Setter（setキーワード）

この例ではsetを使用しています loc属性としてlocation属性の値：

例

//　オブジェクトの作成
var user = {
　　firstName: "Seagull",
　　lastName: "Anna",
　　age:　22,
　　location: "New Delhi",
　　set loc(x) {
　　　　　this.location = x;
　　}
;
//　setterを使用してオブジェクト属性を設定
user.loc = "Goa";
//　オブジェクトからのデータを表示
document.getElementById("para").innerHTML = user.location;

テストを見て‹/›

Function関数とGetterの違いは何ですか？

以下の2つの例では、functionとgetterの違いを示しています：

例1（機能の使用）：

例

//オブジェクトの作成
var user = {
　　firstName: "Seagull",
　　lastName: "Anna",
　　age:　22,
　　location: "New Delhi",
　　fullName: function() {
　　　　　　return this.firstName　+　"　"　+　this.lastName;
　　}
;
//　オブジェクトからのデータを表示
document.getElementById("para").innerHTML = user.fullName();

テストを見て‹/›

例2（ゲッターの使用）：

例

//　オブジェクトの作成
var user = {
　　firstName: "Seagull",
　　lastName: "Anna",
　　age:　22,
　　location: "New Delhi",
　　get fullName() {
　　　　　return this.firstName　+　"　"　+　this.lastName;
　　}
;
//オブジェクトからのデータを表示
document.getElementById("para").innerHTML = user.fullName;

テストを見て‹/›

例1 fullNameとして関数アクセス：user.fullName()。

例2 fullNameとして属性アクセス：user.fullName。

ゲッターとセッターの使用：

よりシンプルな構文を提供します
属性とメソッドの構文が同じになります
より良いデータ品質を確保できます
バックエンド処理に非常に役立ちます

Object.defineProperty()

Object.defineProperty()メソッドは、ゲッターとセッターを追加するために使用することもできます。

文法：

Object.defineProperty(object,　property,　{value　:　value})

「カウンターオブジェクト」を例にして見ましょう：

例

var　counter　=　{i　:　0};
Object.defineProperty(counter,　"increment",　{　
　　　get:　function()　{this.i++;}
});
Object.defineProperty(counter,　"decrement",　{　
　　　get:　function()　{this.i--;}
});
Object.defineProperty(counter,　"reset",　{　
　　　get:　function()　{this.i　=　0;},
});
Object.defineProperty(counter,　"add",　{
　　　set:　function　(value)　{this.i　+=　value;}
});
Object.defineProperty(counter,　"subtract",　{
　　　set:　function　(value)　{this.i　-=　value;}
});
counter.reset;
counter.add　=　25;
counter.increment;

テストを見て‹/›

JavaScript のオブジェクトのコンストラクタ JavaScript のオブジェクトの属性