【おすすめ】JavaScript オブジェクト指向技術の基礎チュートリアル_js オブジェクト指向

結果としては、長い間読んだ後、慎重に検討した結果、全体的な理解は得られましたが、何も理解していないようです...
この記事は<>第 7 章、第 8 章、および第 9 章でも、
JavaScript のオブジェクト指向技術を元の本の構造 (オブジェクト/配列->関数-) に従って説明できるよう最善を尽くします。 ->class/constructor/Prototype) 一部分からない部分は参考に原文の英語文を添付します
特に説明がない場合は全て英語の文章です(プログラムを除く)。本文中）は
から引用しています。 --------- --------------------
オブジェクトと配列
オブジェクトとは何ですか?ユニット内では、オブジェクトが形成されます。JavaScript の
のオブジェクトは、「キーと値」のペアのコレクションであることがわかります (オブジェクトは、名前付きの値のコレクションです。これらの名前付きの値は、通常、
はオブジェクトのプロパティとして参照されます。 -- セクション 3.5)。
"Name" は文字列型のみであり、他の型は使用できません。プロパティの型は
any (数値) です。 /string/other オブジェクト。)。 new Object() を使用して空のオブジェクトを作成することも、単に "{}" を使用して
の空のオブジェクトを作成することもできます。 🎜>

コードをコピーします コードは次のとおりです:

var emptyObject1 = {}; //空のオブジェクトを作成します

var emptyObject2 = new Object( ); //空のオブジェクトを作成します
var person = {"name":"sdcyst",
"age":18,
"sex":"male" }; //初期値を含むオブジェクトを作成します person
alert(person.name) //sdcyst
alert(person["age"]); //18


上記の例からもわかるように、オブジェクトのプロパティにアクセスするには、オブジェクト名と「.」の後にプロパティの名前を続けるか、「[]」演算子を使用して取得することができます。このとき、[]内のプロパティ名は引用符で囲む必要があります。これは、オブジェクト内のインデックスがすべて文字列型であるためです。オブジェクトを作成した後、任意の属性を割り当てることができます。

コードをコピー コードは次のとおりです:

var person = {};

person.name = "sdcyst";
person[" age"] = 18;
alert(person.name "__" person.age); _person = {name:"balala","age":23}; //オブジェクトを使用する場合、属性の名前は引用符なしでマークできます (name)、
//ただし、文字列型。 []
alert(_person["name"] " __" person.age); //balala__23
alert(_person[name]);未定義
var person = {};
person.name = "sdcyst";
person[" age"] = 18;
alert(person.name "__" person.age); /sdcyst__18
var _person = {name:"balala","age":23}; //オブジェクトを使用する場合、属性の名前は引用符なしでマークできます (name),
//ただし、アクセスする場合は依然として文字列型です。 []
alert(_person["name"] " __" person.age); //balala__23
alert(_person[) name]); //未定義


「.」演算子を使用してオブジェクトの属性を取得するには、属性の名前を知っている必要があります。一般に、「[]」演算子は

[] に式を入れて属性の値を取得できます。
たとえば、ループ制御ステートメントで使用できます。この柔軟性がありません。

コードをコピー コードは次のとおりです。 var name = {"name1":" NAME1", "name2":"NAME2","name3":"NAME3","name4":"NAME4"};

var namestring = "";

