mm

[sunnychuai]

一、JS 基础知识 闭包 原型 原型链 继承 New 关键字 1、创建一个空对象，并且this变量引用该对象，同时继承了该函数的原型 2、属性和方法被加入到this引用的对象中 3、新创建的对象由this所引用，并且最后隐式的返回this 1、创建一个空对象，作为要返回的对象实例 2、将这个空对象的原型，指向构造函数的prototype属性 3、将这个空对象赋值给函数内部的this关键字 4、开始执行构造函数内部的代码，如果函数内部有return 语句，而且return 后跟着一个对象，则返回return语句指定的对象；否则，就不管return 语句，返回this对象（新创建的空对象）。

this 指向 面向对象 设计模式 数组去重 Array.from(new Set([1, 2, 3, 3])) [...new Set([1, 2, 3, 3])] 排序算法

防抖函数

ES6 新语法 let 用来声明变量 只在let命令所在的代码块内有效。

• 不能重复声明，不允许相同的作用域内，重复声明同一个变量。
• 不存在变量提升，要在声明后使用，否则会报错
• 暂时性死区，在区块中内形成封闭作用域，凡在声明之前就是用变量就会报错。在代码块内，声明变量之前，不可用。 块级作用域 大括号定义了一个块级作用域 ES5只有全局作用域和函数作用域。 不合理的场景：
• 内层变量会覆盖外层变量
• 循环变量泄露为全局变量 块级作用域的出现，使得匿名立即执行函数表达式不再必要了。
• 允许在块级作用域中声明函数
• 函数声明类似于var,即会提升到全局作用域或函数作用域的头部
• 函数声明还会提升到所在的块级作用域的头部 避免在块级作用域中声明函数，如果确实需要，也应该写成函数表达式，而不是函数声明语句。 const 用来声明常量，一旦声明，常量的值就不能改变。 一旦声明 就必须立即初始化赋值。只声明 不赋值就会报错。
• 只在声明所在的块级作用域内有效。
• 不提升
• 暂时性死区
• 不可重复声明 const 实际上保证的并不是值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。简单类型的数据（数值、字符串、布尔值），值就保存在变量执行的那个内存地址，因此等同于常量。但对于引用类型的数据（对象、数组）变量指向的内存地址，保存的是一个指向实际数据的指针，const只能保证指针是固定的，至于它指向的数据结构是不是可变的，就完全不能控制了。 ES6 声明变量的六种方法
• var
• function
• let
• const
• import
• class 顶层对象的属性 顶层对象，浏览器环境：window对象，Node环境：global对象 ES5中，顶层对象的属性与全局变量等价 ES6中，var 和 function命令声明的全局变量 依旧是顶层对象；let const 声明的全局变量，不属于顶层对象的属性。 变量的解构 字符串、数值、数组、对象、函数、正则新增的扩展和方法 箭头函数 使用箭头(=>)定义函数
• 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
• 不可以当做构造函数，也就是说，不可以使用new 命令，否则会抛出一个错误
• 不可以使用arguments对象，该对象在函数体内不存在，如果要用，可以使用rest参数代替
• 不可以使用yield命令，因此箭头函数不能用作Genetor函数。 不适合场景
• 定义对象的方法，且方法内部包括this。

  const cat = {
      lives: 9,
      jumps: () => {
          this.lives--; // this指向window对象，而不是cat
      }
  }

• 需要动态this的时候，也不应使用箭头函数。

  var button = document.getElementById('press');
  button.addEventListener('click', () => {
      this.classList.toggle('on');
  });

  这时this是全局对象，点击按钮会报错。

symbol 新增原始数据类型，表示独一无二的值 JS的七种数据类型：字符串、数值、布尔值、对象、null、undefined、symbol 对象的属性名现在可以有两种类型,一种是字符串，另一种就是Symbol类型。

• 值通过Symbol函数生成。
• 不能使用new命令，否则会报错。
• Symbol函数接受一个字符串作为参数，表示对Symbol实例的描述。sym.description
• 不能与其他类型的值进行运算
• 可以显示的转为字符串 String(sym)或sym.toString()
• 可以转为布尔值，但不能转为数值。Boolean(sym) // true 使用场景
• 作为对象的属性名，防止出现同名的属性。
  • 作为属性名时，不能用点运算符。
  • 必须放在方括号中。
  • 遍历对象时，该属性不会出现在for...in、for...of循环中，也不会被Object.keys()、Object.getOwnPropertyNames()、JSON.stringfy()返回。
  • 公有属性，Object.getOwnPropertySymbols()方法获得属性名。返回一个数组，成员是当前对象的所有用作属性名的Symbol值。或者Reflect.ownKeys()获得所有类型的键名
