前端面试必备：掌握JS函数中的词法作用域与bind用法

2023-10-29 07:03:55

JS函数中的词法作用域与bind用法

在JS中，函数的词法作用域是指函数被定义时所在的代码块。当函数被调用时，它会继承词法作用域中的变量和函数。

function outer() {
  var a = 1;

  function inner() {
    console.log(a); // 1
  }

  inner();
}

outer();

在这个例子中，函数inner()的词法作用域是函数outer()，因此它可以访问变量a。

词法作用域与this

在JS中，this指向当前执行代码的上下文对象。在全局作用域中，this指向window对象。在函数作用域中，this指向函数本身。

console.log(this); // window

function outer() {
  console.log(this); // outer

  function inner() {
    console.log(this); // inner
  }

  inner();
}

outer();

在这个例子中，函数inner()的词法作用域是函数outer()，因此this指向函数outer()。

bind用法

bind()方法可以改变函数的this指向。它接受两个参数：第一个参数是this指向的对象，第二个参数是函数的参数。

function outer() {
  var a = 1;

  var inner = function() {
    console.log(this.a); // undefined
  };

  inner();

  inner.bind(this)(); // 1
}

outer();

在这个例子中，函数inner()的词法作用域是函数outer()，因此this指向函数outer()。当我们调用inner.bind(this)()时，this指向被改变为函数outer()，因此console.log(this.a)输出结果为1。

混合词法作用域与bind

混合词法作用域和bind并不是一种好的方式，因为它们可能会导致代码难以理解和维护。应该使用bind配合this，或者完全使用词法作用域。

// 混合词法作用域
var self = this;

function outer() {
  var a = 1;

  function inner() {
    console.log(self.a); // 1
  }

  inner();
}

outer();

// 使用bind配合this
function outer() {
  var a = 1;

  var inner = function() {
    console.log(this.a); // 1
  }.bind(this);

  inner();
}

outer();

// 完全使用词法作用域
function outer() {
  var a = 1;

  function inner() {
    console.log(a); // 1
  }

  return inner;
}

var inner = outer();

inner();