for(var props in name) { //ループ名オブジェクト
namestring = name[props];
alert(namestring) //NAME1NAME2NAME3NAME4

namestring = ""; =0; inamestring = name["name" (i 1)]
alert(namestring); delete 演算子 オブジェクト内の属性を削除し、「in」演算子を使用して属性が存在するかどうかを判断できます。




コードをコピー

コードは次のようになります:

var name = {"name1":"NAME1","name2":"NAME2","name3":"NAME3","name4":"NAME4"};
var namestring = " ";
for(var props in name) { //名前オブジェクト内のプロパティ名をループします
namestring = name[props];
}
alert(namestring); //NAME1NAME2NAME3NAME4

delete name.name1; //name1 属性を削除
delete name["name3"] //name3 属性を削除
namestring = ""
for(var props in name); / 名前オブジェクト内のプロパティ名をループします
namestring = name[props];
alert(namestring) //NAME2NAME4

alert("name1" in name); //false
alert("name4" in name); //true

オブジェクト内の属性は順序どおりではないことに注意してください。

オブジェクトの属性
each JavaScript オブジェクトにはコンストラクター属性があります。この属性は、オブジェクトが初期化されるときのコンストラクターに対応します (関数もオブジェクトです)。 >コードをコピーします

コードは次のとおりです: var date = new Date(); //Date >alert(date.constructor == "日付"); / /false alert(date.constructor == Date); //true

配列
についてはすでに述べました。オブジェクトは順序付けられていないデータのコレクションですが、配列内のデータ (要素) はインデックス (0 から始まります) によってアクセスされます。
配列内のデータは任意のデータ型にすることができます。配列自体は依然としてオブジェクトですが、配列の多くの特性により、通常、
これは、JavaScript プログラミングのほとんどにおいて、オブジェクトと配列を別個の型として扱うことができます
。完全に理解するにはオブジェクトと配列の動作については、
ただし、真実を知っておく必要があります。配列は、追加の

機能の薄い層を備えたオブジェクトにすぎません。これは、typeof 演算子を使用して確認できます。配列値の場合、
文字列「object」を返します。 --section7.5)。
「[]」演算子を使用して配列を作成するか、Array() コンストラクターを使用して新しい配列を作成できます。

Js コード




コードをコピー


コードは次のとおりです:

var array1 = []; //空の配列を作成しますvar array2 = new Array() //空の配列を作成しますarray1 = [1,"s",[3,4], {"name1" :"NAME1"}]; // alert(array1[2][1]); //4 配列内の配列要素にアクセスします。 alert(array1[3].name1);配列内のオブジェクト alert(array1[8]); //未定義

array2 = [,,]; //値がなく、カンマのみが入力されている場合、対応するインデックスの要素は未定義です

alert(array2.length); //3
alray2[1]); //未定義
var array1 = [] // 空の配列を作成します
var array2 = new Array (); // 空の配列を作成します
array1 = [1,"s",[3,4],{"name1":"NAME1"}] //
alert(array1[2][ 1]); //4 配列内の配列要素にアクセスします
alert(array1[3].name1); //NAME1 配列内のオブジェクトにアクセスします
alray1[8]);
array2 = [ ,,]; //数値がなくカンマのみの場合、対応するインデックスの要素は未定義です
alert(array2.length) //3
alray2[ 1]); //未定義


new Array() を使用して配列を作成する場合、デフォルトのサイズ、現時点では未定義の値を指定できます。ただし、JavaScript の

により、配列の長さは任意に変更でき、配列の内容も任意に変更できるため、実際には初期化された長さは変わりません。配列に何らかの拘束力がある場合、インデックスが最大長を超えると、割り当てによって配列の長さが変更され、割り当てのないインデックスに未定義が割り当てられます
。以下の例を参照してください。 🎜>
Js コード

コードをコピー


コードは次のとおりです:


var 配列= new Array(10); //10

alray(array[4]); //未定義 array[100] = "100 番目";配列の長さを変更し、インデックス 10 ～ 99 に対応する値を未定義に設定します。 alert(array .length) //101 alray[87]); // >var array = new Array(10); //10 alray(array[4]); //未定義 array[100]; /この操作は配列の長さを変更し、インデックス 10 ～ 99 に対応する値を未定義に設定します。 alert(array .length) //101

alray[87]);未定義

delete 演算子を使用して配列の要素を削除できます。この削除では、その位置にある配列の要素が未定義に設定されるだけであり、配列の長さは変更されないことに注意してください。配列の長さ属性がすでに使用されている場合、長さ属性は読み取り/書き込み属性です。つまり、長さが に設定されている場合、配列の長さ属性を変更することで配列の長さを任意に変更できます。配列の長さより小さい値の場合、元の配列の長さ-1 より大きいインデックスを持つ値は削除されます。長さ
の値が元の配列の長さより大きい場合、

Js コード

コピーコード コードは次のとおりです。 var array = new Array("n1","n2","n3"," n4","n5"); //5 つの要素の配列

var astring = "" ;

for(var i=0; iastring = array[i];
alert(astring);
delete array[3]; //配列要素の値を削除します
alert(array.length "_" array[3]) //5_unknown

array.length = 3; /配列の長さを減らします
alray(array[3]); //未定義
array.length = 8; / /配列の長さを拡張します
alray[4]); /unknown
var array = new Array("n1","n2","n3","n4","n5"); / /5 つの要素の配列
var astring = ""; for(var i=0; iastring = array[i]>}
alert(astring) //n1n2n3n4n5
削除array[3]; //配列要素の値を削除します
alert(array.length "_" array[3]) //5_unknown

array.length = 3;配列
alert(array[3]); //未定義
array.length = 8; //配列の長さを拡張します
alert (array[4]); >

join/reverse などのその他の配列のメソッドについては、ここでは 1 つずつ例を示しません。

上記の説明を通じて、 の属性値が得られることはすでにわかっています。オブジェクトは属性の名前 (文字列型) を通じて取得され、配列の要素はインデックス
(整数型 0~~2**32-1) を通じて取得されます。配列自体もオブジェクトです。 、したがって、オブジェクトのプロパティの操作は配列に完全に適しています

コードをコピーします


コードは次のとおりです。次のように:

var array = new Array("no1","no2"); array["po"] = "props1"; ; //2 //配列の場合、array[0] は array["0"] と同じ効果があります (? よくわかりませんが、テスト中は当てはまります) alert(array[0] "_ " array["1"] "_" array.po);//no1_no2_props1

関数

誰もがたくさんの JavaScript 関数を書いたと思うので、ここでは単純に説明します。
関数の作成:




コードをコピーします。

コードは次のとおりです:


function f( x) {....}

var f = function(x) {....} 上記の 2 つの形式は両方とも、 f()関数という名前のファイルですが、後者の形式は匿名関数を作成することができます 関数定義時にパラメータを設定できますが、関数に渡されるパラメータの数が足りない場合は、左から順に対応します。関数 に関数で定義されたパラメータの数よりも多くのパラメータがある場合、残りのパラメータは無視されます。

コードをコピー


コードは次のとおりです。


function myprint(s1,s2,s3) {

alert(s1 "_" s2 "_" s3 ); } myprint("string1","string2"); >myprint("string1","string2","string3", "string4"); //string1_string2_string3 function myprint(s1,s2,s3) { alert(s1 "_" s2 "_" s3) ); } myprint(); // unknown_unknown_unknown

myprint("string1","string2"); //string1_string2_unknown

myprint("string1","string2","string3", "string4"); //string1_string2_string3


したがって、定義された関数の場合、呼び出し元がすべてのパラメーターを渡すことは期待できません。使用する必要があるパラメーターは関数本体でチェックする必要があります。 🎜> (! 演算子を使用)、またはデフォルトに設定します。その後、値をパラメータで or (||) 演算してパラメータを取得します。 >


コードをコピー


コードは次のとおりです:

