函数参数作用域&this指向

2023-11-14 01:39:41

函数参数作用域

函数参数的作用域与局部变量的作用域相同，都是从函数被创建时开始，到函数执行结束为止。这意味着，函数参数只在函数内部有效，在函数外部无法访问。

以下代码演示了函数参数的作用域：

function add(a, b) {
  console.log(a); // 1
  console.log(b); // 2

  var c = 3;
  console.log(c); // 3
}

add(1, 2);

console.log(a); // ReferenceError: a is not defined
console.log(b); // ReferenceError: b is not defined
console.log(c); // ReferenceError: c is not defined

在上面的代码中，函数add()的两个参数a和b，以及局部变量c，都只在函数add()内部有效。当函数add()执行结束时，这三个变量都会被销毁，在函数外部无法访问。

this指向

this指向是指函数执行时，this所指向的对象。this指向在不同的场景下可能指向不同的对象，这取决于函数的调用方式。

普通函数：在普通函数中，this指向由函数的调用方式决定。如果函数作为对象的方法被调用，那么this指向该对象；如果函数作为独立函数被调用，那么this指向window对象。

箭头函数：箭头函数中的this指向始终指向其定义时的上下文对象。这意味着，箭头函数中的this指向与函数的调用方式无关。

以下代码演示了普通函数和箭头函数的this指向：

// 普通函数
function Person() {
  this.name = 'John';

  this.greet = function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

const person = new Person();
person.greet(); // Hello, my name is John.

// 箭头函数
const greetArrow = () => {
  console.log(`Hello, my name is ${this.name}.`);
}

person.greetArrow = greetArrow;
person.greetArrow(); // TypeError: Cannot read properties of undefined (reading 'name')

在上面的代码中，普通函数Person()中的this指向对象person，因此person.greet()可以正确地输出"Hello, my name is John."。然而，箭头函数greetArrow()中的this指向始终指向其定义时的上下文对象，即window对象。由于window对象没有name属性，因此person.greetArrow()会抛出错误。

场景

下表总结了普通函数和箭头函数在不同场景下的this指向：

场景	普通函数	箭头函数
作为对象的方法被调用	对象	对象
作为独立函数被调用	window	window
作为回调函数被调用	调用回调函数的对象	定义回调函数时的上下文对象
作为构造函数被调用	新创建的对象	新创建的对象
作为箭头函数的嵌套函数被调用	箭头函数中的this指向	箭头函数中的this指向