• 单例模式：调用一个类，任何时候返回的都是同一个实例。 Set和Map数据结构 Set：新的数据结构，类似于数组，但成员的值都是唯一的，没有重复的值。 Set 本身是一个构造函数，用来生成Set数据结构。可以接受一个数组作为参数，用来初始化。 Set实例的属性和方法
• Set.prototype.constructor: 构造函数，默认是Set函数
• Set.prototype.size：返回Set成员总数 操作方法
• Set.prototype.add 添加某个值，返回Set结构本身
• Set.prototype.delete 删除某个值，返回一个布尔值，表示删除是否成功
• Set.prototype.has 返回一个布尔值，表示该值是否为Set 成员
• Set.prototype.clear 清除所有成员，没有返回值 Array.from()方法可以将Set结构转为数组 使用场景
• 数组去重，字符串去除重复

  [...new Set([1, 2, 2, 4, 4])]
  或者
  Array.from(new Set([1, 2, 2, 4, 4]))

  遍历方法

• Set.prototype.keys() 键名的遍历器
• Set.prototype.values() 键值得遍历器
• Set.prototype.entries() 键值对的遍历器
• Set.prototype.forEach() 遍历每个成员 遍历顺序就是插入的顺序。 Set结构没有键名，只有键值（或者说键名和键值是同一值）

  let set = new Set([1, 4, 9])
  set.forEach((value, key) => console.log(`${key}:${value}`))
  // 1: 1
  // 4: 4
  // 9: 9

  可以使用for...of遍历Set 扩展运算符（...） 改变Set结构的两种方法

• 转为数组后改变值，再赋值给原来的Set结构

  let set = new Set([1, 2, 3])
  set = new Set([...set].map(val => val * 2))

• Array.from方法，操作数据后再赋值给原来的Set结构

  let set = new Set([1, 2, 3])
  set = Array.from(set, val => val * 2)

  Map结构：类似于对象，但是键不限于字符串，各种类型的值都可以作为键。 Map的键实际上是跟内存地址绑定的，只要内存地址不一样，就视为两个键。 实例的属性操作方法

• size 返回Map结构的成员总数
• set(key, value) 设置键名key的值为value，返回整个Map结构
• get(key) 读取key对应的键值，找不到返回undefined
• has(key) 某个键是否在当前Map对象中，返回一个布尔值
• delete(key) 删除某个键，返回布尔值表示是否删除成功
• clear() 清除所有成员 遍历方法
• keys()
• values()
• entries()
• forEach() 遍历顺序就是插入顺序。

  const map = new Map([
  [1, "one"],
  [2, "two"],
  [3, "three"],
  ]);
  [...map.keys()] // [1, 2, 3]
  [...map.values()] // ["one", "two", "three"]
  [...map] // [[1, "one"], [2, "two"], [3, "three"]]

  与其他数据结构的互换

• 数组 Map->数组，使用扩展运算符 数组->Map，传入Map函数
• 对象 Map->对象

  let obj = Object.create(null);
  for(let [k, v] of map) {
      obj[k] = v;
  }

  对象->Map

  let map = new Map();
  for(let k of obj) {
      map.set(k, obj[k])
  }

• JSON Map->JSON 键名都是字符串,转为对象JSON 键名有非字符串，转为数组JSON JSON->Map 键名都是字符串，JSON.parse('{"yes": true, "no": false}') 整个JSON是个数组，且每个数组本身又是一个有两个成员的数组，new Map('[[true,7],[{"foo":3},["abc"]]]') Proxy 用来修改某些操作的默认行为，等同于在语音层面做出修改，即对编程语言进行编程。

Proxy，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外面的访问进行过滤和改写。

var proxy = new Proxy(target, handler);

