JS 相关

一、JS闭包

• 概念：如果一个内部函数引用了外部函数createCounter的变量count，并且这个内部函数回作为外部函数的返回值，就会形成闭包。其中变量 counter 就会常驻在内存中，形成“闭包内存泄漏”。

• function createCounter() {
    let count = 0;
    // 在JS中，所有函数都能访问它们上一层的作用域
    return function() {
      count++;
      return count;
    };
  }

• 作用：尽管闭包导致了内存泄露问题，但却可以打破函数作用域的限制，使外部函数createCounter和内部函数都能使用变量count（这里解释一下，因为我们知道count在内部函数的外面声明，它的作用域仅在内部函数外面生效，即内部函数是不能访问到它的，但闭包打破了这种限制），这种做法的好处就是实现了方法或属性的私有化，暴露出公共的修改count的方法（想修改count只能通过闭包函数）。后续闭包引申出柯里化、bind等概念。

• // 执行上面闭包代码
  const counter = createCounter();
  console.log(counter()); // 输出: 1
  console.log(counter()); // 输出: 2
  console.log(counter()); // 输出: 3

二、JS 异步Promise

• 概念：Promise 是一个 ECMAScript 6 提供的类，目的是更加优雅地书写复杂的异步任务，可以替代传统的解决方案--回调函数和事件。当需要多次顺序执行异步操作的时候，例如，如果想通过异步方法先后检测用户名和密码，需要先异步检测用户名，然后再异步检测密码的情况下就很适合 Promise。

• new Promise(function (resolve, reject) {
      console.log(“第一个输出”);
      resolve(“第一个then的参数”);
  }).then(function (value) {
      console.log(value);
      return “第二个then的参数”;
  }).then(function (value) {
      console.log(value);
      throw "An error";
  }).catch(function (err) {
      console.log(err);
  });
  
  // 输出
  第一个输出
  第一个then的参数
  第二个then的参数
  An error

• 详细介绍：ES6提供了Promise对象，其构造函数接受一个函数作为参数，该函数是同步的并且会立即执行（起始函数），它包含两个参数resolve和reject，分别表示promise成功和失败的状态。成功，则执行resolve函数并传递成功的结果，并执行then(promise成功的回调函数，then的参数可以是resolve提供的，也可以是上一个then的return提供的)。失败则执行reject，并执行catch(用于处理 Promise 失败状态的回调函数)。
• 注意：resolve 和 reject 的作用域只有起始函数，不包括 then 以及其他序列，并且不能使起始函数停止（要用return停止）。

三、JS继承

• 概念：类继承使用 extends 关键字，在构造方法中调用 super() 方法后就可以访问父类的属性和方法，底层机制仍然基于原型继承。实现继承有两个⽅⾯要考虑，一个是原型属性和⽅法的继承，另一个是构造器的继承。
• 几种继承方式：
  • 原型链继承：

  • // 父类
    function Animal(name) {
      this.name = name;
    }
     
    // 父类原型上定义了eat方法
    Animal.prototype.eat = function() {
      console.log(this.name + " is eating.");
    };
     
    // 子类
    // 使用 call 方法调用父类构造函数，设置 this 指向子类实例
    function Cat(name, breed) {
      Animal.call(this, name);
      this.breed = breed;
    }
     
    // 建立原型链，让 Cat 继承 Animal
    Cat.prototype = Object.create(Animal.prototype);
    Cat.prototype.constructor = Cat; //确保继承链上的构造函数正确。
     
    // 子类原型上定义了bark方法
    Cat.prototype.bark = function() {
      console.log(this.name + " is barking.");
    };
     
    var cat = new Cat("mini", "beef");
    cat.eat();  // 调用从 Animal 继承的方法
    cat.bark(); // 调用 Cat 的方法

  • ES6 类继承

  • // 父类 通过 class声明类  通过constructor定义属性
    class Animal {
      constructor(name) {
        this.name = name;
      }
     
      eat() {
        console.log(this.name + " is eating.");
      }
    }
     
    // 子类 通过extends继承父类，super调用父类的构造方法
    class Cat extends Animal {
      constructor(name, breed) {
        super(name);
        this.breed = breed;
      }
     
      bark() {
        console.log(this.name + " is barking.");
      }
    }
     
    const cat = new Cat("mini", "beef");
    cat.eat();
    cat.bark();

• getter、setter、static

• class Animal {
    constructor(name) {
      this.bigname = name;
    }
    get s_name() {
      return this.bigname;
    }
    set s_name(x) {
      this.bigname = x;
    }
    // 静态方法，不能在对象上调用，只能在类中调用
    static hello() {
      return "Hello!!";
    }
  }
   
  // 实例化后 cat为对象类型
  let cat = new Animal("mini");
  // set方法
  document.getElementById("demo").innerHTML = cat.bigname;
  
  // 可以在类中调用 'hello()' 方法
  document.getElementById("demo").innerHTML = Animal.hello();
   
  // 不能通过实例化后的对象调用静态方法,例如下面是错的
  // document.getElementById("demo").innerHTML = cat.hello();

四、JS的apply call bind 三种方法的异同

• 相同：

1. 都是JS中的用于调用函数的方法；
2. 都用来动态改变 this 指向，且不会改变原先函数的this指向。

• 不同点：

1. 传参方式不同。apply(thisTarget, arr) 接收两个参数，第一个参数thisTarget是函数体内this对象的指向，第二个参数 arr 是一个数组或类数组，它把这个数组里面的元素作为参数传递给被调用的函数；call(thisTarget, 参数1，参数2，参数3...)；bind(thisTarget, 参数1，参数2，参数3...) 与call一样。
2. 执行方式不同。apply和 call 会立即调用函数，它们会立即执行目标函数，并且传入指定的参数；bind 会延迟调用函数，它会创建一个新函数，并将目标函数与指定的 this 值和参数绑定在一起，但不会立即执行目标函数，而是返回一个新函数。这个新函数可以在以后的某个时间点被调用。
3. 修改this指向的有效性。apply和call仅临时生效一次，即调用的这一次；而 bind 可以只需要执行返回的函数，就可以多次执行。
4. 返回值不同。apply和call方法接受的返回值是被调用函数的返回值，bind接受的返回值是一个新函数。

• 实例：        

• // 定义一个对象
  const person = {
      name: 'Alice'
  };
  // 定义一个目标函数
  function greet(greeting, punctuation) {
      console.log(`${greeting}, ${this.name}${punctuation}`);
  }
  
  // 使用 apply 方法调用函数，并传递参数数组作为参数，同时修改 this 指向为 person 对象
  greet.apply(person, ['Hello', '!']);
  // 输出：Hello, Alice!
  
  // 使用 call 方法调用函数，并依次传递参数列表作为参数，同时修改 this 指向为 person 对象
  greet.call(person, 'Hi', '!');
  // 输出：Hi, Alice!
  
  // 使用 bind 方法绑定函数，并指定 this 值为 person 对象，同时传递参数
  const greetNew = greet.bind(person, 'Hey', '!');
  // 调用新函数
  greetNew ();
  // 输出：Hey, Alice!