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

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

不言
リリース: 2018-08-23 15:47:01
オリジナル
2357 人が閲覧しました

この記事の内容は、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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート