Teka-teki tentang ini dalam JavaScript

Question

Saya melihat banyak maklumat mengatakan bahawa objek mana yang memanggil fungsi ini, ini dalam fungsi ini menunjuk ke objek ini.
Dalam contoh berikut, fungsi foo dipanggil melalui pernyataan foo(). Bukankah Window.foo() dipanggil oleh objek global?
Sila beri nasihat, terima kasih!

var x = 10;
var obj = {
  x: 20,
  f: function () {
     var foo = function (){
         console.log(this.x);
     }
     foo();
  }
};
obj.f(); //10

Answer 1

Terdapat masalah dengan apa yang dikatakan di tingkat atas Foo bukan pembolehubah global Cara mudah untuk menilai (mod tidak ketat) ialah:
1 Apabila fungsi tidak diberikan objek unggul, ini menunjuk ke tetingkap
2 . Apabila fungsi ditetapkan Apabila ia berkaitan dengan objek superior, ini hanya menunjuk kepada objek superior (induk) yang paling hampir
seperti foo.fn.o(), ini dalam o menunjuk ke fn

Answer 2

Beginilah rupanya, saya tulis di ruangan komen

var x = 10;
var obj = {
  x: 20,
  f: function () {
     var foo = function (){
         console.log(this.x);//你这是把函数赋值给一个 foo的变量。此时的 foo 是全局的，所以下面调用 foo（）这里是10嘛
     }
     foo();
  }
};
obj.f(); // 这个调用 f 函数，因为 f()，并没有返回出去什么，所以这里是 undefined

Answer 3

Untuk 内部函数，即声明在另一个函数体内的函数，都将会绑定到全局对象上，这是JavaScript的设计缺陷, kaedah reka bentuk yang betul ialah fungsi dalaman ini harus diikat pada objek yang sepadan dengan fungsi luarnya, yang membawa kepada masalah di atas.

Untuk mengelakkan kecacatan reka bentuk ini, anda boleh menggunakan 变量替代的方法，约定俗成，可以使用self或that, kodnya adalah seperti berikut:

var x = 10;
var obj = {
  x: 20,
  f: function () {
     var self = this;
     var foo = function (){
         console.log(self.x);
     }
     foo();
  }
};
obj.f();

Answer 4

Pertama sekali, mari kita fahami satu perkara:
1: tetingkap juga merupakan objek, ia adalah objek istimewa, ia mewakili seluruh dunia. Apabila anda memanggil fungsi dengan cara berikut:
function foo(){....}
foo();//
Kaedah panggilan ini dalam baris kedua (tiada objek yang ditentukan oleh anda di hadapan fungsi) , Kami memanggilnya 'panggilan global'. Malah, ia bersamaan dengan window.foo(). Jadi adakah anda melihatnya? Memanggil fungsi secara global sebenarnya adalah kes khas untuk memanggil fungsi pada objek, kerana objek pada masa ini ialah tetingkap.
2: Jadi mengapa kod di atas memanggil foo() secara global dan bukannya pada obj? Saya akan menukar kod dan biarkan ia mengeluarkan 20:

var x = 10;
var obj = {
  x: 20,
  f: function () {
     console.log(this.x);
  }
};
obj.f();//20

Bandingkan dua keping kod dan cari perbezaannya.

Answer 5

var x = 10;
var obj = {
  x: 20,
  f: function () {
     console.log(this.x);  // 20
     var foo = function (){
         // 这里函数的作用域是window
         console.log(this.x);
     }
     foo();
  }
};
obj.f(); //10

var x = 10;
var obj = {
  x: 20,
  f: function () {
     let that = this;
     var foo = function (){
         // 这里形成了闭包
         console.log(that.x);
     }
     foo();
  }
};
obj.f(); //20

Answer 6

Anda boleh menulis semula kod seperti ini:

var x = 10;
var obj = {
  x: 20,
  f: function () {
     var foo = function (){
         console.log(this.x);
     }
     foo.call(null) // 等价于foo.call(window)
  }
};
obj.f.call(obj); //10  结果不变

---

Melalui contoh di atas, anda boleh memahami bahawa apabila memanggil fungsi, penghurai JavaScript dipanggil dalam bentuk panggilan atau memohon. Dengan cara ini, nyatakan nilai untuk ini dalam fungsi. Parameter pertama bagi kedua-dua kaedah ini ialah nilai dalaman kaedah foo ini apabila ia dipanggil Jika parameter pertama kaedah panggilan adalah batal atau tidak ditentukan, objek global akan digunakan sebagai parameter pertama secara lalai (anda boleh mencuba. Cuba foo.call(), foo.call(null), foo.call(undefined))

Answer 7

Fungsi dalam fungsi, penunjuk ini hilang