JavaScript オブジェクトの取得を支援します-jsチュートリアル-php.cn

この記事では、javascript に関する関連知識を提供します。主に、コンストラクターやさまざまな組み込みオブジェクトに関する知識ポイントなど、オブジェクトに関する関連問題を紹介します。皆様のお役に立てれば幸いです。

JavaScript オブジェクトの取得を支援します

#関連する推奨事項:

javascript チュートリアル

1. コンストラクター

コンストラクターを使用する理由

コンストラクターとは: JavaScript がオブジェクトを作成する別の方法です。

リテラルメソッドを使用したオブジェクトの作成との比較: コンストラクターは、同じ特性を持ついくつかのオブジェクトを作成できます。

例: フルーツコンストラクターを使用して、リンゴ、バナナ、オレンジのオブジェクトを作成します。その特徴は、これらのオブジェクトがすべて同じテンプレートに基づいて作成されており、それぞれのオブジェクトが独自の特性を持っていることです。

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

利点: シンプルで柔軟です。
欠点: 同じ特性を持つオブジェクトのセットを作成する必要がある場合、これらのオブジェクトがどのメンバーを持つ必要があるかをコードを通じて指定することはできません。
オブジェクト指向プログラミング言語でテンプレートを実装する方法: クラスを使用してテンプレートを作成し、そのテンプレートに基づいてさまざまなオブジェクト (クラスのインスタンス) を実装します。
JavaScript でテンプレートを実装する方法 1: ファクトリ関数を通じて、オブジェクトはリテラル "{ }" によって内部的に作成されますが、欠点は、オブジェクトの型を区別できないことです。
JavaScript によるテンプレートの実装方法 2: コンストラクターを使用してオブジェクトを作成します。

JavaScript の組み込みコンストラクター

コンストラクターをカスタマイズする方法を学ぶ前に、まず JavaScript の組み込みコンストラクターの使用方法を見てみましょう。

コンストラクターがオブジェクトを作成する方法: 新しいコンストラクター名 ()。
インスタンス化とインスタンスとは: new キーワードを使用してオブジェクトを作成するプロセスをインスタンス化と呼び、インスタンス化後に取得されるオブジェクトをコンストラクターのインスタンスと呼びます。

JavaScript オブジェクトの取得を支援します

console.log() を通じて出力される場合、[ネイティブコード] は関数のコードが組み込みであることを示します。

カスタムコンストラクター

考え: コンストラクターをカスタマイズするにはどうすればよいでしょうか?

コンストラクター内で、これを使用して、作成したばかりのオブジェクトを表します。

JavaScript オブジェクトの取得を支援します

#注意

JavaScript を学習するとき、初心者は関数、メソッド、メソッドなどの類似した名詞によって混乱することがよくあります。コンストラクター、コンストラクター、コンストラクターなど。

実際、これらはすべてまとめて関数と呼ぶことができますが、使用シナリオごとに異なる名前が付けられます。慣例により、オブジェクト内で定義された関数はオブジェクトのメソッドと呼ばれます。

コンストラクターについては、コンストラクターまたはコンストラクターと呼び慣れている人もいますが、これらの名前は同じものを指していることを理解するだけで済みます。

ES6 の新しいクラスキーワード

Note

クラス構文は本質的には糖衣構文であり、ユーザーが使いやすいように設計されています。この構文を使用すると、その効果は前に学習したコンストラクターと似ています。ユーザーのブラウザがこの構文をサポートしていない場合、この方法はお勧めできません。

プライベートメンバー

概念: コンストラクターでは、var キーワードを使用して定義された変数はプライベートメンバーと呼ばれます。

特徴: インスタンスオブジェクト以降は、「object.member」を通じてアクセスできませんが、プライベートメンバーにはオブジェクトの member メソッドでアクセスできます。

特徴: プライベートメンバー名はオブジェクト指向のカプセル化を反映しています。

JavaScript オブジェクトの取得を支援します 2. 組み込みオブジェクト

String オブジェクト

文字データの作成を確認します。単一のオブジェクトのペアを使用します。引用符または二重引用符。

文字データをオブジェクトのように使用できるのはなぜですか?
これは、これらのオブジェクトが実際にはコンストラクター String のインスタンス、つまり String オブジェクトであるためです。

String オブジェクトは、文字列を処理するためのいくつかのプロパティとメソッドを提供します。

