js クロージャで this が指す解決策への解決策 (コード)-jsチュートリアル-php.cn

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

不言

リリース： 2018-08-23 15:47:01

オリジナル

2348 人が閲覧しました

この記事の内容は、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);

ログイン後にコピー