ホームページ  >  記事  >  ウェブフロントエンド  >  JSのthisキーワードを深く理解する

JSのthisキーワードを深く理解する

迷茫
迷茫オリジナル
2017-03-26 17:44:231409ブラウズ

修士課程の弁論を終えた後、私はキャリアチェンジに向けて努力を続け始めました。小白は苦戦するだろう、さあ。この記事は、JS コア シリーズ「関数のスコープの簡単な説明」から引用されています。

関数では、this は常に現在の関数の所有者オブジェクトを指します。this の具体的な点は実行時にのみ決定され、その呼び出し元オブジェクトのみがわかります。

window.name = "window";
function f(){
    console.log(this.name);
}
f();//输出window

var obj = {name:'obj'};
f.call(obj); //输出obj

f()を実行すると、f()の呼び出し元がwindowオブジェクトなので、「window」が出力されます。

f.call(obj) は、obj オブジェクトに f() を設定して実行します。これは、obj.f() と同等です。このとき、f の this は obj なので、出力は「obj」になります。

code1:

var foo = "window";
var obj = {
    foo : "obj",
    getFoo : function(){
        return function(){
            return this.foo;
        };
    }
};
var f = obj.getFoo();
console.log(1+":"+f()); //输出window

code2:

var foo = "window";
var obj = {
    foo : "obj",
    getFoo : function(){
        var that = this;
        return function(){
            return that.foo;
        };
    }
};
var f = obj.getFoo();
console.log(f()); //输出obj

code1:
var f = obj.getFoo() を実行すると、次と同等の匿名関数が返されます:
var f = function(){
return this.foo;
}
f() は window.f() と同等なので、 f の this は window オブジェクトを指し、 this.foo は window.foo と同等なので、 f() は "window" を返します

code2:
Execute var f = obj .getFoo() は匿名関数も返します。つまり、
var f = function(){
return that.foo;
}
唯一の違いは、f の this が that になることです。まず、それがどのオブジェクトであるかを知る必要があります。 f: f->getFoo->window のスコープ チェーンを決定し、チェーン上でそれを検索します。この時点で、getFoo で this を参照しており、getFoo の this が実行時の呼び出し元を指していることがわかります。 var f = obj.getFoo() の場合、現時点ではこれが obj オブジェクトを指していることがわかっているため、that.foo は obj.foo と同等であるため、f() は「obj」を返します。

スコープチェーンについてよくわからない学生は、スコープからクロージャまでJavaScriptを参照できます。

以上がJSのthisキーワードを深く理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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