2023-3-22学习笔记

私有变量是什么

私有变量是指只能在类内部访问的变量。在JavaScript中，可以使用闭包来实现私有变量。在类中，可以使用下划线前缀来表示私有变量，但这只是一种约定，实际上这些变量仍然可以从类外部访问。如果你想确保变量只能在类内部访问，可以使用闭包来实现。以下是一个使用闭包实现私有变量的示例：

class Example {
  constructor() {
    let privateVar = 'I am private';

    this.getPrivateVar = function() {
      return privateVar;
    };

    this.setPrivateVar = function(value) {
      privateVar = value;
    };
  }
}

const example = new Example();
console.log(example.getPrivateVar()); // 'I am private'
example.setPrivateVar('Now I am public');
console.log(example.getPrivateVar()); // 'Now I am public'
console.log(example.privateVar); // undefined

在这个例子中，私有变量privateVar只能通过getPrivateVar和setPrivateVar方法访问和修改，而不能直接访问。这是因为privateVar是在构造函数中定义的，只能在构造函数的作用域内访问。但是，由于getPrivateVar和setPrivateVar方法是在构造函数的作用域内定义的，它们可以访问privateVar变量。由于这些方法是在类的原型上定义的，因此它们可以在类的实例上调用。这样，我们就可以实现私有变量的效果。

new关键字的作用

new 关键字会进行如下的操作：

1. 创建一个空的简单 JavaScript 对象（即 {}）；

2. 为步骤 1 新创建的对象添加属性 __proto__，将该属性链接至构造函数的原型对象；

3. 将步骤 1 新创建的对象作为 this 的上下文；

4. 如果该函数没有返回对象，则返回 this。

当代码 new Foo(...) 执行时，会发生以下事情：

5. 一个继承自 Foo.prototype 的新对象被创建。

6. 使用指定的参数调用构造函数 Foo，并将 this 绑定到新创建的对象。new Foo 等同于 new Foo()，也就是没有指定参数列表，Foo 不带任何参数调用的情况。

7. 由构造函数返回的对象就是 new 表达式的结果。如果构造函数没有显式返回一个对象，则使用步骤 1 创建的对象。（一般情况下，构造函数不返回值，但是用户可以选择主动返回对象，来覆盖正常的对象创建步骤）

Promise.all

Promise.all()是一个非常有用的函数，它可以将多个Promise对象组合成一个Promise对象。当所有的Promise对象都成功时，Promise.all()返回一个包含所有Promise结果的数组；当其中一个Promise对象失败时，Promise.all()返回一个失败的Promise对象。

以下是一个使用Promise.all()的示例：

const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
const promise3 = Promise.resolve(3);

Promise.all([promise1, promise2, promise3])
  .then(values => {
    console.log(values); // [1, 2, 3]
  });

在这个例子中，我们创建了三个Promise对象，每个Promise对象都返回一个数字。然后，我们使用Promise.all()将这三个Promise对象组合成一个Promise对象，并在所有Promise对象都成功时打印它们的结果。

需要注意的是，Promise.all()只有在所有Promise对象都成功时才会成功，如果其中一个Promise对象失败了，Promise.all()就会失败。因此，在使用Promise.all()时，我们需要确保所有的Promise对象都能够成功执行。

async函数

async函数是ES2017引入的一个新特性，它可以让我们更方便地编写异步代码。async函数实际上是一个返回Promise对象的函数，它内部使用await关键字来等待异步操作的结果。

以下是一个使用async函数的示例：

async function example() {
  const result1 = await someAsyncOperation1();
  const result2 = await someAsyncOperation2();
  const result3 = await someAsyncOperation3();

  return [result1, result2, result3];
}

example()
  .then(results => {
    console.log(results);
  });

在这个例子中，我们定义了一个async函数example()，它内部使用await关键字来等待三个异步操作的结果。当所有异步操作都完成后，example()函数返回一个包含三个结果的数组。然后，我们调用example()函数，并在其返回的Promise对象上使用.then()方法来处理结果。

需要注意的是，async函数内部的代码是顺序执行的，即使其中包含了异步操作。这是因为await关键字会暂停函数的执行，直到异步操作完成并返回结果。因此，async函数可以让我们更方便地编写异步代码，而不必使用回调函数或Promise对象的链式调用。

await表达式

await表达式是async函数的一个关键字，它用于等待一个异步操作的结果。当await表达式被执行时，它会暂停async函数的执行，直到异步操作完成并返回结果。然后，await表达式会返回异步操作的结果，并恢复async函数的执行。

以下是一个使用await表达式的示例：

async function example() {
  const result = await someAsyncOperation();
  console.log(result);
}

example();

在这个例子中，我们定义了一个async函数example()，它内部使用await表达式来等待一个异步操作的结果。当异步操作完成后，example()函数会打印异步操作的结果。

需要注意的是，await表达式只能在async函数内部使用。如果在非async函数中使用await表达式，会导致语法错误。此外，await表达式只能用于返回Promise对象的异步操作，如果使用在非Promise对象上，会导致语法错误。

this的指向

在 JavaScript 中，this 的指向是非常灵活的，它的值取决于函数的调用方式。通常情况下，this 的值有以下几种情况：

• 在函数中，this 的值取决于函数的调用方式。如果函数是作为对象的方法调用，那么 this 的值就是这个对象；如果函数是作为普通函数调用，那么 this 的值就是全局对象（浏览器中是 window，Node.js 中是 global）。

• 在事件处理函数中，this 的值通常是触发事件的元素。

• 在构造函数中，this 的值是新创建的对象。

• 在箭头函数中，this 的值是定义时的 this，而不是运行时的 this。

• 在call和apply中，this指向第一个参数，即被扩展的作用域对象

如果你想判断一个函数中 this 的值，可以通过以下几种方式：

• 如果函数是作为对象的方法调用，那么 this 的值就是这个对象。可以通过 obj.method() 的方式来调用函数，其中 obj 是对象。

• 如果函数是作为普通函数调用，那么 this 的值就是全局对象。可以通过 func() 的方式来调用函数，其中 func 是函数名。

• 如果函数是作为构造函数调用，那么 this 的值是新创建的对象。可以通过 new Func() 的方式来调用函数，其中 Func 是构造函数名。

• 如果函数是作为事件处理函数调用，那么 this 的值通常是触发事件的元素。可以通过 element.addEventListener('click', func) 的方式来注册事件处理函数，其中 element 是元素，func 是函数名。

• 如果函数是箭头函数，那么 this 的值是定义时的 this，而不是运行时的 this。可以通过 () => {} 的方式来定义箭头函数。

发现一篇写的不错的文章：js-箭头函数中的this指向

console.dir

console.dir() 方法可以显示指定 JavaScript 对象的属性列表，并以交互式的形式展现。输出结果呈现为分层列表，包含展开/折叠的三角形图标，可用于查看子对象的内容。

换句话说，console.dir() 是一种在控制台中查看指定 JavaScript 对象的所有属性的方法，开发人员可以通过这种方式轻松获取对象的属性。