5-①.JavaScript のオブジェクト(Object)

Last updated at 2024-06-19Posted at 2024-06-18

Objectオブジェクト

警告: 記事に機械翻訳するものがあるので、学習メモとして保存され、参考学習用のみ

概要

JavaScriptネイティブで提供される「Object」オブジェクト(最初のOが大文字であることに注意)のための様々な方法を紹介します。

JavaScriptの他のオブジェクトはすべてObjectオブジェクトから引き継がれます。つまり、それらのオブジェクトはすべて`Objectのインスタンス。

Objectオブジェクトのネイティブメソッドには、Object自身のメソッドと`Objectのインスタンスメソッドの2種類があります。

** (1) Objectオブジェクト自体のメソッド**。

「自身的アプローチ」とはObjectオブジェクトに直接定義するアプローチ。

object.print = function (o) {console.log(o)};

上記のコードではprintメソッドはObjectオブジェクト上で直接定義されています。

(2) オブジェクトの例の方法

インスタンスメソッドとは、「Object」原型オブジェクト「object.prototype」上に定義されたメソッド。Objectインスタンスで直接使うことができます。

object.prototype.print = function () {
console.log(this);
};

var obj = new Object();
obj.print() // Object

上記のコードでは、object.prototypeはprintメソッドを定義し、Objectのインスタンスobjを生成します。' obj 'は' object.prototype 'のプロパティとメソッドをそのまま引き継いでおり、' obj.print 'を使って' print 'メソッドを呼び出すことができます。つまり、objオブジェクトのprintメソッドは、実質的にはobject.prototype.printメソッドを呼び出すことになります。

object.prototypeの詳細な説明はオブジェクト指向プログラミングの項を参照されたいと思います。ここで、object.prototypeオブジェクトの上に定義されている属性とメソッドは、インスタンスオブジェクト全体で共有されていることがわかればいいの。

以下では、まず関数としてのObjectの使い方を紹介した後、Objectオブジェクトのネイティブなメソッドを紹介します。オブジェクト自体のメソッド(別名「静的メソッド」)とインスタンスのメソッドに分けます。

Object()

Objectはそれ自体が関数であり、任意の値をオブジェクトに変換するツールとして使うことができます。この方法は、ある値が必ず対象であることを保証するためによく使われます。

引数がnull(またはundefinedとnull)の場合、Object()は空のオブジェクトを返します。

var obj = Object();
//に等しい
var obj = Object(undefined);
var obj = Object(null);

obj instanceof Object // true

上記のコードの意味は、undefinedとnullをオブジェクトに変換すると、空のオブジェクトであるobjが得られます。

instanceof演算子は、オブジェクトが指定されたコンストラクタのインスタンスであるかを検証します。' obj instanceof Object 'が' true 'を返すと、' obj 'オブジェクトは' Object 'のインスタンスであることを意味します。

パラメータが元の型の値の場合、Objectメソッドは対応するラッピングオブジェクトのインスタンスに変換します(「元の型のラッピングオブジェクト」の章を参照)。

var obj = Object(1);
obj instanceof Object // true
obj instanceof Number // true

var obj = Object('foo');
obj instanceof Object // true
obj instanceof String // true

var obj = Object(true);
obj instanceof Object // true
obj instanceof Boolean // true

上記のコードでは、Object関数の引数は元の型の値であり、オブジェクトに変換すると元の型の値に対応するパッケージオブジェクトとなります。

もしObjectメソッドのパラメータがオブジェクトであれば、オブジェクトは常にオブジェクトを返します。

var arr =[];
var obj = Object(arr);//元の配列に戻ります
obj === arr // true

var value ={};
var obj = Object(value) //元のオブジェクトに戻ります
obj === value // true

var fn = function () {};
var obj = Object(fn);//元の関数に戻ります。
obj === fn // true

これを利用して、変数が対象かどうかを判定する関数を書くことができます。

function isObject(value)
return value === Object(value);
}

isObject([]) // true
isObject(true) // false

Objectコンストラクタ

Objectはツールとしてだけでなくコンストラクタとしても使えます。つまりnewコマンドを使うことができます。

「Object」コンストラクタの主な用途は、直接新しいオブジェクトを生成すること。

var obj = new Object();