• target 所要拦截的目标对象
• handler 也是一个对象，用来定制拦截行为 实例的方法
• get(target, property) 拦截某个属性的读取操作
• set(obj, prop, value) 拦截某个属性的赋值操作
• apply(target, ctx, args) 拦截函数的调用、call、apply操作
• has() 用来拦截hasOwnProperty
• consctruct() 用来拦截new命令
• deleteProperty() 用于拦截delete操作
• defineProperty() 拦截Object.defineProperty操作 Proxy对象的this问题 在Proxy代理时，目标对象内部的this会指向Proxy代理。 Promise 所谓Promise是一个对象，里面保存着某个未来才会结束的事件的结果。 Promise对象的两个特点
• 状态不受外界的影响。三种状态：pending(进行中)、fulfilled(已成功)、rejected(已失败)。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。
• 状态一旦变了就不会再变，任何时候都可以得到这个结果。状态的改变只能从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固，不会再变了，会一直保持这个结果，这时成为resolved(已定型)。 优点 Promise对象，将异步操作以同步的流程表达出来，避免了层层嵌套回调函数。 缺点
• 无法取消Promise，一旦新建立即执行，无法中途取消。
• 如果不设置回调函数，Promise内部跑出错误不会反应到外部。
• 当处于pending状态时，无法得知目前进展到哪一阶段。

  const promise = new Promise((resolve, reject) => {
  if (/* 异步操作成功*/) {
      resolve(value);
  } else {    
      reject(error);
  }
  })

  resolve函数，将Promise对象状态从未完成变为成功（即pending变为resolved）,在异步操作成功时调用，并将异步操作的结果作为参数传递出去。 reject函数，将Promise对象的状态从未完成变为失败（即pending变为rejected），在异步操作失败时调用，并将失败操作报出的错误，作为参数传递出去。

  // Promise 对象实现Ajax操作
  const getJson = (url) => {
  const promise = new Promise((resolve, reject) => {
      const handler = () => {
          if(this.readyState !== 4) {
              return;
          }
          if (this.status === 200) {
              resolve(this.response);
          } else {
              reject(new Error(this.statusText))
          }
      }
      const client = new XMLHttpRequest();
      client.open("GET", url);
      client.onreadystateChange = handler;
      client.responseType = "json";
      client.setRequestHeader("Accept", "application./json");
      client.send();
  })
  return promise;
  }
  getJson("/post.json").then((json) => {
  console.log("成功了", json)
  }, (error) => {
  console.log("出错了", error)
  })

then方法，接受两个回调函数作为参数。第一个状态变为resolved时调用，第二个状态变为rejected时调用。返回一个新的Promise实例。

catch方法是.then(null, rejection)或.then(undefined, rejection)的别名，用于指定发生错误时的回调函数。

getJSON('/post/1.json').then(function(post) {
  return getJSON(post.commentURL);
}).then(function(comments) {
  // some code
}).catch(function(error) {
  // 处理前面三个Promise产生的错误
});

finally方法用于指定不管Promise对象最后的状态如何，都会执行的操作。与状态无关，不依赖Promise的执行结果。

all方法用于将多个Promise实例，包装成一个新的Promise实例。

const p = Promise.all([p1, p2, p3])

p的状态由p1,p2,p3决定，分成两种情况

• 只有p1,p2,p3的状态都变成fulfille，p的状态才会变成fulfilled，此时，p1,p2,p3的返回值组成一个数组传递给p的回调函数。
• 只要p1,p2,p3之中有一个被rejected,p的状态就会变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。 如果作为参数的Promise实例，自己定义了catch方法那么它一旦被rejected，并不会触发Promise.all()的catch()方法

race方法将多个Promise实例包装成一个新的Promise实例。

const p = Promise.race(p1, p2, p3)

只要p1,p2,p3之中一个实例率先改变状态，p的状态就跟着改变。

Promise.resolve() 将现有对象转为Promise对象。

Promise.resolve("foo")
// 等价于
new Promise(resolve => resolve("foo"))

• 参数是一个Promise实例，将不做任何修改，原封不动的返回整个实例。
• 参数是一个thenable对象 thenable对象指的是具有then方法的对象。 Promise.resolve方法会将这个对象转为Promise对象，然后立即执行thenable对象的then方法。
• 参数不是具有thenable方法的对象，或根本不是对象 返回一个新的Promise对象，状态为resolved
• 不带任何参数 返回一个resolved状态的Promise对象 立即resolve()的Promise对象，是在本轮事件循环的结束时执行，而不是下一轮的事件循环的开始时

  setTimeout(() => {
      console.log(3)
  })
  Promise.resolve().then(() => {
      console.log(2)
  })
  console.log(1)
  // 1
  // 2
  // 3

