ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScriptのオブジェクトを深く理解する_基礎知識
JavaScriptのオブジェクトを深く理解する_基礎知識
- WBOYオリジナル
- 2016-05-16 15:56:471123ブラウズ
JavaScript はオブジェクト指向プログラミング (OOP) 言語です。プログラミング言語はオブジェクト指向と呼ばれ、開発者に次の 4 つの基本機能を提供します。
- カプセル化 - データ、メソッド、オブジェクトなど、関連情報を保存します
- 集約 - 1 つのオブジェクトを別のオブジェクト内に格納します
- 継承 - クラスがそのプロパティやメソッドの一部について別のクラス (または複数のクラス) に依存する能力
- ポリモーフィズム - さまざまな方法で機能する関数またはメソッドを作成する
オブジェクトはプロパティで構成されます。プロパティに関数が含まれている場合、それはオブジェクトのメソッドとみなされ、それ以外の場合、プロパティはプロパティとみなされます。
オブジェクトのプロパティ:
オブジェクトのプロパティは、3 つの基本データ型のいずれか、または別のオブジェクトなどの抽象データ型にすることができます。オブジェクトのプロパティは通常、オブジェクトのメソッドによって内部的に使用される変数ですが、グローバルに使用され、ページ全体で表示される変数にすることもできます。
属性を追加するための構文は次のとおりです:
objectName.objectProperty = propertyValue;
例:
次は、ファイル オブジェクトの "title" プロパティを使用してドキュメントのタイトルを取得する方法を示す簡単な例です。
var str = document.title;
オブジェクトメソッド:
メソッドはオブジェクトに何かをするように指示します。関数とメソッドにはほとんど違いはありませんが、関数ステートメントが独立した単位であり、メソッドがオブジェクトに付加され、このキーワードを通じて参照できる点が異なります。
メソッドは、オブジェクトの画面上のコンテンツの表示から、プロパティやパラメーターのローカル セットに対する複雑な数学的演算の実行まで、あらゆる用途に役立ちます。
例:
これは、ドキュメント オブジェクトの write() メソッドを使用してドキュメントにコンテンツを書き込む方法を示す簡単な例です。
document.write("This is test");
ユーザー定義オブジェクト:
すべてのユーザー定義オブジェクトと組み込みオブジェクトは、オブジェクトの子孫と呼ばれます。
新しい演算子:
new 演算子は、オブジェクトのインスタンスを作成するために使用されます。オブジェクトを作成するには、new 演算子の後にコンストラクター メソッドを続けます。
次の例では、コンストラクター メソッドは Object()、Array()、および Date() です。これらのコンストラクターは組み込みの JavaScript 関数です。
var employee = new Object();
var books = new Array("C++", "Perl", "Java");
var day = new Date("August 15, 1947");
Object() コンストラクター:
コンストラクターは、オブジェクトの作成と初期化に使用される関数です。 JavaScript は、オブジェクトを構築するための Object() と呼ばれる特別なコンストラクターを提供します。 Object() 構造の戻り値は変数に割り当てられます。
変数には新しいオブジェクトへの参照が含まれています。このオブジェクトに割り当てられたプロパティは不変であり、var キーワードを使用して定義されません。
例 1:
この例は、オブジェクトの作成方法を示しています:
<html>
<head>
<title>User-defined objects</title>
<script type="text/javascript">
var book = new Object(); // Create the object
book.subject = "Perl"; // Assign properties to the object
book.author = "Mohtashim";
</script>
</head>
<body>
<script type="text/javascript">
document.write("Book name is : " + book.subject + "<br>");
document.write("Book author is : " + book.author + "<br>");
</script>
</body>
</html>
例 2:
この例は、オブジェクトとユーザー定義関数を作成する方法を示します。ここで、 this キーワードは、関数に渡されたオブジェクトを参照するために使用されます:
<html>
<head>
<title>User-defined objects</title>
<script type="text/javascript">
function book(title, author){
this.title = title;
this.author = author;
}
</script>
</head>
<body>
<script type="text/javascript">
var myBook = new book("Perl", "Mohtashim");
document.write("Book title is : " + myBook.title + "<br>");
document.write("Book author is : " + myBook.author + "<br>");
</script>
</body>
</html>
オブジェクト定義メソッド:
前の例は、コンストラクターがオブジェクトを作成し、プロパティを割り当てる方法を示しています。ただし、オブジェクトの定義を完了するには、割り当てメソッドを使用する必要があります。
例:
オブジェクトに関数を追加する方法を示す簡単な例を次に示します。
<html>
<head>
<title>User-defined objects</title>
<script type="text/javascript">
// Define a function which will work as a method
function addPrice(amount){
this.price = amount;
}
function book(title, author){
this.title = title;
this.author = author;
this.addPrice = addPrice; // Assign that method as property.
}
</script>
</head>
<body>
<script type="text/javascript">
var myBook = new book("Perl", "Mohtashim");
myBook.addPrice(100);
document.write("Book title is : " + myBook.title + "<br>");
document.write("Book author is : " + myBook.author + "<br>");
document.write("Book price is : " + myBook.price + "<br>");
</script>
</body>
</html>
キーワード付き:
with キーワードは、オブジェクトのプロパティまたはメソッドを参照するための省略表現として使用されます。
パラメータとして指定されたオブジェクトは、次のブロックの間、デフォルトのオブジェクトになります。オブジェクトのプロパティとメソッドは、名前のないオブジェクトにあります。
文法
with (object){
properties used without the object name and dot
}
例:
<html>
<head>
<title>User-defined objects</title>
<script type="text/javascript">
// Define a function which will work as a method
function addPrice(amount){
with(this){
price = amount;
}
}
function book(title, author){
this.title = title;
this.author = author;
this.price = 0;
this.addPrice = addPrice; // Assign that method as property.
}
</script>
</head>
<body>
<script type="text/javascript">
var myBook = new book("Perl", "Mohtashim");
myBook.addPrice(100);
document.write("Book title is : " + myBook.title + "<br>");
document.write("Book author is : " + myBook.author + "<br>");
document.write("Book price is : " + myBook.price + "<br>");
</script>
</body>
</html>