JavaScript オブジェクトの取得を支援します

#注意

文字列を操作する場合、処理結果はメソッドの戻り値を通じて直接返されます。 String オブジェクト自体に格納されている文字列の内容は変更されません。これらのメソッドのパラメーターでは、位置は 0 から数えたインデックス値であり、最初の文字のインデックス値は 0、最後の文字のインデックス値は文字列の長さから 1 を引いたものになります。

ユーザー名の長さを 3 ～ 10 に制限し、機密性の高い単語「admin」の表示を許可しない例を考えてみましょう。

JavaScript オブジェクトの取得を支援します #Number オブジェクト

Number オブジェクトは、整数、浮動小数点数、その他の数値を処理するために使用されます。一般的に使用されるプロパティとメソッド以下の通り。

JavaScript オブジェクトの取得を支援します

JavaScript オブジェクトの取得を支援しますは Number の静的メンバーであり、Number のインスタンスではなく、コンストラクター Number を通じて直接アクセスされます。

Math オブジェクト

Math オブジェクトは、数値に対して数学的演算を実行するために使用されます。他のオブジェクトとは異なり、このオブジェクトはコンストラクターではないため、使用するためにインスタンス化する必要はありません。

JavaScript オブジェクトの取得を支援します例として、指定された範囲内の乱数を取得する Math.random() を取り上げます。

式は Math.random() * (n - m) m です。これは、m 以上、n 未満のランダムな値を生成することを意味します。

Date オブジェクト

Date オブジェクトは、日付と時刻を処理するために使用されます。

JavaScript オブジェクトの取得を支援します

#例 1: Date オブジェクトに基づいて時刻と日付を取得します。 JavaScript オブジェクトの取得を支援します

JavaScript オブジェクトの取得を支援します

#例 2: Date オブジェクトに基づいて日付を指定します。

JavaScript オブジェクトの取得を支援します

#例 3: 日付の設定が無理な場合の対処例: たとえば、月を -1 に設定すると、昨年の 12 月を意味します。、12という月は来年の1月を意味します。

JavaScript オブジェクトの取得を支援します

#ケース: 月間カレンダーの作成

コード実装のアイデア:

JavaScript オブジェクトの取得を支援します

現在の月の 1 日に日付オブジェクトを構築します。

1日が何曜日であるかを決めて、最初の行を書きます。

JavaScript オブジェクトの取得を支援します今月の残りについて書きます。

コードの実装

	
	<title>本月月历</title>
	
	
	<p><b>本月月历</b></p>
	<script>
	var thisyear,thismonth,today=new Date();;
	thisyear=today.getFullYear()
	thismonth=today.getMonth();
	
	var imonth,iweekday,iday,nextday;
	document.write("<table align=center border=1><tr align=center bgcolor=#fff00>")
	document.write("<td>周日<td>周一<td>周二<td>周三<td>周四<td>周五<td>周六")
	document.write("<tr>")
	nextday=1;
	var thisdate=new Date(thisyear,thismonth,nextday)
	for (iday=0;iday<=6;iday++){
	if (thisdate.getDay() > iday) {
	document.write("<td>");
	document.write("")
	}
	else {
	if (thisdate.getMonth()== today.getMonth()&&thisdate.getDate()== today.getDate() &&thisdate.getFullYear()== today.getFullYear() ){
	document.write("<td><font color=red><b>")
	document.write(nextday)
	document.write("")
	}
	else {
	document.write("<td><b>");
	document.write(nextday);
	document.write("");
	}
	nextday=nextday+1;
	thisdate.setDate(nextday);
	}
	}
	
	document.write("");
	document.write("<tr>")
	iweekday=1
	while(thisdate.getMonth() == thismonth ){
	if (thisdate.getMonth()== today.getMonth()&&thisdate.getDate()== today.getDate() &&thisdate.getFullYear()== today.getFullYear() ){
	document.write("<td><font color=red><b>")
	document.write(nextday)
	document.write("")
	}
	else{
	document.write("<td><b>")
	document.write(nextday)
	document.write("")
	}
	nextday=nextday+1;
	iweekday=iweekday+1;
	if (iweekday>7 ){
	iweekday=1;
	document.write("");
	}
	thisdate.setDate(nextday);
	}
	
	</script>

ログイン後にコピー