深入理解JavaScript函数的作用域与this指向

函数作用域与this指向概述

函数的作用域与this指向是JavaScript中至关重要且容易混淆的概念，理清它们之间的关系需要清晰的逻辑框架。

为了便于阅读，这里整理了一份提纲，读者可以根据兴趣直接查阅相关条目。

提纲主要涵盖以下方面：函数的定义方式（包括直接定义、对象方法、原型方法）、调用方式（直接调用、call/apply、with），以及作用域和this的具体行为。

在调用方式上，主要涉及直接调用、使用call或apply方法，以及使用with语句。

对于直接定义的函数和作为对象方法存在的函数，其作用域在默认状态下遵循定义时的作用域链。

如果是直接定义的函数，其内部的this关键字默认指向全局对象window。

如果是对象的方法，this则指向调用该方法的实例化对象，这符合实例化对象默认返回this的机制。

可以通过call或apply方法来动态改变方法的this指向。

在函数或方法定义时，可以使用with语句来改变其作用域链。

接下来将分部分具体阐述上述要点。

函数定义方式与this行为分析

函数的定义方式主要分为两类：直接定义（在window作用域或内部作用域中定义）和对象方法（包括对象原型上的方法）。通过示例代码可以看出，函数fn1、fn2以及对象方法doFunction在使用name变量时，其值来源于各自定义时的作用域。

var name = 'window下的name<br/>';
var resultCon;
function fn1() {
  resultCon.innerHTML += name;
}

function MyObj() {
  var name = 'MyObj下的name<br/>';
  this.doFunction = function() {
    resultCon.innerHTML += name;

如果在访问name变量时，将其替换为this.name，会发生什么情况？请参考以下示例代码。

var name = 'window下的name<br/>';
var resultCon;
function fn1() {
  resultCon.innerHTML += this.name;
}

function MyObj() {
  var name = 'MyObj下的name<br/>';
  this.doFunction = function() {
    resultCon.innerHTML += this.name;

从运行结果可以验证提纲中的第4和第5条结论：this和作用域是两套独立的链，遵循各自的变量查询逻辑。具体的查询机制将在后续的性能分析中提及，建议新手先掌握“JavaScript作用域链”的基础知识。

函数调用方式：call、apply与with

关于函数的调用方法，通过以下示例代码说明提纲中的第2和第6条内容。

var name = 'window下的name<br/>';
var resultCon;
function fn1() {
  resultCon.innerHTML += this.name;
}

function MyObj() {
  var name = 'MyObj下的name<br/>';
  this.doFunction = function() {
    resultCon.innerHTML += this.name;

调用时，使用call和apply的目的是改变被调用函数的this指向；而使用with则是为了改变被调用函数中变量的查询域。我们将上例中的call和name前的this去掉，并加入with语句来演示其作用。

var name = 'window下的name<br/>';
var resultCon;
function fn1(myScope) {
  with (myScope) {
    resultCon.innerHTML += name;
  }
}

function MyObj(myScope) {
  var name = 'MyObj下的name<br/>';

可以看出，with的使用并不便捷，需要在被调用函数内部添加with块。有人可能会问，能否像下面这样通过调用方式整体改变变量作用域，而不修改被调用函数本身？

with (myScope) {
  fn1();
  fn2();
  var obj = new MyObj();
  obj.doFunction();
}

遗憾的是，这样做不可行。因此，在成熟的JavaScript框架中，call和apply的使用非常普遍，而with却很少见。在使用JSHint检测JavaScript语法时，with语句会被标记为错误（小红点），许多JavaScript编码规范也建议尽量少用with。这是因为with改变了变量的默认查询链，会给后期维护人员带来困惑，同时也存在性能方面的考量，因此请谨慎使用with。

以上关于JavaScript函数作用域与this指向的深入解析就是全部内容，希望能对大家有所帮助，也希望大家多多支持本站。