JS オブジェクト指向、プロトタイプ、call()、apply()

青灯夜游
リリース: 2018-10-08 16:33:49
転載
2422 人が閲覧しました

その日は、prototype.js を使用したので、それを開いて数行読んだ後、js のオブジェクト指向の性質にあまり慣れていなかったため、混乱しました。 Baidu でグーグル検索して、ようやく成功を見つけて、「これを記念しましょう ^_^」と書きました。

1. 原因
その日、prototype.js を使用したので、数行読んだだけで混乱していました。 jsのオブジェクト指向の性質についてBaiduでググってみたら、やっと少しわかったので記念に書きます^_^。

prototype.js コード スニペット

var Class = { 
create: function() { 
return function() { 
this.initialize.apply(this , arguments); 
} 
} 
} 
// Class使用方法如下 
var A = Class.create(); 
A. prototype={ 
initialize:function(v){ 
this .value=v; 
} 
showValue:function(){ 
alert(this.value); 
} 
} 
var a = new A(‘helloWord!'); 
a. showValue();//弹出对话框helloWord!
ログイン後にコピー

l 初期化とは何ですか?
l apply メソッドは何をしますか?
l引数変数についてはどうでしょうか?
l 新しい A の後に初期化メソッドが実行されるのはなぜですか?

答えを見つけてください:

2. Js オブジェクト指向
初期化とは何ですか?
これは単なる変数です。メソッド。目的はクラスのコンストラクターです。
その特定の関数は js のオブジェクト指向サポートに依存しています。では、オブジェクト指向 js はどのようなものでしょうか? Javaとの類似点と相違点は何ですか?
コードを見てください:

var ClassName = function(v){ 
this.value=v; 
this.getValue=function(){ 
return this.value; 
} 
this.setValue=function(v){ 
this.value=v; 
} 
}
ログイン後にコピー

では、JS の関数とクラスの違いは何でしょうか?

実際には、ClassName は関数であり、new の後に出現する場合、オブジェクトを構築するためのコンストラクターとして使用されます。

var objectName1 = new ClassName(“a”);//得到一个对象
ログイン後にコピー

のように、 objectName1 は ClassName コンストラクターの実行後に取得されたオブジェクトであり、 ClassName 関数の this は new の後に構築されたオブジェクトを参照するため、 objectName1 には 1 つの属性と 2 つのメソッドがあります。これらは次のように呼び出すことができます:

objectName1.setValue(''hello''); 
alert(objectName1.getValue());//对话框hello 
alert(objectName1.value) ;//对话框hello
ログイン後にコピー

So

var objectName2 = ClassName(“b”);//得到一个对象
ログイン後にコピー

objectName2 は何を取得しますか?明らかに、これはメソッドの戻り値です。ここでは ClassName が通常の関数として使用されています (ただし、最初の文字は大文字です)。しかし、先に書き込んだ ClassName には戻り値がないため、objectName2 は不明になります。 では、「b」は誰に割り当てられるのでしょうか。ここではオブジェクトは生成されませんが、このメソッドは単に実行されるため、このメソッドを呼び出すオブジェクト ウィンドウにこの「b」が割り当てられます。その証拠は次のとおりです。

var objectName2 = ClassName(“b”);//得到一个对象 
alert(window.value);//对话框b
ログイン後にコピー

つまり、JS のすべての関数は同じですが、目的は異なる場合があります (オブジェクトの構築またはプロシージャの実行に使用されます)。

initialize は何をするのかという話に戻ります。

var Class = { 
create: function() { 
return function() { 
this.initialize.apply(this , arguments); 
} 
} 
} 
var A = Class.create();
ログイン後にコピー

このコードは関数を構築し、それを A にコピーします。この関数は

function() { 
this.initialize.apply(this , arguments); 
}
ログイン後にコピー

で、次のメソッドがコンストラクターとして使用されます。このコンストラクターを使用してオブジェクトを構築すると、構築されたオブジェクトの初期化変数によって apply() メソッドが実行されます。 apply() の目的については後で説明し、初期化について引き続き説明します。このように、オブジェクトを初期化する際にinitializeに問い合わせることになります(問い合わせ方法はapplyにより異なります)。
では、

A.prototype={ 
initialize:function(v){ 
this .value=v; 
} 
showValue:function(){ 
alert(this.value); 
} 
}
ログイン後にコピー

とはどういう意味ですか?

プロトタイプとは「試作品」という意味です。 A は function() であり、A です。プロトタイプは関数内の変数であり、実際にはオブジェクトです。このオブジェクトにはどのようなメソッドがあるのか​​、そして関数によって生成されたオブジェクトにはどのようなメソッドがあるのか​​ということになります。つまり、

var a = new A(‘helloWord!'); 
a. showValue();//弹出对话框helloWord!
ログイン後にコピー

つまり、オブジェクトには初期化メソッドもあるということになります。それだけでなく、A で構築されたすべてのオブジェクトには 1 つの初期化メソッドがあります。 .initialize メソッドであり、前述したように、コンストラクターは構築中に呼び出され、コンストラクターは apply メソッドを呼び出すように初期化するように要求するため、new A ('helloWord!') が返されると、initialize は apply メソッドを呼び出すために戻ります。これは初期化メソッドを呼び出すことです。

3. call() と apply()

インターネットで見つけた情報を自分の調査と組み合わせて理解しましょう。 call() 関数と apply() 関数。関数は基本的に同じです。 function().call(object,{},{}...) または function().apply (object,[...]) の関数は、オブジェクト object が関数を呼び出すことです。ここでの () の違いは、呼び出しパラメータが 2 番目から関数に渡され、「,」で区切って順番にリストできることです。 apply には 2 つのパラメーターしかありません。2 番目のパラメーターは、関数に渡されるすべてのパラメーターを格納する配列です。

this.initialize.apply(this , argument); これはどういう意味ですか?

ここで最初の this は、new でコンストラクターを呼び出した後に生成されたオブジェクトを参照します。これは前の a です。したがって、当然、2 番目の this も同じオブジェクトを参照する必要があります。すると、この文は、 this (つまり a) は、initialize メソッドを呼び出し、パラメータは引数オブジェクト (パラメータの配列オブジェクト) であるため、コンストラクタが実行されると、オブジェクト a は、initialize メソッドを実行して初期化することになります。 「初期化」という言葉と一致しているということは、正しいことを意味します。

それでは、initialize メソッドを実行するためのパラメーターはどのように渡されるのでしょうか?

4. 引数オブジェクト

このコードはすべてを説明します:

function test(){ 
alert(typeof arguments); 
for(var i=0; i<arguments.length; i++){ 
alert(arguments[i]); 
} 
} 
test("1","2","3"); 
test("a","b");
ログイン後にコピー

実行後、alert(typeof argument); が表示されます。オブジェクトです。その後、1、2、3 が順番に再生されます。説明引数は、呼び出し関数の実際のパラメータ グループです。

var Class = { 
create: function() { 
return function() { 
this.initialize.apply(this , arguments); 
} 
} 
}
ログイン後にコピー

arguments 就是create返回的构造函数的实参数组,那么在 var a = new A(‘helloWord!'); 的时候‘helloWord!'就是实参数组(虽然只有一个字符串),传递给方法apply,然后在调用initialize 的时候作为参数传递给初始化函数initialize。 

以上就是本章的全部内容,更多相关教程请访问JavaScript视频教程

以上がJS オブジェクト指向、プロトタイプ、call()、apply()の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:jb51.net
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!