Promise.reject()方法也会返回一个新的Promise实例，该实例的状态为rejected。

const p = Promise.reject("出错了")
// 等价于
const p = new Promise((resolve, reject) => reject("出错了"))

Promise.reject()方法的参数，会原封不动的作为reject的理由，变成后续方法的参数

Iterator遍历器 一种接口，为各种不同的数据结构提供统一的访问机制。

• 为各种数据结构提供统一的、简便的的访问接口
• 使得数据结构的成员能按某种次序排列
• ES6创造了一种的遍历命令 for...in 循环，Iterator接口主要供for...of消费

async/await 是Generator函数的语法糖。 async 函数返回一个Promise对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

// 函数声明
async function foo () {}
// 函数表达式
cont foo = async function() {}
// 对象的方法
let obj = { async foo() {} };
// class的方法
class Storage {
    constructor() {
        this.cachePromise = caches.open("123");
    }

    async getAvatar(name) {
        const cache = await this.cachePromise;
        return cache;
    }
}
// 箭头函数
const foo = async () => {};

使用注意点

• await命令后面的Promise对象，运行结果可能是rejected，所以最好把await命令放在try...catch代码块中
• 多个await命令后面的异步操作，如果不存在继发关系，最好让它们同时触发

• await命令只能在用async函数中，如果用在铍铜函数，就会报错。 class 定义类

  function Pointer(x, y) {
  this.x = x
  this.y = y
  }
  Pointer.prototype.toString = fucntion () {
  return '(' + this.x + ', ' + this.y + ')';
  }
  var p = new Pointer(1, 2);

  class Pointer {
  contructor(x, y) {
      this.x = x;
      this.y = y
  }
  
  toString() {
      return '(' + this.x + ', ' + this.y + ')';
  }
  }

  ES6的类，完全可以看作构造函数的另一种写法。

  typeof Pointer // "function"
  Pointer === Pointer.prototype.constructor // true

  ES6的类的所有方法都定义在类的prototype属性上面。 constructor方法是类的默认方法，通过new命令生成的对象实例时，自动调用该方法。默认返回实例对象（即this），也可以指定返回另外一个对象。 一个类必须有constructor方法，如果没有显示定义，一个空的constructor方法会被默认添加。 类必须使用new调用，否则会报错。这是它跟普通构造函数的一个主要区别，后者不用new也可以执行。 注意点

• 类和模块内部，默认都是严格模式
• 不存在提升
• name属性总是返回紧跟在class关键字后的类名。

• this指向 类的方法内部如果包含this，它默认指向类的实例。

  class Logger {
      printName(name = "there") => {  
          this.print(`Hello ${name}`)
      }
  
      print (text) {
          console.log(text)
      }
  }
  const logger = new Logger();
  const { printName } = logger;
  printName(); // TypeError: Cannot read property 'print' of undefined

  如果方法单独使用，this会指向该方法运行时所在环境，this实际指向的是undefined 解决方案

  • 在构造方法中绑定this

    class Logger {
    constructor() {
        this.printName = this.printName.bind(this);
    }
    // ...
    }

  • 使用箭头函数

    class obj {
    constructor() {
        this.getThis = () => this;
    }
    }
    const myObj = new obj();
    myObj.getThis() === myObj // true

    箭头函数内部的this总是指向定义时所在的对象。上面箭头函数位于构造函数内部，它的定义生效的时候是在构造函数执行的时候。这时，箭头函数所在的运行环境，肯定是实例对象，所有this会总是指向实例对象。

  • 使用Proxy，获取方法的时候，自动绑定this

    
    function selfish (target) {
    const cache = new WeakMap();
    const handler = {
    get (target, key) {
    const value = Reflect.get(target, key);
    if (typeof value !== 'function') {
        return value;
    }
    if (!cache.has(value)) {
        cache.set(value, value.bind(target));
    }
    return cache.get(value);
    }
    };
    const proxy = new Proxy(target, handler);
    return proxy;
    }

  const logger = selfish(new Logger());

  静态方法
  static关键字定义称为静态方法，不会被实例继承，而是直接通过类来调用。
  *静态方法包含this关键字，这个this指的是类，而不是实例。*
  父类的静态方法，可以被子类继承。

  class Foo { static classMethod() { return "hello"; } } class Bar extends Foo {} Bar.classMethod(); // "hello"

  静态方法也可以从super对象上调用。

  class Foo { static classMethod() { return "hello"; } }

