From ab2ad55069ade44b642bddc54cdbe46c3bb6709c Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 13 Apr 2021 01:19:36 +0900 Subject: 「プロパティアクセサー」を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 2021/02/20 時点の英語版に基づき更新 --- .../operators/property_accessors/index.html | 161 ++++++++++----------- 1 file changed, 77 insertions(+), 84 deletions(-) (limited to 'files/ja/web') diff --git a/files/ja/web/javascript/reference/operators/property_accessors/index.html b/files/ja/web/javascript/reference/operators/property_accessors/index.html index 6683586246..4f31790b02 100644 --- a/files/ja/web/javascript/reference/operators/property_accessors/index.html +++ b/files/ja/web/javascript/reference/operators/property_accessors/index.html @@ -3,153 +3,146 @@ title: プロパティアクセサー slug: Web/JavaScript/Reference/Operators/Property_Accessors tags: - JavaScript + - Language feature - Operator - Reference - - 演算子 translation_of: Web/JavaScript/Reference/Operators/Property_Accessors ---
{{jsSidebar("Operators")}}
-

プロパティアクセサーはオブジェクトのプロパティへのアクセスを提供するもので、ドット表記法またはブラケット表記法を使用します。

+

プロパティアクセサーはオブジェクトのプロパティへのアクセスを提供するもので、ドット表記法またはブラケット表記法を使用します。

-
{{EmbedInteractiveExample("pages/js/expressions-propertyaccessors.html")}}
- - +
{{EmbedInteractiveExample("pages/js/expressions-propertyaccessors.html", "taller")}} +

構文

-
object.property
-object['property']
+
object.property
+object['property']
 

 
-
解説

+
解説

+
+
オブジェクトは実際には連想配列 (別名 map、 dictionary、 hash、 lookup table) とみなすことができます。この配列におけるキーはオブジェクトのプロパティ名です。

+
+
一般的に、オブジェクトのプロパティについて説明する際には、プロパティとメソッドを区別します。しかし、プロパティとメソッドの区別は慣習的なものにすぎません。メソッドは呼び出すことができるプロパティです (例えば、値として {{jsxref("Function")}} インスタンスへの参照を持っているようなものです)。

+
+
プロパティにアクセスするには、ドット表記法とブラケット表記法の 2 通りがあります。

 
-
オブジェクトは実際には連想配列 (別名 map、 dictionary、 hash、 lookup table) とみなすことができます。この配列におけるキーはオブジェクトのプロパティ名です。一般的に、オブジェクトのプロパティについて説明する際には、プロパティとメソッドを区別します。しかし、プロパティとメソッドの区別は慣習的なものにすぎません。メソッドは単なるプロパティであり、言わば、例えば値として {{jsxref("Function")}} オブジェクトのインスタンスへの参照を持っているものです。

+
ドット表記法

 
-
プロパティにアクセスするには、ドット表記法とブラケット表記法の2通りがあります。

+
object.property の構文では、 property は有効な JavaScript の 識別子でなければなりません。 (ECMAScript 標準では、プロパティの名前は技術的には "IdentifierNames" であり、 "Identifiers" ではないので、予約語を使用することができますがお勧めしません)。例えば、 object.$1 は有効であるのに対し、 object.1 は有効ではありません。

 
-
ドット表記法

+
const variable = object.property_name;
 
-
get = object.property;
-object.property = set;
+object.property_name = value;
 

 
-
property は有効な JavaScript 識別子である必要があります。例えば object.$1 は有効ですが、 object.1 は有効ではありません。

+
const object = {};
 
-
document.createElement('pre');
+object.$1 = 'foo';
+console.log(object.$1);  // 'foo'
+
+object.1 = 'bar';        // SyntaxError
+console.log(object.1);   // SyntaxError
 

 
-
ここでは、 document から "createElement" という名前のメソッドが検索され、呼び出されます。

+
ここで、 createElement というメソッドを document から取得し、呼び出します。

+
+
document.createElement('pre')
+

 
-
指数や小数点を持たない数値リテラルにメソッドを使用する場合、メソッド呼び出しをするドットの前に{{glossary("Whitespace", "ホワイトスペース")}}を入れることで、ドットが小数点とみなされることを防ぐことができます。

+
数値リテラルに対してメソッドを使用する場合で、その数値リテラルに指数や小数点がない場合、メソッド呼び出しをするドットの前にホワイトスペースを入れることで、ドットが小数点とみなされることを防ぐことができます。

 
 
77 .toExponential();
 // or
 77
-.toExponential();
+.toExponential()
 // or
-(77).toExponential();
+;(77).toExponential()
 // or
-77..toExponential();
+77..toExponential()
 // or
-77.0.toExponential();
+77.0.toExponential()
 // because 77. === 77.0, no ambiguity

 
-
ブラケット表記法

+
ブラケット表記法

 
-
get = object[property_name];
-object[property_name] = set;
-