なお、「var obj = new Object()」という書き方で新しいオブジェクトを生成することは、リテラルの書き方である「var obj ={}」と等価。あるいは、後者は前者の簡便な書き方。

オブジェクトコンストラクタの使い方は、ツールの使い方と似ていて、ほとんど同じ。使用する時、1つのパラメータを受け入れることができて、このパラメータが1つの対象ならば、直接この対象を返します;元の型の値の場合は、その値に対応するラッピングオブジェクトを返します(詳細はラッピングオブジェクトの章を参照)。

var o1 = {a: 1};
var o2 = new Object(o1);
o1 === o2 // true。

var obj = new Object(123);
obj instanceof Number // true

使い方は似ていますが、「Object(value)」と「new Object(value)」では意味が異なります。「Object(value)」は「value」をオブジェクトに変換したもので、「new Object(value)」はオブジェクトを新たに生成したもの。その値は「value」。

Objectの静的な手法

「静的メソッド」とは、Objectオブジェクト自身に配置されたメソッドのこと。

object . keys()、object . getownpropertynames ()

object . keys方法や . object getownpropertynames方法も使わ遍暦対象の属性。

' object.keys 'メソッドの引数はオブジェクトで配列を返します配列のメンバは、オブジェクト自身の(継承されたのではなく)すべての属性名。

var obj ={
p1: 123,
p2: 456
};

object.keys (obj) // ["p1", "p2"]

object . getownpropertynames方法と . object keys同様、も一つ受ける対象パラメータとして、一つの配列に戻って、この対象自身のすべての属性人が含まれた。

var obj ={
p1: 123,
p2: 456
};

object.getownpropertynames (obj) // [" p1、p2 "]

一般の対象にとって、object . keys() とobject . getownpropertynames() 帰った結果のようだ。結果が異なるのは、列挙できない属性についてのみ。object . keys方法は色々あるの属性に戻るだけ(キョンギド・ソンナムシ『対象の属性の描写対象』の一章)、object . getownpropertynamesは方法は色々ある人の属性に戻った。

var a = ['Hello', 'World'];

object.keys (a) // ["0", "1"]
object.getownpropertynames (a) //[" 1 "、" 1 "、" length]

上のコードのうち、配列のlength属性は、色々あるの属性だけがobject . getownpropertynames方法の結果のうちに帰った。

JavaScriptではオブジェクトの属性の数を計算する方法を提供していないため、この2つの方法で置き換えることができます。

var obj ={
p1: 123,
p2: 456
};

object.keys (obj).length // 2
object.getownpropertynames (obj).length // 2

一般的には、オブジェクトのプロパティをトラバースするために、常に' object.keys 'メソッドを使用します。

その他の方法

上記2つの手法以外にも、オブジェクトにはいくつかの静的な手法がありますので、後述します。

(1)対象属性モデルの相関方法。

object . getownpropertydescriptor():ある属性の描写を対象になった。
object.defineproperty():オブジェクトを記述することで、属性を定義します。
object.defineproperties():オブジェクトを記述することで、複数の属性を定義します。

(2)オブジェクトの状態を制御する方法。

object.preventextensions():オブジェクト拡張を防止します。
object.isextensible():オブジェクトが拡張可能かどうかを判定します。
object.seal():オブジェクト設定を禁止します。
object.issealed():オブジェクトが構成可能かどうかを判定します。
object.freeze():オブジェクトを1つ凍結します。
object.isfrozen():オブジェクトが凍結されているかどうかを判定します。

(3)原型チェーンの相関方法。

object.create():プロトタイプオブジェクトとプロパティを指定し、新しいオブジェクトを返す方法。
object.getprototypeof():オブジェクトのPrototypeオブジェクトを取得します。

Objectの方法の例

静的なメソッド以外にも、いくつかのメソッドがobject.prototypeオブジェクトで定義されています。これらはインスタンスメソッドと呼ばれ、すべてのインスタンスオブジェクトはこれらのメソッドを継承します。

Objectインスタンスオブジェクトの方法には、主に次の6つがあります。

object.prototype.valueof():現在のオブジェクトに対応する値を返します。
object . prototype . tostring():当面の対象に戻った対応のつづり形式。
object . prototype . tolocalestring():当面の対象に対応した地元に戻るつづり形式。
object . prototype . hasownproperty():ある属性判断が自身の属性を当面の対象か、それとも相続は原型対象の属性。
object . prototype . isprototypeof():判断が当面の対象をもう一つの対象の原型のか。
object . prototype . propertyisenumerable():ある属性判断できるかどうかが後を絶たない。

