词法作⽤域和this的区别

JavaScript中，词法作用域（Lexical Scope）和this都是与变量查找和函数调用相关的重要概念，但它们之间存在一些区别。

私信【学习】即可获取更多前端资料！！！

词法作用域：
词法作用域是指代码中定义变量的区域，它决定了变量的可见性和访问权限。在JavaScript中，词法作用域是由代码书写的位置决定的，而不是由函数调用的位置决定的。常见的作用域有全局作用域、函数作用域和块级作用域。

• 全局作用域：在代码的最外层定义的变量和函数具有全局作用域，它们在整个代码文件中都是可见的。
• 函数作用域：在函数内部定义的变量和函数具有函数作用域，它们只在该函数内部可见。
• 块级作用域：使用let和const关键字定义的变量具有块级作用域，它们只在定义它们的代码块内可见。

this：
this是一个特殊的关键字，它在函数被调用时确定，代表了函数执行上下文中的对象。this的值取决于函数调用的方式和上下文环境。常见的情况包括：

• 全局函数调用：在非严格模式下，如果函数作为全局函数调用（不在对象方法或构造函数中），this指向全局对象（在浏览器中是window）。
• 对象方法调用：当函数作为对象的方法调用时，this指向调用该方法的对象。
• 构造函数调用：当使用new关键字调用函数时，this指向新创建的实例对象。
• 事件处理函数：在事件处理函数中，this通常指向触发事件的元素。

需要注意的是，箭头函数不绑定自己的this，它会继承上层作用域中的this值。

以下是一个示例代码，展示了词法作用域和this的区别：

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name);
};

const john = new Person('John');
john.sayHello(); // 输出：Hello, my name is John

// 词法作用域示例
function outerFunction() {
  const outerVar = 'outer';

  function innerFunction() {
    const innerVar = 'inner';
    console.log(outerVar); // 可以访问外部函数的变量
    console.log(innerVar); // 可以访问内部函数的变量
  }

  innerFunction();
}

outerFunction(); // 输出：outer undefined

在上述代码中，Person构造函数中的this.name使用了this来引用当前创建的对象实例。而在outerFunction和innerFunction中，通过词法作用域的规则，内部函数可以访问外部函数的变量。

私信【学习】即可获取更多前端资料！！！