JavaScript學習筆記之創建物件_javascript技巧

JavaScript には、Date、Array、String などの組み込みオブジェクトがあり、これらは強力で使いやすく、誰もが愛用していますが、複雑なロジックを扱う場合、組み込みオブジェクトは非常に無力です。また、開発者はオブジェクトをカスタマイズする必要があることがよくあります。

JavaScript の定義によれば、オブジェクトは順序付けされていないプロパティのコレクションであり、そのプロパティには基本的な値、オブジェクト、または関数を含めることができます。つまり、オブジェクトは、特定の順序ではない属性のセットであり、値はデータまたはオブジェクトのセットである値にマップされます。

オブジェクトは JavaScript の基本的なデータ型です。 JavaScriptでは文字列、数値、true、false、null、unknown以外の値がオブジェクトとなります。したがって、オブジェクトを理解せずに JavaScript を学習し続けることは非常に困難です。今日からオブジェクトについて学び始めましょう。

概要

オブジェクトは JavaScript の基本的なデータ型であり、データ構造の観点からは、元の値を除くすべての属性の順序付けされていないコレクションと見なすことができます。これらの値には、プロパティ名を通じてアクセスします。プロパティ名には、null 文字を含む任意の文字列を使用できます。簡単に言うと、オブジェクトは属性のコレクションです。属性には名前 (キー) と値 (値) が含まれます。

JavaScript オブジェクトが何であるかを理解するには、次のように考えることができます。 JavaScript では、オブジェクトはプロパティを持つ特定の本体です。あなたが見ている女の子を見てください。この女の子は独自の属性を持っています。たとえば、女の子の身長、年齢、名前などです。同様に、JavaScript では、プロパティを使用してオブジェクトの特性を定義することもできます。

オブジェクトの作成

オブジェクトを学びたいので、まずオブジェクトを持たなければなりません。次に、JavaScript でオブジェクトを作成する方法という疑問が生じます。次に、JavaScript でオブジェクトを作成する方法を見てみましょう。

JavaScript に関する多くの書籍では、主に次のようなオブジェクト作成方法が紹介されています。

オブジェクト リテラルを使用してオブジェクト (キーと値) を作成する

new を使用してオブジェクトを作成します

Object.create() を使用してオブジェクトを作成する

関数を使用してオブジェクトを作成する

プロトタイプを使用してオブジェクトを作成する

オブジェクト リテラルを使用してオブジェクトを作成する

オブジェクト リテラルは、オブジェクトを作成する最も単純な形式であり、多数のプロパティを含むオブジェクトの作成プロセスを簡素化することを目的としています。オブジェクト リテラルは、属性名 (キー) と属性値 (値) のペアで構成されるマッピング テーブルです。キーと値はコロン (:) で区切られ、キーと値の各ペアはカンマ () で区切られます。 ,) マッピング テーブル全体は中括弧 ({}) で囲まれています。

オブジェクト リテラルを使用してオブジェクトを作成するための構文は次のとおりです:

var obj = {
property_1: value_1, // property_# 可能是一个标识符...
2: value_2, // 或者是一个数字
// ...,
"property n": value_n // 或是一个字符串
};

ここで、obj は作成されたオブジェクトの名前、各 property_i は識別子 (名前、数値、または文字列リテラル)、各 value_i はその値であり、この値は property_i に割り当てられます。具体的な例を見てみましょう:

var girl = {
'name': '欣欣',
'age' : 18,
'height': 175,
'weight': 45
}

この例では、girl という名前のオブジェクトを作成します。このオブジェクトには、名前、年齢、身長、体重の 4 つの属性があります。これら 4 つの属性が属性値に対応します。

オブジェクト リテラルを使用してオブジェクトを作成する場合、中括弧 ({}) を空のままにすると、デフォルトのプロパティとメソッドのみを含むオブジェクトを定義できます。例:

var obj = {}

この方法で作成されたオブジェクトを使用する場合、ドット (.) を使用してオブジェクト obj のオブジェクト属性 (obj.key) を作成し、オブジェクトの属性値を割り当てることができます。さらに、角括弧 ([]) を使用してオブジェクト obj のオブジェクト属性 (obj['key']) を作成し、オブジェクトの属性値を割り当てることもできます。以下に例を示します:

var girl = {};
girl.name = '欣欣';
girl.age = 18;
girl['height'] = 175;
girl['weight'] = 45;

Chrome で女の子オブジェクトを印刷すると、出力結果は次のようになります:

console.log(girl);
//Object {name: "欣欣", age: 18, height: 175, weight: 45}

オブジェクトを作成するには new を使用します

new 演算子の後に Object コンストラクターを使用してオブジェクトを作成することもできます (コンストラクターについては後で詳しく説明します)。

var obj = new Object(); // obj = {}