この項では最初の4つを紹介しますが、残りの2つは後述します。

object.prototype.valueof()。

valueOfメソッドはオブジェクトの「値」を返すように機能します。デフォルトではオブジェクト自体を返します。

var obj = new Object();
obj.valueof () === obj // true

上記のコードは obj.valueof()とobj自身を比較したものと同じ。

valueOfメソッドの主な用途は、JavaScriptの自動型変換時にデフォルトで呼び出されること(詳細は「データ型変換」の章を参照)。

var obj = new Object();
1 + obj // "1[object object]"。

上のコードはオブジェクトobjと数字1を足します。この時JavaScriptはデフォルトでvalueOf()メソッドを呼び出し、objの値を求めて1を足します。つまりvalueOfメソッドをカスタマイズすれば結果が得られます

var obj = new Object();
obj.valueof = function () {
return 2;
};

1 + obj // 3

上のコードはobjオブジェクトのvalueOfメソッドをカスタマイズしています1 + objから3が得られますこれは、カスタムの「obj.valueof」で、「object.prototype.valueof」を上書きするようなもの。

object . prototype . tostring ()

toStringメソッドはオブジェクトの文字列形式を返すことで機能しますデフォルトでは型文字列を返します

var o1 = new Object();
o1.tostring () // "[object object]"

var o2 = {a:1};
2.toString() // "[object object]"

上記のコードは、オブジェクトに対して「toString」メソッドを呼び出すと、オブジェクトの型を示す文字列「[object object]」が返されることを示しています。

文字列[object object]自体はあまり役に立ちませんが、カスタムtoStringメソッドを使うことで、オブジェクトを自動型変換時に意図した文字列形式にすることができます。

var obj = new Object();

obj.toString = function () {
return 'hello';
};

obj + ' ' + 'world // "hello world"

上記のコードは、オブジェクトが文字列の加算に使われた場合、自動的に「toString」メソッドが呼び出されることを示しています。toStringメソッドがカスタムされているので文字列hello worldを返します。

配列、つづり、函数、い対象として、それぞれのカスタムを配置したtostring 方法で覆われたobject . prototype . tostring方法。

[1, 2,3].toString() // "1,2,3"

'123'.toString() // "123"

(function(){
return 123;
}).toString()
// "function () {
// return 123;
//}"

(new Date()).toString()
// "Tue May 10 2016 09:11:31 GMT+0800 (CST)"

配列、文字列、関数、Dateオブジェクトは「toString」メソッドを呼び出しますが、「object object」を返すわけではありません。

toString()の応用:データ型の判定

object . prototype . tostring方法対象のタイプにつづり、ために判断できる値のタイプである。

var obj ={};
obj.tostring () // "[object object]"

上のコードはnullオブジェクトのtoStringメソッドを呼び出し、結果として[object object]という文字列を返します。これはデータの型を判断するのに非常に有用な方法。

実例が対象になるカスタムtostring方法、覆われてobject . prototype . tostring方法、タイプを得るためつづり、最高に直接使用object . prototype . tostring方法。関数のcallメソッドを使えば、任意の値でこのメソッドを呼び出すことができ、その値のタイプを判断するのに役立ちます。

Object.prototype.toString.call(value)

上のコードはこの値を呼出すvalue . object prototype . tostring方法。

データの類型別のobject . prototype . tostring方法値はつぎに帰った。

-数値:[object Number]を返します。 -文字列:[object String]を返します。
-ブール値:[object Boolean]`を返します。

undefined: [object undefined]`を返します。
null: [object null]を返します。 -配列:[object Array]を返します。
argumentsオブジェクト:[object arguments]を返します。 -関数:[object Function]を返します。
Errorオブジェクト:[object Error]`を返します。
Dateオブジェクト:[object Date]`を返します。
RegExpオブジェクト:[object RegExp]を返します。 -その他のオブジェクト:[object object]を返します。

つまり、object . prototype . tostring一値が何なのかがうかがえるタイプ。

