Javascript オブジェクト指向プログラミング_js オブジェクト指向-jsチュートリアル-php.cn

JavaScript の重要性
使用率
1. Web アプリケーションでは、フロントエンドインターフェイスのプログラミングに関しては、基本的に JavaScript 言語が使用されます。
2. Ajax は JavaScript 言語を推進しました。
3. 多数の C/S アプリケーションが B/S に切り替わり、リッチクライアントテクノロジが継続的に推進されることで、JavaScript 言語の適用範囲は拡大し続けます。
JavaScript の特徴
単純
動的
オブジェクトベース (オブジェクト指向)

JavaScript オブジェクト指向の概要
JavaScript は、オブジェクト指向 (ベース) の動的スクリプト言語です。セキュリティ機能を備えたイベント駆動型 (EventDriven) スクリプト言語。カプセル化、継承、ポリモーフィズムなど、オブジェクト指向言語に特有のさまざまな機能を備えています。しかし、ほとんどの人にとって、JavaScript は関数型言語としてのみ使用され、単純なフロントエンドのデータ入力の検証と、いくつかの単純なページの動的効果を実現するためにのみ使用されます。動的言語のさまざまな特徴を完全には理解していません。
ExtJS や JQuery などの多くの優れた Ajax フレームワークでは、JavaScript のオブジェクト指向機能が広く使用されており、ext テクノロジーを活用するために、JavaScript の高度な機能とオブジェクト指向言語の機能が利用されています。私たちがしっかりと把握しなければならないこと。

JavaScript の関連知識
JavaScript の開発の歴史
JavaScript の 3 つの主要コンポーネント
ECMAScript
構文データ型ステートメントキーワード予約語演算子オブジェクト
DOM (ドキュメントオブジェクトモデル)
BOM (ブラウザオブジェクトモデル)

JavaScript の柔軟な機能についての議論
1. 動的言語の精神的なテスト
JavaScript は非常に柔軟な機能を備えた動的言語であり、それを簡単に使用するには、その動的特性を柔軟に習得して適用する必要があります。
次の出力を検討します

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

 Animal(name) { 
this.name=name; 
var a1=Animal;// 出力: 
var a2=Animal(); //出力: 
var a3=new Animal();//出力: 
var a4=new Animal;//出力: 

のデータ型Javascript
基本データ型
数値 (数値)
文字列 (文字列)
ブール値
特別な値 (null、未定義、NaN)。
オブジェクトタイプオブジェクト
オブジェクトは、基本的な型、オブジェクト、関数などを含むことができます。配列はオブジェクトタイプです。 JavaScript では、クラスも含めてすべてがオブジェクトであると言えます。。
var c=new Object();
1. 数値型
数値型は、すべての言語に存在する基本的なデータ型です。 Int) と浮動小数点 (Float) の 2 つの型がありますが、実際にはどちらの型も浮動小数点の形式でメモリに格納されます。 JavaScript の数値型は通常、プログラム内で数値定数の形式で表示され、110、150 など、0 から 9 までの 10 個の数値で構成される 10 進数データに基づいており、16 進数の 0x で始まることもあります。データ (0 ～ 9 および a ～ f の 16 文字で構成される)。たとえば、0xff を 10 進数に変換すると 255 (つまり、15*16 15 = 255) になります。一部の JavaScript 実装では、8 進データ、つまり 0 で始まるデータもサポートされます。 (0から7までの8つの数字で構成されます) たとえば、8進数データ0377を10進数に変換すると、(3*64 7*8 7 = 255)となります。
2. 文字型
文字列は、さまざまな文字、数値、および特殊な文字列で構成されます。一重引用符または二重引用符をプログラム内で直接使用して文字列定数を生成できます。文字列に復帰文字を含めることはできません。文字列に復帰文字を含めるには、エスケープ文字を使用する必要があります。。以下にいくつかの単純な文字列定数を示します。
"" // 空の文字列: 文字がゼロです
'testing'
"3.14"
'name="myform"'
" Couldn'オライリーの本の方が好きですか?"
"この文字列には 2 本の線があります"
"π は円の円周と直径の比です"

３、ブール値
JavaScript では、ブール型は true または false を表すために使用され、ブール演算に使用される場合、0、null 文字、null、未定義、NaN など以外のデータはすべて true を表します。
if(0||""||false||null||未定義||NaN)alert("true を返す条件があります");
ブール定数は、false と true、False とのみです。 True は定数ではありません。