+
object[property_name] の構文では、 property_name は文字列またはシンボルです。ですから、これは任意の文字列、例えば '1foo'、'!bar!'、または ' ' (空白) であっても構いません。

 
-
property_name は文字列または{{glossary("Symbol", "シンボル")}}です。この文字列は有効な識別子である必要はなく、任意の値、例えば "1foo", "!bar!", または " " (空白) であっても構いません。

-
-
document['createElement']('pre');
-

+
const variable = object[property_name]
+object[property_name] = value;

 
 
これは前の例とまったく同じです。

 
+
document['createElement']('pre')
+

+
 
ブラケット表記法の前には空白を入れることができます。

 
-
document ['createElement']('pre');

+
document ['createElement']('pre')

 
-
プロパティ名

+
プロパティ名

 
-
プロパティ名は文字列または{{glossary("Symbol", "シンボル")}}です。それ以外の値は、数値を含めて、文字列へ強制変換されます。

+
プロパティ名は文字列またはシンボルです。それ以外の値は、数値を含めて、文字列へ強制変換されます。これは 'value' を出力します。 1 が '1' に強制変換されるからです。

 
-
var object = {};
-object['1'] = 'value';
-console.log(object[1]);
+
let object = {}
+object['1'] = 'value'
+console.log(object[1])
 

 
-
これは、 1 が '1' に強制変換されるので、 "value" を出力します。

+
こちらも 'value' を出力します。foo と bar は同じ文字列に変換されるからです。

 
-
var foo = {unique_prop: 1}, bar = {unique_prop: 2}, object = {};
-object[foo] = 'value';
-console.log(object[bar]);
+
let foo = {unique_prop: 1}, bar = {unique_prop: 2}, object = {};
+object[foo] = 'value'
+console.log(object[bar])
 

 
-
foo と bar は同じ文字列に変換されるので、こちらも "value" を出力します。 SpiderMonkey JavaScript エンジンでは、この文字列は "[object Object]" となるでしょう。

+ 
SpiderMonkey JavaScript エンジンでは、この文字列は "[object Object]" となります。

 
-
メソッドのバインド

+
メソッドのバインド

 
-
メソッドはそのメソッドが所属するオブジェクトにバインドされているわけではありません。特に、 this はメソッド内で固定されていません。つまり、 this は必ずしもそのメソッドを含んでいるオブジェクトを参照しているとは限りません。 this は関数呼び出し時に「渡される」ものです。メソッドのバインドを参照してください。

+
メソッドは、そのメソッドが所属するオブジェクトにバインドされているわけではありません。特に、 this はメソッド内で固定されていません。つまり、 this は必ずしもそのメソッドを含んでいるオブジェクトを参照しているとは限りません。 this は関数呼び出し時に「渡される」ものです。メソッドのバインドを参照してください。

 
-
eval におけるメモ

+
Examples

 
-
JavaScript 初心者はしばしば、代わりにブラケット表記法を使えるところで {{jsxref("eval", "eval()")}} を使用してしまう間違いを犯します。例えば、以下のような構文がたくさんのスクリプトで見られます。

+
ブラケット表記法と eval

 
-
x = eval('document.forms.form_name.elements.' + strFormControl + '.value');
+
JavaScript 初心者はしばしば、代わりにブラケット表記法を使えるところで {{jsxref("eval", "eval()")}} を使用してしまう間違いを犯します。

+
+
例えば、以下のような構文がたくさんのスクリプトで見られます。

+
+
x = eval('document.forms.form_name.elements.' + strFormControl + '.value')
 

 
-
eval() は低速であり、可能な限り避けるべきです。また、 strFormControl は ID を必要としますが、フォームコントロールの名前と ID は必須ではありません。代わりにブラケット表記法を使った方が良いでしょう。

+
eval() は低速であり、可能な限り避けるべきです。また、 strFormControl は ID を必要としますが、フォームコントロールの名前と id は必須ではありません。代わりにブラケット表記法を使った方が良いでしょう。

 
-
x = document.forms['form_name'].elements[strFormControl].value;
+
x = document.forms['form_name'].elements[strFormControl].value
 

 
-
仕様書

+
仕様書

 
 
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
+  
+    
+      
+    
+  
+  
+    
+      
+    
+  
仕様書状態備考
{{SpecName('ESDraft', '#sec-property-accessors', 'Property Accessors')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-property-accessors', 'Property Accessors')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-11.2.1', 'Property Accessors')}}{{Spec2('ES5.1')}}
{{SpecName('ES1', '#sec-11.2.1', 'Property Accessors')}}{{Spec2('ES1')}}初回定義。JavaScript 1.0 で実装。
仕様書
{{SpecName('ESDraft', '#sec-property-accessors', 'Property Accessors')}}

 

 
-
ブラウザーの互換性

-
-
+
ブラウザーの互換性

 
 
{{Compat("javascript.operators.property_accessors")}}

 
-
関連情報

+
関連情報

 
 
-- 
cgit v1.2.3-54-g00ecf