ホームページ  >  記事  >  ウェブフロントエンド  >  js クロージャで this が指す解決策への解決策 (コード)

js クロージャで this が指す解決策への解決策 (コード)

不言
不言オリジナル
2018-08-23 15:47:012313ブラウズ

この記事の内容は、js クロージャで指摘される解決策 (コード) に関するものであり、必要な友人が参考になれば幸いです。

次は、オブジェクトメソッドで定義されたサブ関数についての質問ですが、サブ関数が実行されるとき、これはどこを指すのでしょうか?
3 つの質問:
(1) 次のコードで出力されるオブジェクトは何ですか?
(2) このコードは myNumber.value を 1 増やす機能を実現できますか?
(3) ヘルパー関数を放棄せずに、正しい機能を実現するにはどのような変更方法を使用できますか?

var myNumber = {
  value: 1,
  add: function(i){
    var helper = function(i){
        console.log(this);          
        this.value += i;
    }
    helper(i);
  }
}
myNumber.add(1);

1. これはウィンドウ オブジェクトを指します (匿名関数の実行はグローバルであるため、このオブジェクトはウィンドウを指します)。
2. 値に 1 を加えたものは実装できません (各関数は自動的に 2 つの特殊変数を取得します)。 this と引数が呼び出された場合、内部関数はこれら 2 つのオブジェクトを検索するとき、アクティブなオブジェクトまでしか検索しないため、外部関数の this オブジェクトにはアクセスできません
3. 正しい関数を実現するためにコードを変更します。方法 1:

var myNumber={
    value:1,
    add:function(i){
        var that=this;//定义变量that用于保存上层函数的this对象
        var helper=function(i){
             console.log(that);
        that.value+=i;
    }
    helper(i);
    }
}
myNumber.add(1);

方法 2:

var myNumber={
    value:1,
    add:function(i){
        var helper=function(i){
            this.value+=i;
        }
        helper.apply(this,[i]);//使用apply改变helper的this对象指向,使其指向myNumber对象
    }
}
myNumber.add(1);

方法 3:

var myNumber={
    value:1,
    add:function(i){
        var helper=function(i){
            this.value+=i;
        }.bind(this,i);//使用bind绑定,和apply相似,只是它返回的是对函数的引用,不会立即执行
        helper(i);
    }
}
myNumber.add(1);

関連する推奨事項:

js はブラウザーが PC かモバイルかをどのように判断しますか? (2つの方法)

jsで自己実行関数を呼び出す2つの方法

以上がjs クロージャで this が指す解決策への解決策 (コード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。