class Bar extends Foo { static classMethod() { return super.classMethod() + ", too"; } } Bar.classMethod(); // hello, too

实例属性
定义属性两种方式
- 定义在constructor()方法里的this上面

class IncreasingCounter {
    constructor() {
        this._count = 0;
    }
    get value() {
        return this._count;
    }
}
```

• 定义在类的最顶层

  class IncreasingCounter {
      _count = 0;
      get value() {
          return this._count;
      }
  }

  静态属性 静态属性指的是class本身的属性。即Class.propName，而不是定义在实例对象(this)上的属性。

  class Foo {}
  Foo.prop = 1

  ES6规定，class内部只有静态方法，没有静态属性。

私有方法和私有属性 私有方法和私有属性，是只能在类的内部访问的方法和属性，外部不能访问。但ES6不提供，只能通过变通方法模拟实现。

• 命名上加以区别

  class Widget{
      foo(baz) {
          this._bar(baz);
      }
      _bar(baz) {
          return this.snaf = baz;
      }
  }

• 将私有方法移出模块

  class Widget{
      foo(baz) {
          bar.call(this, baz)
      }
  }
  function bar(baz) {
      return this.snaf = baz;
  }

• 利用symbol值得唯一性，将私有方法的名字命名为一个Symbol值 Class的继承 Class通过extends关键字实现继承。 子类必须在constructor方法中调用super方法，否则新建实例时会报错。 因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。 对比
• ES5的继承，实质上是先创造子类的实例对象this，然后再将父类的方法添加到this上面。
• ES6的继承，实质是先将父类实例对象的属性和方法，加上this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。 父类的静态方法也会被子类继承。

Object.getPrototypeOf() 方法可以用来从子类上获取父类。因此可以用这个方法判断，一个类是否继承了另一个类。

Object.getPrototypeOf(ColorPointer) === Pointer // true

super关键字

• super作为函数调用时，代表父类的构造函数。 super代表父类的构造函数，但返回的是子类的实例，即super内部的this指的是子类的实例，因此super()相当于A.prototype.constructor.call(this)
• super作为对象时
  • 在普通方法中，指向父类的原型对象 由于super指向父类的原型对象，所以定义在父类实例上的方法或属性，是无法通过super调用的。 在子类普通方法中通过super调用父类的方法时，方法内部的this指向当前的子类实例。
  • 在静态方法中，指向父类 在子类的讲台方法中通过super调用父类的方法时，方法内部的this指向当前的子类，而不是子类实例。 使用super时，必须显示指定作为函数还是作为对象使用，否则会报错。

原生构造函数

• Boolean()
• Number()
• String()
• Array()
• Object()
• Function()
• Date()
• RegExp()
• Error()

Module ES6模块的设计思是尽量静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。 CommonJs 和 AMD 模块都只能在运行时确定。

// CommonJs 模块
let { stat, exsits, readFile } = require("fs");

// 等同于
let _fs = require("fs")
let stat = _fs.stat;
let exists = _fs.exists;
let readFile = _fs.readFile;

上面实质是整体加载fs模块（加载fs所有方法），生成对象，然后再从这个对象上读取3个方法，这种加载称为“运行时加载”，因为只有运行时才能得到这个对象，导致完全没有办法在编译时做“静态优化”。

ES6模块不是对象，而是通过export 命令显式的指定输出的代码，在通过import命令输入。

import { stat, exists, readFile } from "fs";

上面的实质上是从fs模块加载3个方法，其他方法不加载，这种加载称为“编译时加载”或静态加载。

• ES6的模块自动采用严格模式
  • 变量必须声明后再使用
  • 函数的参数不能有同名属性，否则报错
  • 不能使用with语句
  • 不能对只读属性赋值，否则报错
  • 不能使用前缀0表示八进制数
  • 不能删除不可删除的属性
  • 不能删除变量delete prop，会报错
  • eval不会在它的外层作用域引入变量
  • eval 和 arguments 不能被重新赋值
  • arguments 不会自动反应函数参数的变化
  • 不能使用arguments.callee
  • 不能使用arguments.caller
  • 禁止this指向全局对象
  • 不能使用fn.caller 和 fn.arguments获取函数调用的堆栈
  • 增加了保留字（protected、static、interface）

• export命令 一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。因此必须使用export关键字输出。 export命令规定的是对外的接口

  // 报错
  export 1;
  //报错
  const m = 1;
  export m;

  输出的是1，只是一个值，不是接口。

  export var m = 1;
  
  const m = 1;
  export { m };
  
  var n = 1;
  export { n as m };

  实质是接口名与模块内变量之间，建立一一对应的关系。 另外，export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。

  export var foo = "bar";
  setTimeout(() => foo = "baz", 500)

  export命令可以出现在模块任何顶层的位置。

• import命令 使用export命令定义了模块的对外接口后，其他js文件就可以通过import命令加载这个模块。
  • import 命令输入的变量都是只读的，因为它的本质是输入接口
  • import 命令具有提升效果，会提升到整个模块的头部，首先执行。本质是import命令是编译阶段执行的，在代码运行之前。
  • import是静态执行的，所以不能使用表达式和变量
  • import语句会执行所加载的模块，如果多次重复执行同一句import语句，那么只会执行一次，而不会执行多次。 也就是import语句是单例模式。
• 模块的整体加载

  import * as circle from "./circle"
  circle.area(4);
  circle.circumference(14);

• export default 为模块指定默认输出。一个模块只能有一个默认输出，因此export default只能使用一次，所以import时不需要大括号。不能跟变量声明语句。

  
  function add(x, y) {
  return x * y;
  }
  export {add as default};
  // 等同于
  // export default add;

import { default as foo } from "modules" // 等同于 // import foo from "modules"

- import() 动态加载，返回一个Promise对象。
使用场景：
- 按需加载

button.addEventListener('click', event => {
    import('./dialogBox.js')
    .then(dialogBox => {
        dialogBox.open();
    })
    .catch(error => {
        /* Error handling */
    })
});
```

