7

キーワードの背後にある一般的な考え方はthis理解していますが、実際に何を指しているのかを理解するのに苦労しています. たとえば、これらの例題の両方で、私は間違った数を推測しました。

質問 1 については、関数内の無名関数の外側で this.x を参照しているため、アラートは '5' になると言いました。

質問2では、この行なのでアラートは5になると思いました

var alertX = o.alertX;

変数 o 内のプロパティ x の値 5 を、次の行の関数呼び出しとなる新しい変数 'alertX' にバインドします。

なぜ私が間違っているのか説明できますか？

var question1 = function() {
    this.x = 5;
     (function() {
        var x = 3;
        this.x = x;
    })();
    alert(this.x);
};
var answer1 = 3; 


var question2 = function() {
    this.x = 9;
    var o = {
        'x':5,
        'alertX':function() { alert(this.x); }
    };
    var alertX = o.alertX;
    alertX();
}
var answer2 = 9;
4

3 に答える 3

3

最初のケースでは、明示的なレシーバーなしでメソッドを呼び出すthisと、Global オブジェクト ( windowWeb ブラウザー内) になります。

2 番目のケースでも同様です。関数がオブジェクトで定義されていて、別のオブジェクトの内部にいる場合でも、 is を Global/ に設定して関数を呼び出すalertx()ことthisによってwindow。

要するに：

  • の場合foo.bar()、 のthis中はbarになりますfoo。
  • の場合bar()、thisはグローバル オブジェクトになります。
    • これには、いわゆる「自己呼び出しラムダ」、つまり(function(){ ... })().
  • bar.call(whee)との場合bar.apply(whee)、 はthisになりますwhee(これらのメソッドがそうするからです)。

もう一つの例：

var o1 = { name:"o1", f:function(){ console.log(this.name) } };
var o2 = { name:"o2" };
o2.gogogo = o1.f;
o2.gogogo(); // Will output "o2"
于 2012-09-04T23:11:13.010 に答える
0

以下をブラウザのコンソールに入力します

var x = -1, log = function(){ // set up some stuff
if(console) if(console.log) return console.log.apply(console, arguments),undefined;
return alert(arguments.join(', ')),undefined;
},
question1 = function() {
    this.x = 5; // question1.x is 5
     (function() { // anonymous function fires in global 'window'
        var x = 3; // so window.x is now 3
        this.x = x; // this is window
    })();
    log('ans1',this.x,this); // see below
},
question2 = function() {
    this.x = 9; // question2.x is 9
    var o = {
        'x':5,  // o.x is 5
        'alertX':function() { log('ans2',this.x,this); }
    };
    var alertX = o.alertX; // alertX === o.alertX
    alertX(); // being called in global scope

    // to make alertX have scope of question2
    this.alertX = o.alertX; // this is question2
    this.alertX(); // so we're calling from question2
},
a1 = new question1(), // note the new operator
a2 = new question2();
undefined;

そして、あなたは得るでしょう

ans1 5 question1
ans2 3 Window
ans2 9 question2
于 2012-09-04T23:32:16.003 に答える
0

これらは、これが Javascript でいかに興味深いものになるかを示す良い例です。これは常に、単にその瞬間の場所ではなく、呼び出された/呼び出されたコンテキストを指します! question2 はその完璧な例です。

これらを次のようにグローバルに呼び出していると仮定しています。

question1();
question2();

質問1：

最初に x を 5 に設定した後に実行される無名関数があります。この無名関数は、関数内などで変数に設定されていない場合、 window のグローバル変数に設定されます。しかし、関数内にあり、変数 question1 に設定されています。したがって、それ自体を実行すると、thisの (question1 関数である) x変数が 3 に設定されます。

質問2で：

X はもともと 9 に設定されており、これはこの例では question2 です。o {}オブジェクト内であっても、あなたを悩ませているのはそれですx : 5。そして、あなたの alertX 関数は this.x を呼び出しています。これらすべてから、アラート 5 になると思われます。しかし、 o {}オブジェクトの外でアラート関数を呼び出しているため、これは question2 関数を再び参照しています!

于 2012-09-04T23:19:33.483 に答える