知っておきたいJavaScriptの知識：「このポインタ」の応用_JavaScriptスキル-jsチュートリアル-php.cn

知っておきたいJavaScriptの知識：「このポインタ」の応用_JavaScriptスキル

WBOY

リリース： 2016-05-16 17:35:37

オリジナル

1288 人が閲覧しました

多くの人がこの指針を知っていますが、この記事の主な目的は、当社の新入社員をトレーニングすることです。
デフォルトの this ポインタは次を指します
ルール 1
このポインタは、メソッドが呼び出されるときにデフォルトで指定されたオブジェクトを指します。例: obj.fun()、this ポインタfun メソッド本体で obj をポイントします。

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

var user = { name: 'Duan Guangwei ' };
user.getName = function(){ return this.name; };
user.getName() //Return 'Duan Guangwei'

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

var user = { name: 'Duan Guangwei' };
 user .getName = function(){ return this .name; };
 user.getName(); // 'Duan Guangwei'

 window.name = 'Li Niuniu';
 ウィンドウを返します。 getName = user.getName
 window. getName(); //Return '李妞妞'
 getName(); //Return '李妞妞'

ルール 2
メソッド呼び出し中の場合メソッドにオブジェクトが指定されていない場合、デフォルトで this ポインターは window を指します (例: fun()、fun メソッド本体の this ポインターは window を指します)。

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

var fun = function(){
 return this ;
 }
 fun(); //Return window object 

ルール 3 メソッド本体にないコードは、匿名メソッドで実行されると見なされます。ルール 2 によれば、このポインタはウィンドウを指していると推測できます。
this //window object

このポインターのデフォルトのポインターを変更します
apply を使用します

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

var user = { name: 'Duan Guangwei' };
 user.hi= function(message){ return this.name ':' message };
 window.name = 'Li Niuniu'
 user.hi('Hello'); //出力 'Duan Guangwei: Hello'
 user.hi.apply(window, ['Hello']); /Output' Li Nuuniu: こんにちは'

呼び出しを使用します

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

var user = { name: 'Duan Guangwei' };
 user.hi= function(message){ return this.name ':' message };
 window; .name = 'Li Niuniu' 
 user.hi('Hello') //出力 'Duan Guangwei: Hello'
 user.hi.call(window, 'Hello'); : Hello'

コンストラクター内のこのポインターは、
コンストラクター内のこのポインターは、デフォルトで構築されるオブジェクトを指します。

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

var User = function(name){
 this .name = name;
 };
 User.prototype.hi = function(){
 return this.name;
 };
 var user = new User('Duan Guangwei'); 
 user.hi(); //出力 'Duan Guangwei'

最後の小さなテスト
最終的な出力は何になると思いますか?

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

var User = function(name){
 this .name = name;
 };
 User.prototype.hi = function(){
 return this.name;
 };
 var user = new User('Duan Guangwei'); 
 user.hi(); // 'Duan Guangwei'

 var hi = user.hi;

 hi(); // ここで出力を推測してください