• 条件加载 import() 可以放在if代码块，根据不同情况，加载不同的模块。
• 动态的模块路径 import()允许模块路径动态生成。 注意点
• import加载模块成功后，这个模块会作为一个对象，作为then方法的参数。

  import('./myModule.js')
  .then(({export1, export2}) => {
  // ...·
  });

• Promise.all()同时加载多个模块
• 也可以用在async函数中

编写风格优化

• 块级作用域
  • let 取代 var
  • 在let 和 const之间，建议优先使用const，尤其在全局环境，不应该设置变量，只应设置常量。 原因：
    • 提醒阅读程序的人，这个变量不应该改变
    • const 符合函数式编程思想，运算不改变值，只是新建值，而且也利于将来的分布式运算。
    • JS编译器会对const进行优化
• 字符串 静态字符串一律使用单引号或反引号，不适用双引号。 动态字符串使用反引号。
• 解构赋值 使用数组成员对变量赋值，优先使用解构赋值。 函数的参数如果是对象的成员，优先使用解构赋值。 函数返回多个值，优先使用对象的解构赋值，而不是数组的解构赋值。
• 对象
  • 单行定义的对象，最后的一个成员不以逗号结尾。多行定义的对象，最后一个成员以逗号结尾。
  • 对象尽量静态化，一旦定义不得随意添加新的属性。如果添加属性不可避免，要使用object.assign方法。
  • 如果对象的属性名是动态的，可以在创建对象的时候，使用属性表达式定义。
  • 对象的属性和方法，尽量采用简洁的表达式
• 数组 使用扩展运算符（...）拷贝数组。

• 函数

  • 立即执行函数或匿名函数可以写成箭头函数的形式。
  • 箭头函数取代Function.prototype.bind，不应再用self / _this / that 绑定this

    
    // bad
    const self = this;
    const boundMethod = function(...params) {
    return method.apply(self, params);
    }

  // acceptable const boundMethod = method.bind(this);

  // best const boundMethod = (...params) => method.apply(this, params);

  - 所有配置项都应该集中在一个对象，放在最后一个参数，布尔值不可以直接作为参数

  // bad function divide(a, b, option = false ) { }

  // good function divide(a, b, { option = false } = {}) { }

  
  - 不要在函数体内使用arguments变量，使用rest运算符（...）代替。
  - 使用默认值语法设置函数参数的默认值。

