this的全面解析与实战，掌握函数对象作用域中的“灵魂人物”

2023-11-21 18:49:27

this的绑定规则

JavaScript中的this是一个，它代表函数执行时的当前对象。this的绑定规则非常复杂，它取决于函数的执行环境和调用方式。

1. 默认绑定

在JavaScript中，函数的默认绑定方式是词法绑定，这意味着this的值在函数定义时就已经确定了。词法绑定也称为静态绑定，它与函数的执行环境无关。

例如，我们定义了一个函数foo并执行，在函数体中我们通过this.name来访问函数对象本身的name属性：

function foo() {
  console.log(this.name);
}

var person = {
  name: 'John'
};

foo.call(person); // John

在这个例子中，函数foo被调用时，this绑定到了person对象，因为foo是作为person对象的方法被调用的。

2. 隐式绑定

隐式绑定是指this的值是由函数的执行环境决定的。在JavaScript中，隐式绑定通常发生在以下几种情况下：

当函数作为对象的方法被调用时，this绑定到该对象。
当函数作为事件处理函数被调用时，this绑定到触发该事件的元素。
当函数作为构造函数被调用时，this绑定到新创建的对象。

例如，我们定义了一个对象person，并在person对象中定义了一个方法getName，getName方法中通过this.name来访问person对象的name属性：

var person = {
  name: 'John',
  getName: function() {
    console.log(this.name);
  }
};

person.getName(); // John

在这个例子中，getName方法被作为person对象的方法调用，因此this绑定到了person对象。

3. 显式绑定

显式绑定是指通过bind()方法来显式指定this的值。bind()方法返回一个新的函数，这个新函数的this值被显式绑定到了指定的参数。

例如，我们定义了一个函数foo，并通过bind()方法将this显式绑定到了person对象：

function foo() {
  console.log(this.name);
}

var person = {
  name: 'John'
};

var boundFoo = foo.bind(person);
boundFoo(); // John

在这个例子中，boundFoo是foo函数的一个新副本，它的this值被显式绑定到了person对象。

this的作用域

this的作用域是指this值能够访问的变量和对象。this的作用域由函数的执行环境决定。

1. 全局作用域

全局作用域是指this值能够访问全局变量和对象。全局变量和对象是那些在函数外声明的变量和对象。

例如，我们定义了一个全局变量name，并定义了一个函数foo，在foo函数中通过this.name来访问全局变量name：

var name = 'John';

function foo() {
  console.log(this.name);
}

foo(); // John

在这个例子中，foo函数是在全局作用域中执行的，因此this绑定到了全局对象window，全局变量name可以通过this.name来访问。

2. 局部作用域

局部作用域是指this值能够访问局部变量和对象。局部变量和对象是那些在函数内声明的变量和对象。

例如，我们定义了一个函数foo，并在foo函数中定义了一个局部变量name，通过this.name来访问局部变量name：

function foo() {
  var name = 'John';
  console.log(this.name);
}

foo(); // John

在这个例子中，foo函数是在全局作用域中执行的，但是局部变量name只在foo函数内有效，因此this.name访问的是局部变量name。

3. 闭包作用域

闭包作用域是指this值能够访问闭包中的变量和对象。闭包是那些能够访问其定义作用域之外的变量和对象的函数。

例如，我们定义了一个函数foo，并在foo函数中定义了一个闭包函数bar，在bar函数中通过this.name来访问闭包中的变量name：

function foo() {
  var name = 'John';

  function bar() {
    console.log(this.name);
  }

  return bar;
}

var baz = foo();
baz(); // John

在这个例子中，foo函数在全局作用域中执行，但是闭包函数bar可以在其定义作用域之外被调用。当bar函数被调用时，this绑定到了foo函数的闭包作用域，闭包中的变量name可以通过this.name来访问。

this在JavaScript中的实战应用

this在JavaScript中的实战应用非常广泛，以下是一些常见的例子：

作为对象的方法 ：this可以作为对象的方法来访问对象本身的属性和方法。例如，我们可以定义一个person对象，并在person对象中定义一个getName方法，通过this.name来访问person对象的name属性：

var person = {
  name: 'John',
  getName: function() {
    console.log(this.name);
  }
};

person.getName(); // John

作为事件处理函数 ：this可以作为事件处理函数来访问触发该事件的元素。例如，我们可以定义一个按钮元素，并为该按钮元素添加一个点击事件处理函数，通过this来访问触发点击事件的按钮元素：

var button = document.getElementById('button');

button.addEventListener('click', function() {
  console.log(this); // <button id="button">...</button>
});

作为构造函数 ：this可以作为构造函数来访问新创建的对象。例如，我们可以定义一个Person构造函数，并在Person构造函数中定义一个getName方法，通过this.name来访问新创建的对象的name属性：

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

  this.getName = function() {
    console.log(this.name);
  };
}

var person = new Person('John');

person.getName(); // John