this，原型链，继承和闭包：JS基础概念全解析

2023-12-31 19:36:55

this
在JavaScript中，this代表当前执行的函数或方法所属的对象。this的值可以通过不同的方式确定，具体取决于函数或方法的调用方式。

作为对象的方法调用时，this指向调用该方法的对象。

const person = {
  name: 'John',
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

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

作为函数调用时，this指向全局对象window。

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

greet(); // Hello, my name is undefined.

作为构造函数调用时，this指向新创建的对象。

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

const person = new Person('John');

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

原型链

每个JavaScript对象都包含一个名为__proto__的属性，该属性指向该对象的原型对象。原型对象也是一个JavaScript对象，它包含了该对象继承的属性和方法。

当我们访问一个对象的属性或方法时，JavaScript会首先在该对象中查找该属性或方法。如果没有找到，则会沿着原型链向上查找，直到找到该属性或方法。

const person = {
  name: 'John',
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

const student = Object.create(person);
student.name = 'Jane';

student.greet(); // Hello, my name is Jane.

在上面的示例中，student对象继承了person对象的属性和方法。当我们调用student.greet()方法时，JavaScript会首先在student对象中查找greet方法。如果没有找到，则会沿着原型链向上查找，直到找到person对象的greet方法。

继承

JavaScript中的继承是通过原型链实现的。当一个对象继承另一个对象时，它会获得另一个对象的属性和方法。

有两种主要的继承方式：

原型继承： 这是JavaScript中最常见的继承方式。当一个对象被创建时，它会自动继承其原型对象的属性和方法。

const person = {
  name: 'John',
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

const student = Object.create(person);
student.name = 'Jane';

student.greet(); // Hello, my name is Jane.

类继承： ES6中引入了一种新的继承方式，即类继承。类继承允许我们使用更简洁的语法来定义继承关系。

class Person {
  constructor(name) {
    this.name = name;
  }

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

class Student extends Person {
  constructor(name, major) {
    super(name);
    this.major = major;
  }

  study() {
    console.log(`I'm studying ${this.major}.`);
  }
}

const student = new Student('Jane', 'Computer Science');

student.greet(); // Hello, my name is Jane.
student.study(); // I'm studying Computer Science.

在上面的示例中，Student类继承了Person类。当我们创建一个Student对象时，该对象会自动继承Person类的属性和方法。当我们调用student.greet()方法时，JavaScript会首先在Student对象中查找greet方法。如果没有找到，则会沿着原型链向上查找，直到找到Person对象的greet方法。

闭包

闭包是指能够访问其他函数作用域内的变量的函数。

闭包在JavaScript中很常见，它们可以用于实现各种各样的功能，例如：

模块化： 闭包可以帮助我们组织代码，使代码更易于维护。

function createModule() {
  const privateVariable = 'secret';

  return {
    publicMethod: function() {
      console.log(privateVariable);
    }
  };
}

const module = createModule();
module.publicMethod(); // secret

私有变量： 闭包可以帮助我们创建私有变量，即只能在函数内部访问的变量。

function createCounter() {
  let count = 0;

  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
counter(); // 1
counter(); // 2
counter(); // 3