JavaScript基础篇04：函数的this和闭包

2024-02-19 02:51:18

this的指向规则

在JavaScript中，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

箭头函数：箭头函数的this指向的是声明函数时的上下文。

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

const person = {
  name: "John",
  greet: greet
};

person.greet(); // Hello, my name is John

显式绑定：可以使用call、apply和bind方法来显式绑定this。

const person = {
  name: "John"
};

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

greet.call(person); // Hello, my name is John
greet.apply(person); // Hello, my name is John
const boundGreet = greet.bind(person);
boundGreet(); // Hello, my name is John

闭包

闭包是指能够访问另一个函数作用域中变量的函数。闭包的本质是将函数的作用域与父函数的作用域链接起来，从而实现对父函数作用域中变量的访问。

function outerFunction() {
  let counter = 0;

  function innerFunction() {
    counter++;
    console.log(counter);
  }

  return innerFunction;
}

const innerFunction = outerFunction();
innerFunction(); // 1
innerFunction(); // 2

在上面的示例中，innerFunction是一个闭包，它可以访问outerFunction中的变量counter。即使outerFunction已经执行完毕，innerFunction仍然可以访问counter变量并对其进行修改。

闭包的应用

闭包在JavaScript中有着广泛的应用，其中包括：

事件处理：闭包可以用于保存事件处理函数中的数据，从而实现对事件的动态响应。

const buttons = document.querySelectorAll("button");

buttons.forEach((button) => {
  button.addEventListener("click", function() {
    console.log(button.id);
  });
});

私有变量：闭包可以用于创建私有变量，从而实现数据隐藏和信息封装。

function Counter() {
  let count = 0;

  this.increment = function() {
    count++;
  };

  this.getCount = function() {
    return count;
  };
}

const counter = new Counter();
counter.increment();
console.log(counter.getCount()); // 1

模块化：闭包可以用于创建模块，从而实现代码的组织和重用。

const module = (function() {
  let privateVariable = 0;

  function privateFunction() {
    privateVariable++;
  }

  return {
    publicVariable: 0,
    publicFunction: function() {
      privateFunction();
    }
  };
})();

module.publicVariable++;
module.publicFunction();
console.log(module.publicVariable); // 1