• <bdo id='vN0gT'></bdo><ul id='vN0gT'></ul>

      <small id='vN0gT'></small><noframes id='vN0gT'>

      <legend id='vN0gT'><style id='vN0gT'><dir id='vN0gT'><q id='vN0gT'></q></dir></style></legend>
      <tfoot id='vN0gT'></tfoot>
      <i id='vN0gT'><tr id='vN0gT'><dt id='vN0gT'><q id='vN0gT'><span id='vN0gT'><b id='vN0gT'><form id='vN0gT'><ins id='vN0gT'></ins><ul id='vN0gT'></ul><sub id='vN0gT'></sub></form><legend id='vN0gT'></legend><bdo id='vN0gT'><pre id='vN0gT'><center id='vN0gT'></center></pre></bdo></b><th id='vN0gT'></th></span></q></dt></tr></i><div id='vN0gT'><tfoot id='vN0gT'></tfoot><dl id='vN0gT'><fieldset id='vN0gT'></fieldset></dl></div>

        深入浅出聊一聊js中的’this’关键字

        时间:2023-12-08
            <tbody id='QoDVP'></tbody>

            <i id='QoDVP'><tr id='QoDVP'><dt id='QoDVP'><q id='QoDVP'><span id='QoDVP'><b id='QoDVP'><form id='QoDVP'><ins id='QoDVP'></ins><ul id='QoDVP'></ul><sub id='QoDVP'></sub></form><legend id='QoDVP'></legend><bdo id='QoDVP'><pre id='QoDVP'><center id='QoDVP'></center></pre></bdo></b><th id='QoDVP'></th></span></q></dt></tr></i><div id='QoDVP'><tfoot id='QoDVP'></tfoot><dl id='QoDVP'><fieldset id='QoDVP'></fieldset></dl></div>
              <bdo id='QoDVP'></bdo><ul id='QoDVP'></ul>

                <small id='QoDVP'></small><noframes id='QoDVP'>

              1. <tfoot id='QoDVP'></tfoot>
                <legend id='QoDVP'><style id='QoDVP'><dir id='QoDVP'><q id='QoDVP'></q></dir></style></legend>
                • 当我们在写 JavaScript 代码时,经常会遇到在当前函数作用域内使用 this 关键字的情况。但是,this 关键字在不同的环境下,它所代表的对象不尽相同。在这里,我们将深入浅出的聊一聊 JavaScript 中的 this 关键字,解释它在不同情况下的行为,并提供一些示例说明。

                  什么是 this 关键字

                  在 JavaScript 中,this 关键字是一个指向对象的引用,它代表当前函数执行时的上下文环境。

                  在全局作用域下,this 关键字表示当前 window 或 global 对象。而在函数中,它代表调用该函数的对象。

                  this 的指向

                  当我们在实际开发中使用 this 关键字时,它可能会指向不同的对象,这会导致我们的程序出现错误。因此,我们必须清楚 this 的指向,才能正确地使用它。

                  指向全局对象

                  如果函数在全局作用域下调用,那么 this 关键字就指向全局对象 window 或 global。

                  console.log(this === window); // true
                  
                  function test() {
                    console.log(this === window); // true
                  }
                  
                  test();
                  

                  指向调用它的对象

                  当函数被对象调用时,this 指向调用这个函数的对象。

                  const user = {
                    firstname: 'John',
                    lastname: 'Doe',
                    greet: function() {
                      console.log(`Hello, ${this.firstname} ${this.lastname}!`);
                    }
                  }
                  
                  user.greet(); // 输出 "Hello, John Doe!"
                  

                  使用 call 或 apply 方法指定 this 指向

                  JavaScript 中的 call 和 apply 方法可以让我们在调用函数时指定 this 指向。

                  const person1 = {
                    firstname: 'John',
                    lastname: 'Doe',
                    greet: function() {
                      console.log(`Hello, ${this.firstname} ${this.lastname}!`);
                    }
                  }
                  
                  const person2 = {
                    firstname: 'Jane',
                    lastname: 'Doe',
                  }
                  
                  person1.greet.call(person2); // 输出 "Hello, Jane Doe!"
                  person1.greet.apply(person2); // 输出 "Hello, Jane Doe!"
                  

                  箭头函数中的 this

                  在箭头函数中,this 指向的是它所在上下文中的 this,而不是调用它的对象。

                  const user = {
                    firstname: 'John',
                    lastname: 'Doe',
                    greet: function() {
                      const message = `Hello, ${this.firstname} ${this.lastname}!`;
                      const sayHello = () => console.log(message);
                      sayHello();
                    }
                  }
                  
                  user.greet(); // 输出 "Hello, John Doe!"
                  

                  在上面的例子中,sayHello 函数是一个箭头函数,它的上下文是 user.greet 函数的上下文,因此 this 指向 user。

                  总结

                  在 JavaScript 中,this 关键字代表当前函数执行的上下文环境。它的实际指向取决于函数在哪个作用域下被调用。如果函数在全局作用域下调用,this 指向全局对象 window 或 global。而当函数被对象调用时,this 指向调用这个函数的对象。通过调用 call 或 apply 方法,我们可以手动指定函数的 this 指向。在箭头函数中,this 指向的是它所在上下文中的 this,而不是调用它的对象。

                  上一篇:JavaScript如何使用插值实现图像渐变 下一篇:js中的this的指向问题详解

                  相关文章

                • <legend id='PhDj5'><style id='PhDj5'><dir id='PhDj5'><q id='PhDj5'></q></dir></style></legend>

                    <bdo id='PhDj5'></bdo><ul id='PhDj5'></ul>

                    1. <small id='PhDj5'></small><noframes id='PhDj5'>

                      <i id='PhDj5'><tr id='PhDj5'><dt id='PhDj5'><q id='PhDj5'><span id='PhDj5'><b id='PhDj5'><form id='PhDj5'><ins id='PhDj5'></ins><ul id='PhDj5'></ul><sub id='PhDj5'></sub></form><legend id='PhDj5'></legend><bdo id='PhDj5'><pre id='PhDj5'><center id='PhDj5'></center></pre></bdo></b><th id='PhDj5'></th></span></q></dt></tr></i><div id='PhDj5'><tfoot id='PhDj5'></tfoot><dl id='PhDj5'><fieldset id='PhDj5'></fieldset></dl></div>
                      <tfoot id='PhDj5'></tfoot>