• Class 使用Class定义类，取代构造函数prototype的操作。 使用extends实现继承
• 模块
  • Module语法是JS模块的标准写法，使用import取代require;使用export取代module.exports
  • 只有一个输出值，使用export default
  • 模块默认输出一个函数，函数名的首字母应小写
  • 模块默认输出一个对象，对象名的首字母应该大写。

浏览器输入网址后的过程 浏览器缓存 跨域的解决方案 Ajax 实现过程 正则表达式 二、框架 Vue vuex vue-router

React Redux / Mobx React-router

React Hooks

三、小程序

四、Nodejs 、Koa

五、Webpack

六、Typescript

七、Flutter

八、React-Native

面向对象 对象是实物的抽象，是一个容器，封装了属性和方法。 如果创建实例对象？

• 构造函数
• Object.create()

this 是属性或方法“当前”所在的对象。 函数中的this就是函数运行时所在的对象。

• 全局环境 this指window对象
• 构造函数 this指的是实例对象
• 对象的方法 this指向方法运行所在的对象

改变this指向

• call 指定函数内部this的指向，即函数执行时所在的作用域，然后在所指定的作用域中，调用该方法。 第一个参数应该是一个对象。如果参数为空、null、undefined则默认传入全局对象。 后面的参数是函数调用时所需的参数。
• apply 改变this指向，再调用该函数。 应用：
  • 找出数组最大元素 var a = [1, 2, 3, 4, 5] Math.max.apply(null, a) // 5
  • 将数组的空元素变为undefined Array.apply(null, ['a', , 'b']) 空元素和undefined的区别在于数组的forEach方法会跳过元素，但不会跳过undefined
  • 转换类似数组的对象 Array.prototype.slice.apply({0: 1, length: 1})
  • 绑定回调函数的对象
• bind 将函数体内的this绑定到某个对象，然后返回一个新函数。
  • 每次返回一个新函数
  • 结合回调函数使用

构造函数的缺点 同一个构造函数的多个实例之间，无法共享属性，造成对系统资源的浪费。 解决方案就是原型对象。

继承机制的设计思想就是 原型对象的所有属性和方法都能被实例对象共享。 原型对象的属性不是实例对象自身的属性，只要修改原型对象，变动就会体现在所有实例对象上。 实例对象就有某个属性或方法，不会再去原型对象寻找这个属性和方法。 原型对象的作用就是定义所有实例对象共享的属性和方法。

如何理解原型和原型链？ 所有的对象都有自己的原型对象，一方面，任何对象都可以充当其他对象的原型；另一方面，由于原型对象也是对象，所以它也有自己的原型。因此就会形成一个“原型链”。 一层层追溯所有对象的原型最终都可以上溯到Object.prototype。也就是所有对象都继承了Object.prototype的属性，比如valueOf 和 toString方法。 而Object.prototype的原型是null。null 没有任何属性和方法，也没有自己的原型，因此，原型链的尽头就是 null。 读取对象的属性时，JS引擎先寻找对象本身的属性，找不到就到它的原型去找，如果还是找不到，就到原型的原型去找。如果直到最顶层的Object.prototype还是找不到，则返回undefined。如果对象自身和它的原型都定义一个同名属性，那么优先读取对象自身的属性。

constructor属性 prototype对象有一个constructor属性，默认指向prototype对象所在的构造函数。 constructor属性的作用

• 得知某个实例对象由哪个构造函数产生
• 可以从一个实例对象创建另一个实例 constructor属性 表示原型对象与构造函数之间的关系，如果修改了原型对象，一般要同时修改constructor属性，防止引用的时候出错。 通过constructor的name属性，得到构造函数的名称。

instanceof 运算符 返回一个布尔值，表示对象是否为某个构造函数的实例。 原理：检查右边的构造函数的prototype属性，是否在左边对象的原型链上。 特殊情况，左边对象的原型链上，只有null对象时，instanceof 判断会失真。

• 类型判断 [1, 2, 3] instanceof Array // true {} instanceof Object // true 只适用于对象，不适用于原始类型的值