と同じ

obj は初期状態では空のオブジェクトですが、JavaScript では簡単にメンバーを追加して動的に利用できるので、どんどんメンバー変数やメソッドを追加していきます。例:

var girl = new Object();
girl['name'] = '欣欣';
girl['age'] = 18;
girl['height'] = 175;
girl['weight'] = 45;

Object.create() を使用してオブジェクトを作成します

オブジェクトは、Object.create() メソッドを使用して作成することもできます。このメソッドは、コンストラクターを定義せずに、作成されたオブジェクトのプロトタイプ オブジェクトを選択できるため便利です。

Object.create() メソッドは、指定されたプロトタイプといくつかの指定されたプロパティを持つオブジェクトを作成します。

Object.create(proto, [propertiesObject ])

Object.create() メソッドはオブジェクトを作成し、2 つのパラメーターを受け取ります。最初のパラメーターはこのオブジェクトのプロトタイプ オブジェクトです。2 番目のパラメーターは、オブジェクトのプロパティをさらに記述するためのオプションのパラメーターです。この方法は非常に簡単に使用できます:

var obj1 = Object.create({
x: 1,
y: 2
}); //对象obj1继承了属性x和y
var obj2 = Object.create(null); //对象obj2没有原型

如果 proto 参数不是 null 或一个对象值，则抛出一个 TypeError 异常。
有关于Object.create()方法更多的示例可以点击这里进行了解。

使用函数创建对象

在实际使用当中，字面量创建对象虽然很有用，但是它并不能满足我们的所有需求，我们希望能够和其他后台语言一样创建一个类，然后声明类的实例就能够多次使用，而不用每次使用的时候都要重新创建它。

因为JavaScript没有类，一般都是使用函数来定义一个类似其他语言中的类格式，比如：

function Person() {
this.name = "mary"; // 为这个类添加一个成员变量name，并为这个成员变量赋默认值
this.age = 5;
this.sayHello = function () {
console.log(this.name + " : " + this.age);
};
}

定义好类之后，我们就可以像下面这样创建和使用对象：

var person1 = new Person();
person1.name = 'Tom';
person1.age = 20;
person1.sayHello(); // Tom : 20
var person2 = new Person();
person2.name = 'W3cplus';
person2.age = 5;
person2.sayHello(); // W3cplus : 5

Person()函数不是用来被调用的，它是用来被new用的。

通过原型创建对象

这种方法比较前几种方法来说算是最为复杂，最为高级的方法。这里还涉及到封装的一些知识(有关于这些后续学习到了再记录)。这里简单看看如何通过原型创建对象。

首先像函数方法创建对象一样，先定义一个函数：

function Person() {
this.name = "W3cplus";
this.age = 5;
this.walk = function () {
console.log("一个前端网站...");
};
}

然后在外部可以扩允成员：

//添加成员方法
Person.prototype.sayHello = function () {
console.log("hello");
};
//也可以添加成员属性，
Person.prototype.height = 100;

一方面，原型可以扩充原有类的功能(特别是添加有用方法)，也可以像下面这样写:

function Person() { }
Person.prototype.name = "W3cplus";
Person.prototype.age = 5;
Person.prototype.walk = function () {
console.log("一个前端网站...");
};
Person.prototype.sayHello = function () {
console.log("hello");
};
Person.prototype.height = 100;

属性访问

对象属性访问一般有两种方法，第一种是使用点(.)表示法，这也是最常用的一种方法，也是很多面向对象语言中通用的语法。第二种方法还可以使用中括号([])表示法来访问对象的属性。在使用中括号语法时，应该将要访问的属性以字符串的形式放在中括号中。如下：

person['name'];
person.name;

从功能上来说，上面两种方法访问对象属性没有任何区别。但中括号语法的主要优点有两个：

可能通过变量访问属性，如下：

var propertyName = 'name';
person[propertyName];

另外一个优点是，如果属性名中包含了会导致语法错误的字符或者属性名使用的是关键字或保留字，可以使用中括号访问属性，如下：

person['first name'];

一般情况之下，除非必须使用亦是来访问对象属性，否则建议使用点(.)的方法来访问对象属性。

总结

对象是JavaScript的基本数据类型，如果要更好的往下学习JavaScript相关的知识，很有必要先把对象整明白。这篇主要介绍了几种创建对象的方法。较为简单的是通过字面量({})和new Object()方法创建，但这两种方法创建的对象复用性较差；使用Object.create()创建对象时不需要定义一个构造函数就允许你在对象中选择其原型对象。除了这几种方法还可以使用函数和原型创建对象，而这两种方法相对来说可复用性强，只是使用较为复杂。

有关JavaScript学习笔记之创建对象的知识小编就给大家介绍到这里，希望对大家有所帮助！