４. オブジェクトの種類
JavaScript はオブジェクトベースの言語であり、オブジェクトがその核となります。

プログラムフロー制御
シーケンシャル構造
if条件選択文
switch選択文
whileループ文
do while文
forループ文
break and continue ステートメント

for...in ループステートメント
for (コレクションまたはオブジェクト内の変数)
{
実行ステートメントブロック
}

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

 

var as={id:5,name:'test; '}; 
for(var x in as) 
{ 
output = x "= as[x]>} 
alert(output); 🎜>論理演算子 
&& 
論理 AND。左オペランドと右オペランドの両方が true の場合、戻り値は true になり、それ以外の場合は false が返されます。 

論理和。左オペランドと右オペランドが両方とも false の場合、false または false ではない最初の値を返します。
!
論理否定。オペランドが true の場合、戻り値は false になり、それ以外の場合は true が返されます。
注:
論理演算では、0、""、false、null、未定義、および NaN はすべて false を表します。

関数の定義と呼び出し
関数の定義形式は以下のとおりです。
関数関数名(パラメータリスト)
{
プログラムコード
return 式
}

コードをコピー

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

詳細 : 動的関数の役割とは何ですか、また動的関数はどのような状況で使用されるべきですか。

Closure (クロージャ) 

JavaScript クロージャは、上位レベルの関数またはスコープから取得した変数のコピーを別のスコープ (キーと値のペア) に保存します。これらのキーと値のペアは、上位レベルの関数の実行が完了しても破棄されません。 
このように、var c=a() を実行すると、変数 c は実際には関数 b を指します。変数 i は b で使用されます。c() を実行すると、i の値を表示するウィンドウが表示されます。時間は1）です。このコードは実際にクロージャを作成します。なぜでしょうか。関数 a の外部の変数 c が関数 a 内の関数 b を参照しているため、つまり、 

関数 a の内部関数 b が関数 a の外部の変数によって参照されている場合、いわゆる関数は次のようになります。 「閉鎖」を作成しました。 

コードをコピー

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

 
関数 a() { 
var i = 0; 
関数 b() { 
alert(i); 
return b; 🎜>var c = a(); 
c(); 

 
クロージャーの機能は、a が実行されて返された後に Javascript のガベージ コレクション メカニズムがリソースを収集しないようにすることです。 a の内部関数 b の実行は a の変数に依存する必要があるため、a によって占有されます。 

関数と this のスコープ

1. 関数またはメソッドで this を使用すると、関数が配置されている現在のオブジェクトを参照できます。2.関数の現在のオブジェクトは明示的に指定されたオブジェクトではなく、スコープはウィンドウです 3. call と apply を使用して、関数の実行スコープを動的に変更できます

コードをコピーコードは次のとおりです。 var b1={v:"this is b1"};

var b2={v :"これは b2"};

function b (d){
alert(this.v);
b();//出力:
window.b() ;//出力:
b.call(b1 );//出力:
b.apply(b2);//出力:

字句スコープ。平たく言えば、JavaScript 変数のスコープは実行時ではなく定義時に決定されます。つまり、字句スコープはソースコードに依存し、コンパイラーは静的解析を通じてそれを決定できるため、字句スコープはソースコードに依存します。スコープは静的スコープ (静的スコープ) とも呼ばれます。ただし、with と eval のセマンティクスは静的技術だけでは実現できないため、JavaScript のスコープ機構は字句スコープに非常に近いとしか言えません。
JavaScript エンジンは新しいスコープを作成します。各関数インスタンスを実行するときの関数。実行環境には呼び出しオブジェクトが含まれます
呼び出しオブジェクトは scriptObject 構造体 (scriptObject は関数インスタンスのライフサイクルと一致する、関数に関連する静的システムのセットです) であり、内部変数テーブル varDecls を保存するために使用されます。埋め込み関数テーブル funDecls、親参照リスト upvalue、およびその他の構文解析構造 (varDecls や funDecls などの情報は構文解析段階で取得され、構文ツリーに保存されることに注意してください。関数インスタンスが実行されると、この情報は削除されます) scriptObject にコピーされた構文ツリーから)。

apply と call: この 2 つの機能は、関数を別のオブジェクトにバインドして実行することです。
apply(thisArg,argArray); call(thisArg[,arg1,arg2…]]);
つまり、すべての関数内の this ポインターは thisArg に割り当てられ、関数を別のオブジェクトのメソッドとして実行するという目的を達成できます。

適用の手順 argArray が有効な配列でない場合、または引数オブジェクトではない場合、TypeError が発生します。 argArray も thisArg も指定されていない場合は、Global オブジェクトが thisArg として使用され、引数を渡すことはできません。

呼び出しの説明 call メソッドは、関数のオブジェクトコンテキストを初期コンテキストから thisArg で指定された新しいオブジェクトに変更します。 thisArg パラメータが指定されていない場合は、Global オブジェクトが thisArg として使用されます。

ポイント: call と apply を適用するには別のトリックがあります。それは call と apply を使用することです。別の関数 (クラス) を適用すると、現在の関数 (クラス) は他の関数 (クラス) のメソッドまたは属性を持ちます。
ブラウジングによって実行されるJavaScriptでは、オブジェクトのスコープはデフォルトでウィンドウです。
c.run();
window.c.run();

JavaScript のシステム関数 (グローバルクラス)
encodeURI メソッドと encodeURIComponent メソッド URI文字列をエンコードした結果を返します。
decodeURI メソッドと decodeURIComponent() メソッド
エンコードされた URI 文字列を元の文字列にデコードして返します。
parseInt メソッド
指定された基数に従って文字列を整数に変換します。構文形式は parseInt(numString, [radix]) です。 2 番目の引数が指定されていない場合、「0x」の接頭辞が付いている文字列は 16 進数として扱われ、「0」の接頭辞が付いている文字列は 8 進数として扱われ、その他すべての文字列は 10 進数として扱われます。
parseFloat メソッド
文字列を対応する 10 進数に変換します。
isNaN メソッド
は、parseInt メソッドと parseFloat メソッドの戻り値が NaN であるかどうかを検出するために使用されます。
エスケープメソッド
文字列をエンコードした後の結果文字列を返します。すべてのスペース、句読点、アクセント、およびその他の非 ASCII 文字は、%xx エンコードで置き換えられます。xx は、文字の Unicode エンコードを表す 16 進数に等しく、文字値が 255 を超える文字は、 %uxxxx 形式。
unescape メソッド
escape メソッドでエンコードされた結果文字列を元の文字列にデコードして返します。
eval メソッド
は、パラメーター文字列を JavaScript 式として実行します。

JavaScript 内部クラス
動的オブジェクト
そのプロパティとメソッドにアクセスするには、「オブジェクトインスタンス名.メンバー」の形式を使用します。
静的オブジェクト
「オブジェクト名.メンバー」の形式を直接使用して、そのプロパティとメソッドにアクセスします。

オブジェクトクラス (オブジェクト)
数値クラス (オブジェクト)
文字列クラス (オブジェクト)
数学クラス (オブジェクト)
日付クラス (オブジェクト)
toString メソッド

オブジェクトクラス
オブジェクトクラスは、すべての JavaScript クラスの基本クラスであり、プログラマがコンストラクターを定義することなくカスタムオブジェクトを作成する簡単な方法を提供します。主な属性:
constructor - オブジェクトのコンストラクター
prototype - クラスのプロトタイプオブジェクト、静的プロパティを取得します
主なメソッド:
hasOwnProperty(property) - オブジェクトに属するかどうかこのクラスによって定義されるプロパティ
isPrototypeOf(object) - 指定されたクラスのプロトタイプであるかどうか
propertyIsEnumerable(property) - 列挙可能なプロパティであるかどうか
toString() - オブジェクトに対応する文字列を返します
valueOf() - 対応するオブジェクトのプリミティブ型の値を返します

Number クラス

Number クラスは、いくつかの静的メンバーと数値処理メソッドを含みます。
静的属性:
MAX_VALUE、MIN_VALUE、NEGATIVE_INFINITY、POSITIVE_INFINITY、NaN
主なメソッド:
toFixed(n) - 小数点以下の桁数を取得し、自動的に四捨五入します
toPrecision(n) - かどうか指定されています。クラスのプロトタイプ
propertyIsEnumerable(property) - プロパティが列挙可能かどうか
toString() - オブジェクトに対応する文字列を返します
valueOf() - オブジェクトに対応する元の型の値を返します

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

文字列クラス
length 属性
anchor、big、bold、fontcolor、link およびその他のメソッド
charAt メソッド
注: の最初の文字のインデックス位置文字列は 0 などです。
charCodeAt メソッド
注: 返される結果は、文字の Unicode エンコーディングです。
concat メソッド、接続文字列
indexOf メソッドおよび lastIndexOf メソッド
match、search メソッド
replace、split メソッド
slice メソッド
説明: str1.slice ( 0) と str1.slice(0,-1) はどちらも文字列全体を返します。
substr, substring メソッド
substring メソッドによって返される内容には、終了位置の文字は含まれません。
toLowerCase、toUpperCase メソッド

数学クラス
属性:
E は、数学定数 e を表し、これは 2.718 にほぼ等しくなります。
LN10 は 10 の自然対数を表し、2.302 にほぼ等しくなります。
LN2 は 2 の自然対数を表し、0.693 にほぼ等しくなります。
PI は数学定数 ∏ の値を表し、3.14159 にほぼ等しくなります。
SQRT1-2 は 2 の平方根の 4 分の 1 を表し、ほぼ 0.707 に等しくなります。
SQRT2 は 2 の平方根を表し、1.414 にほぼ等しくなります。

メソッド:
abs メソッド。数値の絶対値を返します。
sin メソッドと cos メソッドは、それぞれ数値のサイン値とコサイン値を返します。
asin メソッドと acos メソッドは、それぞれ数値の逆正弦値と逆余弦値を返します。
random メソッドは、0 から 1 までの擬似乱数を返します。
Math オブジェクトは静的クラスです。new キーワードを使用してオブジェクトインスタンスを作成することはできません。「object」の形式を使用して直接アクセスする必要があります。 name.member" そのプロパティまたはメソッド (例: var num = Math.random();

Date クラス
toGMTString メソッドは、日付オブジェクトインスタンス。文字列はグリニッジ標準時 (GMT) 形式です (たとえば、「05 Jan 1996 00:00:00 GMT」)。
get Year、getMonth、getDate、getDay メソッド
getHours、getMinutes、getSeconds、getMilliseconds メソッド
getTime メソッドは、1970 年 1 月 1 日 0:00:00 から Date オブジェクトインスタンスの代表値までの日付を返します。時刻までのミリ秒。

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

 
構築メソッド: Date()、Date(dateVal)、Date(年、月、日付[、時間[、分[、秒[,ms] ]]] ]) 
parse メソッドは、日付と時刻を表す文字列を分析し、それが表す時間値を返します。これは、1970 年 1 月 1 日 0:00:00 からのミリ秒単位で表されます。 parse メソッドは静的メソッドです。

toString メソッド

toString メソッドは、JavaScript のすべての内部オブジェクトのメンバーメソッドであり、その主な機能は、オブジェクト内のデータを特定の形式の文字列に変換することです。、具体的な変換方法はオブジェクトの種類によって異なります。
例:

コードをコピー

コードは次のとおりです: < ; スクリプト言語 ="javascript"> var x = 328;alert("hex=" x.toString(16) " bin=" x.toString(2)); script>

 
Array クラス
3 つの構築メソッド: 
Array() 
Array(4) 
Array(3.5,"abc",3) 

配列の並べ替えの例:

コードをコピー

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

Array クラスの属性とメソッド
length-配列の長さを取得します。
concat-配列を文字列に変換します。
要素をポップします。 ;
push - 要素を挿入します;
reverse - データ内の要素の順序を反転します;
slice - 配列を並べ替えます。配列;
unshift - 要素を前に追加します。

オブジェクトを使用して配列を実装します

コードをコピーしますコードは次のとおりです。 🎜>

ユーザー定義のクラスとオブジェクト
1. ファクトリメソッド - 新しいオブジェクトを使用してオブジェクトを作成し、関連するプロパティを追加します。
2. コンストラクターを使用してクラスを定義します。
３. プロトタイプを使用する
４. コンストラクターとプロトタイプの混合メソッド
５. 動的プロトタイプメソッド
インスタンス
Car クラス (オブジェクト)
属性:
color-color

doors-ドアの数
price-price
drivers-drivers
メソッド:
showColor-車の色を表示

typeof および instanceof 演算子
delete 演算子オブジェクトの指定されたメンバーを削除するために使用されます。
typeof xx-string は、xx オブジェクトのタイプまたは未定義を返します。
var d=7.5;
alert(typeof d2);
alert(typeof Object);
xx クラス名のインスタンス、ブール型を返します:

コードをコピー

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

著者別の最新記事