乐趣区

关于前端:现代JavaScript高级教程JavaScript函数上下文和this关键字

点击在线浏览,体验更好 链接
古代 JavaScript 高级小册 链接
深入浅出 Dart 链接
古代 TypeScript 高级小册 链接

函数上下文和 this 关键字

函数是 JavaScript 中最重要的概念之一,了解函数的定义和调用形式波及到多个知识点,特地是函数的上下文,即函数中的 this 关键字,是前端面试中必考的知识点。本文将介绍函数上下文、箭头函数以及修改 this 指向的办法。

1. 函数作为独立函数调用

思考以下脚本:

function printThis() {return this;}

console.log(printThis() === window);

输入后果:

  • 在严格模式下:false
  • 在非严格模式下:true

解析:
当函数被作为独立函数调用时,this指向不同,严格模式和非严格模式下有区别。在严格模式下,this指向 undefined;在非严格模式下,this 指向全局对象 window

2. 函数作为对象办法调用

思考以下脚本:

function printThis() {return this;}

const obj = {printThis};
console.log(obj.printThis() === obj);

输入后果:true

解析:
当函数被作为对象的办法调用时,其中的 this 指向该对象自身。在上述代码中,printThis 函数被作为 obj 对象的一个办法调用,所以 printThis 中的 this 指向 obj,而不是全局对象 window

3. 结构函数调用

思考以下脚本:

function Dog() {this.name = 'Puppy';}

const dog = new Dog();
console.log(dog.name);

输入后果:Puppy

解析:
在这段代码中,Dog 函数被当作结构函数调用,通过 new 关键字创立实例时,this 关键字会指向新创建的对象。因而,this.name = 'Puppy' 将在新创建的对象上设置 name 属性,最初打印出 Puppy

4. 构造函数返回对象

思考以下脚本:

const puppet = {rules: false};

function Emperor() {
  this.rules = true;
  return puppet;
}

const emperor = new Emperor();
console.log(emperor.rules);

输入后果:false

解析:
只管构造函数的 this 关键字指向通过构造函数构建的实例,但如果构造函数中应用 return 语句返回一个对象,则返回的对象将取代通过构造函数创立的实例。在上述代码中,Emperor 构造函数返回了 puppet 对象,因而 emperor 实例实际上就是 puppet 对象,其中的 rules 属性值为 false

5. 函数调用时应用 callapply

思考以下脚本:

function greet() {return `Hello, ${this.name}!`;
}

const person = {name: 'Alice'};

console.log(greet.call(person));  // 应用 call
console.log(greet.apply(person)); // 应用 apply

输入后果:

  • 应用 callHello, Alice!
  • 应用 applyHello, Alice!

解析:
通过应用函数的 callapply 办法,能够显式地指定函数执行时的上下文,即 this 的值。在上述代码中,greet.call(person)greet.apply(person) 中的 this 都被绑定到了 person 对象,所以打印出的后果都是 Hello, Alice!

6. 箭头函数的上下文

箭头函数的 this 绑定与惯例函数不同,箭头函数没有本人的 this 值,而是捕捉了关闭上下文的 this 值。思考以下脚本:

const obj = {
  name: 'Bob',
  greet: function() {const arrowFunc = () => {return `Hello, ${this.name}!`;
    };

    return arrowFunc();}
};

console.log(obj.greet());

输入后果:Hello, Bob!

解析:
在这段代码中,箭头函数 arrowFunc 没有本人的 this 值,而是捕捉了关闭上下文 greet 函数中的 this 值,即 obj 对象。所以 this.name 实际上指向 obj.name,打印出 Hello, Bob!

这就是 JavaScript 函数上下文和 this 关键字的一些重要概念和用法。

退出移动版