Object.prototype.toString.call(2) // "[object Number]"
Object.prototype.toString.call('') // "[object String]"
Object.prototype.toString.call(true) // "[object Boolean]"
Object.prototype.toString.call(undefined) // "[object Undefined]"
Object.prototype.toString.call(null) // "[object Null]"
Object.prototype.toString.call(Math) // "[object Math]"
Object.prototype.toString.call({}) // "[object Object]"
Object.prototype.toString.call([]) // "[object Array]"

この特性を利用すれば、typeof演算子よりも正確な型判定関数を書くことができます。

var type = function (o){
  var s = Object.prototype.toString.call(o);
  return s.match(/\[object (.*?)\]/)[1].toLowerCase();
};

type({}); // "object"
type([]); // "array"
type(5); // "number"
type(null); // "null"
type(); // "undefined"
type(/abcd/); // "regex"
type(new Date()); // "date"

上記の「type」関数に加えて、ある種類のデータを特定することに特化した手法を加えることもできます。

var type = function (o){
  var s = Object.prototype.toString.call(o);
  return s.match(/\[object (.*?)\]/)[1].toLowerCase();
};

['Null',
 'Undefined',
 'Object',
 'Array',
 'String',
 'Number',
 'Boolean',
 'Function',
 'RegExp'
].forEach(function (t) {
  type['is' + t] = function (o) {
    return type(o) === t.toLowerCase();
  };
});

type.isObject({}) // true
type.isNumber(NaN) // true
type.isRegExp(/abc/) // true

object . prototype . tolocalestring ()

object . prototype . tolocalestring 方法とtostring 帰還の結果が同じでも一値のつづり形式に帰った。

var obj ={};
obj.tostring (obj) // "[object object]"。
obj.toLocaleString(obj) // "[object object]"

このメソッドの主な役割は、様々なオブジェクトが自分のバージョンの「toLocaleString」を実装し、特定の地域の値を返すインタフェースを残すこと。

var person = {
  toString: function () {
    return 'Henry Norman Bethune';
  },
  toLocaleString: function () {
    return '白';
  }
};

person.toString() // Henry Norman Bethune
person.toLocaleString() // 白

上記のコードでは、toString()メソッドはオブジェクトの一般的な文字列形式を、toLocaleString()メソッドはローカルな文字列形式を返します。

現在、主に3つのオブジェクトがtoLocaleStringメソッドをカスタマイズしています。

−array . prototype . tolocalestring ()
−number . prototype . tolocalestring ()
—い. prototype . tolocalestring ()

例えば、日付のインスタンスオブジェクトの「toString」と「toLocaleString」の戻り値は異なり、「toLocaleString」の戻り値はユーザーが設定した地域と相関します。

var date = new date();
date.tostring () // "Tue Jan 01 2018 12:01:33 GMT+0800 (CST)"
date.tolocalestring () // "1/01/2018, 12:01:33 PM"

object . prototype . hasownproperty ()

object . prototype . hasownproperty方法を一つづりパラメータとして、一ボーア値に戻って、「この実例対象自身この属性を持つかどうか。

var obj ={
p: 123
};

obj.hasOwnProperty('p') // true
obj.hasOwnProperty('toString') // false

上のコードではオブジェクトのobj自体がp属性を持っているのでtrueを返します。toString属性は継承なのでfalseを返します。

##リンク参照

−アクセルrauschmayer、[protecting objects in javascript] (http://www.2ality.com/2013/08/protecting-objects.html)
−kangax、[understanding delete] (http://perfectionkills.com/understanding-delete/)
−jon bretman、[type checking in javascript] (http://techblog.badoo.com/blog/2013/11/01/type-checking-in-javascript/)
——コディlindley、[5 parts thinkingシンク・アバウト・チューecmascript] (http://tech.pro/tutorial/1671/thinking-about-ecmascript-5-parts)
−bjorn tipling、[advanced objects in javascript] (http://bjorn.tipling.com/advanced-objects-in-javascript)

Javier Marquez, [JavaScript properties are enumerable,writable and configurable] (http://arqex.com/967/javascript-properties-enumerable-writable-configurable)
−sella rafaeli、[外国javascriptデーター—binding] (http://www.sellarafaeli.com/blog/native_javascript_data_binding):アクセス関数を使ってmodelとviewの双方向バインディングを実現します
−lea verou、[copying object properties、the robust way] (http://lea.verou.me/2015/08/copying-properties-the-robust-way/)

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up