ホームページ  >  記事  >  ウェブフロントエンド  >  JS オブジェクト指向、プロトタイプ、call()、apply()

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

青灯夜游
青灯夜游転載
2018-10-08 16:26:562461ブラウズ

その日は、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 までご連絡ください。