function myprint(s1,person) {
vardefaultperson = { //デフォルトの person オブジェクト
"name":"name1",
"age":18,
" sex":"女性"
};
if(!s1) { //s1 を空にすることはできません
alert("s1 は入力する必要があります!");
return false;
}
person = person || //person オブジェクトパラメータ
alert(s1 "_" person.name ":" person.age ":" person.sex);

myprint(); //s1 を入力する必要があります!
myprint("s1"); //s1_name1:18:女性
myprint("s1",{"name":"sdcyst) ", "年齢":23,"性別":"男性"}); //s1_sdcyst:23:男性
function myprint(s1,person) {
vardefaultperson = { //デフォルトの人物オブジェクト
" name":"name1",
"age":18,
"性別":"女性"
};
if(!s1) { //s1 は許可されませんempty
alert("s1 を入力する必要があります!");
return false;
}
person = person || 人物オブジェクトパラメータ
alert(s1 "_") person.name " :" person.age ":" person.sex);

myprint(); //s1 を入力する必要があります。 /s1_name1:18 :女性
myprint("s1",{"名前":"sdcyst","年齢":23,"性別":"男性"}); //s1_sdcyst:23:男性


関数の argument 属性
各関数本体内には、Arguments オブジェクトを表す引数識別子があります。Arguments オブジェクトは、Array (配列) オブジェクトと非常によく似ています。例 length 属性にその値にアクセスするには、「[]」演算子を使用してインデックスを使用してパラメータ値にアクセスします。ただし、この 2 つはまったく異なる

ものであり、表面上の類似点があるだけです (たとえば、 、Arguments オブジェクト属性の長さを変更しても、その長さは変わりません)。コードは次のとおりです。


function myargs() {
alert(arguments.length)
alert(arguments[0]); ); //0 --- 未定義
myargs("1",[1,2]); //2 --- 1
関数 myargs() {

alert(arguments.length); alert(arguments[0] ); } myargs(); //0 --- 未定義 myargs("1",[1,2]); - 1 Arguments オブジェクトには callee 属性があり、現在の Arguments オブジェクトが配置されているメソッドをマークします。これを使用して、

Js コード

コードをコピー


コードは次のとおりです:


function(x) {
if (x <= 1) 1 を返す;
return x * argument.callee(x -1);
} (セクション 8.2)
function(x) {

if (x return x * argument.callee(x-1);
} (セクション 8.2)

メソッド - メソッド メソッドは関数であることがわかります。すべてのオブジェクトには 0 個以上の属性が含まれており、その属性には任意の型を含めることができます。もちろん、関数自体も オブジェクトに含めることができます。関数はオブジェクトのメソッドになります。今後このメソッドを使用する場合は、Js コード

を実行できます。 >


コードをコピー


コードは次のとおりです:


var obj = {f0:function(){alert("f0") ;}}; // オブジェクトにはメソッドが含まれています

function f1() {alert("f1" );}
obj.f1 = f1; // オブジェクトにメソッドを追加します

obj.f0(); //f0 f0 は obj
obj.f1() のメソッドです。 //f1 f1 は obj
f1() のメソッドです。直接呼び出すことができます
f0(); //f0 は obj のメソッドにすぎず、オブジェクトを通じてのみ呼び出すことができます
var obj = {f0:function(){alert("f0");}}; // オブジェクトにはメソッドが含まれています

function f1() {alert("f1");} obj.f1 = f1 ; // オブジェクトにメソッドを追加します obj.f0( ); //f0 f0 は objobj.f1() のメソッドです。 //f1 f1 は objf1() のメソッドです。 //f1 f1 も関数であり、f0(); //f0 は obj のメソッドにすぎず、オブジェクトを通じてのみ呼び出すことができます。 メソッドの呼び出しにはオブジェクトのサポートが必要なので、オブジェクトのプロパティを取得する方法JavaScript メソッド

では、 this を使用してメソッド呼び出し元 (オブジェクト) への参照を取得し、それによってメソッド呼び出し元

のさまざまな属性を取得できます。


Js コード




コードをコピー


コードは次のとおりです:

var obj = {"name":"名前","性別":"女性"};
obj.print = function() { //オブジェクトにメソッドを追加します
alert (この .name "_" this["性別"]);
}
obj.print(); //NAME_女性
obj.sex = "男性"; ); //NAME_男
var obj = {"name":"NAME","性別":"女性"};
obj.print = function() { //オブジェクト
alert にメソッドを追加します(この .name "_" this["性別"]);
}
obj.print(); //NAME_女性
obj.sex = "男性"; ); //NAME_male


よりオブジェクト指向の例を見てみましょう。

コードをコピーします。 >

コードは次のとおりです: var person = {name:"defaultname", setName:function(s){ this.name = s ;

},

"printName":function(){
alert(this.name);
}}
person.printName(); ("newName" );
person.printName(); //newName
var person = {name:"defaultname",
setName:function(s){
this.name = s;
} ,
"printName":function(){
alert(this.name);
}}
person.printName(); //defaultname
person.setName( "newName") ;
person.printName(); //newName


上記の例では、person.name=.. を使用して person の name 属性を直接変更できます。
person 属性を変更するもう 1 つの方法は、次のような 2 つのパラメーター (1 つは person、もう 1 つは name の値) を受け取る関数を定義することです。 changeName (person, "newName") どちらのメソッドが優れているでしょうか? 明らかに、この例のメソッドの方がより鮮明で直感的であり、

を少し重視しているように見えます。もう一度説明しますが、メソッド自体は関数ですが、次のページで関数が言及されている場合、メソッドの使用はより制限されています。
で言及されている内容はメソッドにも適用されますが、逆には適用されません。

関数のプロトタイプ属性
各関数には、オブジェクト指向 JavaScript の基礎となるプロトタイプ (プロトタイプ) 属性が含まれています。