JavaScript this

x33g5p2x  于2022-05-23 转载在 Java  
字(2.8k)|赞(0)|评价(0)|浏览(361)

在本教程中,您将借助示例了解 JavaScript 的 this 关键字。
    在 JavaScript 中,this 关键字是指调用它的对象。

1. 全局作用域中的 this

当 this 单独使用时,this 指的是全局对象(浏览器中的 window 对象)。例如,

  1. let a = this;
  2. console.log(a); // Window {}
  3. this.name = 'Sarah';
  4. console.log(window.name); // Sarah

这里,this.name 与 window.name 相同。

2. 函数中的 this

当 this 在函数中使用时,this 指的是全局对象(浏览器中的 window 对象)。例如,

  1. function greet() {
  2. // this inside function
  3. // this refers to the global object
  4. console.log(this);
  5. }
  6. greet(); // Window {}
3. 构造函数中的 this

在 JavaScript 中,构造函数用于创建对象。当函数用作构造函数时,this 指的是在其中使用它的对象。例如,

  1. function Person() {
  2. this.name = 'Jack';
  3. console.log(this);
  4. }
  5. let person1 = new Person();
  6. console.log(person1.name);

输出

  1. Person {name: "Jack"}
  2. Jack

这里,this 代表 person1 对象。这就是为什么,person1.name 返回 Jack。
    注意:当 this 与 ES6 类一起使用时,它指的是在其中使用它的对象(类似于构造函数)。

4. 对象方法中的 this

当 this 在对象的方法中使用时,this 指的是它所在的对象。例如,

  1. const person = {
  2. name : 'Jack',
  3. age: 25,
  4. // this inside method
  5. // this refers to the object itself
  6. greet() {
  7. console.log(this);
  8. console.log(this.name);
  9. }
  10. }
  11. person.greet();

输出

  1. {name: "Jack", age: 25, greet: ƒ}
  2. Jack

在上面的例子中,this 指的是 person 对象。

5. 内部函数中的 this

当您访问内部函数(在方法内部)中的 this时,this指的是全局对象。例如,

  1. const person = {
  2. name : 'Jack',
  3. age: 25,
  4. // this inside method
  5. // this refers to the object itself
  6. greet() {
  7. console.log(this); // {name: "Jack", age ...}
  8. console.log(this.age); // 25
  9. // inner function
  10. function innerFunc() {
  11. // this refers to the global object
  12. console.log(this); // Window { ... }
  13. console.log(this.age); // undefined
  14. }
  15. innerFunc();
  16. }
  17. }
  18. person.greet();

输出

  1. {name: "Jack", age: 25, greet: ƒ}
  2. 25
  3. Window { …}
  4. undefined

这里,在 innerFunc() 里的 this 代表全局对象,因为 innerFunc() 位于方法内部。
    然而,innerFunc() 外部的 this.age 代表 person 对象。

6. 箭头函数中的 this

在箭头函数内部,this 指的是父作用域。例如,

  1. const greet = () => {
  2. console.log(this);
  3. }
  4. greet(); // Window {...}

箭头函数没有自己的 this。当 this 在箭头函数内部使用时,this 指的是它的父作用域对象。例如,

  1. const greet = {
  2. name: 'Jack',
  3. // method
  4. sayHi () {
  5. let hi = () => console.log(this.name);
  6. hi();
  7. }
  8. }
  9. greet.sayHi(); // Jack

在这里,hi() 函数内部的 this.name 指的是 greet 对象。
    您还可以使用箭头函数来解决在方法中使用函数时的 undefined 问题(如示例5所示)。例如,

  1. const person = {
  2. name : 'Jack',
  3. age: 25,
  4. // this inside method
  5. // this refers to the object itself
  6. greet() {
  7. console.log(this);
  8. console.log(this.age);
  9. // inner function
  10. let innerFunc = () => {
  11. // this refers to the global object
  12. console.log(this);
  13. console.log(this.age);
  14. }
  15. innerFunc();
  16. }
  17. }
  18. person.greet();

输出

  1. {name: "Jack", age: 25, greet: ƒ}
  2. 25
  3. {name: "Jack", age: 25, greet: ƒ}
  4. 25

在这里,innerFunc() 是由箭头函数定义的。this 取自其父作用域。因此,this.age 给出 25。
    当箭头函数与 this 一起使用时,它指的是外部作用域。

7. 严格模式函数中的 this

在具有严格模式的函数中使用 this 时,this 是 undefined。例如,

  1. 'use strict';
  2. this.name = 'Jack';
  3. function greet() {
  4. // this refers to undefined
  5. console.log(this);
  6. }
  7. greet(); // undefined

注意:在严格模式的函数内部使用 this 时,可以使用JavaScript Function call()
    示例,

  1. 'use strict';
  2. this.name = 'Jack';
  3. function greet() {
  4. console.log(this.name);
  5. }
  6. greet.call(this); // Jack

当你用 call() 函数传递 this 时,greet() 被视为 this 对象(在这种情况下是全局对象)的方法。

上一教程 :JS Closure                                          下一教程 :JS use-strict

参考文档

[1] Parewa Labs Pvt. Ltd. (2022, January 1). Getting Started With JavaScript, from Parewa Labs Pvt. Ltd: https://www.programiz.com/javascript/this

相关文章

最新文章

更多