对象Object

如何证明一个属性是可枚举的？

  • for…in 可遍历的就是可枚举的（不包含symbol，包含继承的属性）
  • obj.hasOwnProperty 是用来查询是否是自身的属性（包含自身不可枚举，不包含继承）
  • obj.propertyIsEnumerable 是用来查询自身的属性是否可枚举（包含symbol）

遍历对象

  • for...in - 遍历自身、继承的可枚举属性（不含Symbol）
  • Object.keys() - 仅遍历自身可枚举属性（不含Symbol）
  • Object.getOwnPropertyNames() - 遍历自身的可枚举属性和不可枚举属性

Generator 生成器

一个函数本来只能有一个return 返回值。但是yield可以让函数执行中有多次的返回。可以暂停函数执行。

示例1 - 自增ID：

要生成一个自增的ID，可以编写一个next_id()函数：

  1. var current_id = 0;
  2. function next_id() {
  3.     current_id ++;
  4.     return current_id;
  5. }

由于函数无法保存状态，故需要一个全局变量current_id来保存数字。
不用闭包，试用generator改写：

  1. function* next_id() {
  2.   var i = 1;
  3.     while(true) yield i++;
  4. }

示例2 - 斐波那契数列：

  1. function* fib(max) {
  2.   var a = 0,
  3.     b = 1,
  4.     n = 0
  5.   while (n < max) {
  6.     yield a
  7.     ;[a, b] = [b, a + b]
  8.     n++
  9.   }
  10.   return
  11. }
  13. for (var x of fib(10)) {
  14.   console.log(x) // 依次输出0, 1, 1, 2, 3, ...
  15. }

JS函数柯里化（Currying）的概念

概念：

**

柯里化（Currying），是把接收多个参数的函数变换成接收一个单一参数（最初函数的第一个参数）的函数，并返回接受剩余的参数而且返回结果的新函数的技术。

常见作用：

  1. 参数复用 - 如：curryingAdd(1)(2)
  2. 提前返回
  3. 延迟计算/运行

手写 - Promise

Promise/A+规范：

  • 有三种状态 pending | resolved | rejected 。
  • 处于 pending 时，可以转移到 resolved 或者 rejected 状态。
  • 处于 resolve 或 reject 时，就不可变。
  • 必须有一个 then 异步执行方法，then 接受两个参数且必须返回一个 promise 。

    流程图：

    169c500344dfe50a.jpg

    代码：

    ```javascript function myPromise(constructor){ let self=this; self.status=”pending” //定义状态改变前的初始状态 self.value=undefined;//定义状态为resolved的时候的状态 self.reason=undefined;//定义状态为rejected的时候的状态 function resolve(value){
    1.   //两个==="pending"，保证了状态的改变是不可逆的
    2.  if(self.status==="pending"){
    3.     self.value=value;
    4.     self.status="resolved";
    5.  }
    } function reject(reason){
    1.   //两个==="pending"，保证了状态的改变是不可逆的
    2.  if(self.status==="pending"){
    3.     self.reason=reason;
    4.     self.status="rejected";
    5.  }
    } //捕获构造异常 try{
    1.  constructor(resolve,reject);
    }catch(e){
    1.  reject(e);
    } }

// 同时，需要在myPromise的原型上定义链式调用的then方法： myPromise.prototype.then=function(onFullfilled,onRejected){ let self=this; switch(self.status){ case “resolved”: onFullfilled(self.value); break; case “rejected”: onRejected(self.reason); break; default:
} }

  2. <a name="1TIHX"></a>
  3. # 手写 - 防抖（debounce）
  4. <a name="MlvUG"></a>
  5. ## 原理：
  6. 函数防抖（debounce），就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。（例：监听input输入框值的变化，用非立即执行）
  8. - 立即执行：多次触发事件，第一次会立即执行函数，之后在设定wait时间内触犯的事件无效，不会执行。
  9. - 非立即执行：多次触发事件，只会在最后一次触发事件后等待设定的wait时间结束时执行一次。
  11. <br />
  12. <a name="s0R3A"></a>
  13. ## 代码：
  14. ```javascript
  15. function debounce(fn, wait = 50, immediate) {
  16.   let timer
  17.   return function () {
  18.     // timer不为null，清除定时器
  19.     if (timer) clearTimeout(timer)
  21.     if (immediate) {
  22.       // timer为null时，可以执行
  23.       if (!timer) fn.apply(this, arguments)
  24.       // 在 wait 时间后将timer 变为null，代表可以执行
  25.       timer = setTimeout(() => {
  26.         timer = null
  27.       }, wait)
  28.     } else {
  29.       timer = setTimeout(() => {
  30.         fn.apply(this, arguments)
  31.       }, wait)
  32.     }
  33.   }
  34. }

手写 - 节流（throttle）

原理：

指定时间间隔内只会执行一次任务。（例：滚动条监听等）

代码：

  1. function throttle(fn, wait) {
  2.   let prev = new Date()
  3.   return function () {
  4.     const now = new Date()
  5.     if (now - prev > wait) {
  6.       fn.apply(this, arguments)
  7.       prev = now
  8.     }
  9.   }
  10. }

手写 - call、apply、bind

call、apply、bind原理

代码示例：

  1. var Tom = {
  2.   name: 'tom',
  3.   age: 16,
  4.   fn: function (from, to) {
  5.     console.log(`name: ${this.name}, age: ${this.age}; from: ${from}, to: ${to}`)
  6.   },
  7. }
  9. var Eric = {
  10.   name: 'eric',
  11.   age: 18,
  12. }
  14. Tom.fn('成都', '上海') // name: tom, age: 16; from: 成都, to: 上海
  15. Tom.fn.call(Eric, '成都', '上海') // name: eric, age: 18; from: 成都, to: 上海
  16. Tom.fn.apply(Eric, ['成都', '上海']) // name: eric, age: 18; from: 成都, to: 上海
  17. Tom.fn.bind(Eric, '成都', '上海')() // name: eric, age: 18; from: 成都, to: 上海

相同：

  • 三者都可以让一个对象去使用其他对象中的方法，并将 this 指向当前对象。

  • 第一个参数都是this的指向对象。不传

    不同：

  • call：参数如同普通函数的传参，从第二个参数开始。直接返回函数调用结果。

  • apply：与 call 相似，但参数必须以数组的形式，传入第二个参数中。 直接返回函数调用结果。
  • bind：参数传参形式与 call 相同。返回值是一个函数，需要再次调用。bind 实现还需要考虑实例化后对原型链的影响。

实现 call()

  1. /**
  2.  * 1. 创建一个独一无二的key，避免key值冲突
  3.  * 2. 将函数挂载在obj上
  4.  * 3. 调用，获取返回值。传参如同普通函数调用，一个个传入。
  5.  * 4. 删除key
  6.  * 5. return 返回值
  7.  */
  8. Function.prototype.myCall = function (obj, ...args) {
  9.   const key = Symbol()
  10.   obj[key] = this
  11.   const res = obj[key](...args)
  12.   delete obj[key]
  13.   return res
  14. }
  16. Tom.fn.myCall(Eric, '成都', '上海') // name: eric, age: 18; from: 成都, to: 上海

实现 apply()

  1. Function.prototype.myApply = function (obj) {
  2.   // 逻辑上与 call 一致，仅传参有区别。
  4.   const key = Symbol()
  5.   obj[key] = this
  7.   // 判断是否有第二个参数，以数组形式接收，正常参数列表传参。
  8.   let res
  9.   if (arguments[1]) {
  10.     res = obj[key](...arguments[1])
  11.   } else {
  12.     res = obj[key]()
  13.   }
  15.   delete obj[key]
  16.   return res
  17. }
  19. Tom.fn.myApply(Eric, ['成都', '上海']) // name: eric, age: 18; from: 成都, to: 上海

实现 bind()

  1. Function.prototype.myBind = function (obj, ...bindArgs) {
  2.   // 接收参数类似call。返回一个函数。还要考虑实例化后对原型链的影响
  4.   // 不是function要抛出错误
  5.   if (typeof this != 'function') {
  6.     throw Error('not a function')
  7.   }
  9.   let fn = this
  10.   function resFn(...resArgs) {
  11.     // 若当前函数this指向的是构造函数中的this，则判定为new操作。
  12.     const resThis = this instanceof resFn ? this : obj
  13.     // 接收参数，bind时绑定或此函数传参
  14.     return fn.call(resThis, ...bindArgs, ...resArgs)
  15.   }
  17.   // 维持原型关系，避免直接prototype互相赋值，用空函数来中继
  18.   function tmp() {}
  19.   tmp.prototype = fn.prototype
  20.   resFn.prototype = new tmp()
  22.   return resFn
  23. }
  25. Tom.fn.myBind(Eric, '成都', '上海')() // name: eric, age: 18; from: 成都, to: 上海

手写 - new

  1. /**
  2.  * new 做的事情
  3.  * 1. 创建一个全新的对象。
  4.  * 2. 执行 prototype 链接。
  5.  * 3. 使 this 指向新创建的对象。
  6.  * 4. 如果函数没有返回对象类型（含Functoin, Array, Date, RegExg, Error），
  7.  *    那么 new 将返回该对象引用。
  8.  */
  9. function New(fn) {
  10.   var obj = {
  11.     __proto__: fn.prototype,
  12.   }
  14.   var res = fn.apply(obj, Array.prototype.slice.call(arguments, 1))
  15.   if (res !== null && (typeof res === 'object' || typeof ret === 'function')) {
  16.     return res
  17.   }
  19.   return obj
  20. }
  22. // 使用示例
  23. function Person(name) {
  24.   this.name = name
  25. }
  26. const Jim = new Person('Jim') // Person {name: 'Jim'}
  27. const Bob = New(Person, 'Bob') // Person {name: 'Bob'}

手写 - instanceOf

instanceOf 用来判断一个对象的 prototype 是否在另外另外一个对象的原型链上。

  1. function myInstanceOf(left, right) {
  2.   const rightProto = right.prototype
  3.   let leftProto = left.__proto__
  5.   while (true) {
  6.     // 所有 __proto__ 都检测完了，不在原型链上，返回false
  7.     if (leftProto === null) return false
  8.     // 在原型链上，返回true
  9.     if (leftProto === rightProto) return true
  10.     // 往上层继续查找
  11.     leftProto = leftProto.__proto__
  12.   }
  13. }
  15. myInstanceOf({}, Object) // true

手写 - 深拷贝

丐版：

  1. function deepClone(obj) {
  2.   return JSON.parse(JSON.stringify(obj))
  3. }

面试够用版：

  1. function deepClone(obj) {
  2.   // 判断是否为复杂类型，兼容数组，复杂类型递归调用
  3.   if (typeof obj === 'object') {
  4.     var res = obj.constructor === Array ? [] : {}
  5.     for (const key in obj) {
  6.       res[key] = deepClone(obj[key])
  7.     }
  8.     return res
  9.   }
  11.   // 简单类型，直接赋值
  12.   return obj
  13. }

实现一个继承

寄生组合式继承：

  1. // 定义父类 Animal
  2. function Animal(name) {
  3.   this.name = name
  4.   this.sleep = function () {
  5.     console.log(this.name + '正在睡觉！')
  6.   }
  7. }
  8. Animal.prototype.eat = function (food) {
  9.   console.log(this.name + '正在吃：' + food)
  10. }
  12. // 定义子类 Cat
  13. function Cat(name, color) {
  14.   // 组合，继承父类构造函数的属性，可传参
  15.   Animal.call(this, name)
  16.   this.color = color
  17.   this.show = function () {
  18.     console.log(`${this.name}是${this.color}色的`)
  19.   }
  20. }
  22. // 寄生
  23. function extendProto(child, parent) {
  24.   // 创建一个空的函数，用以继承父类原型，同时又不会继承实例属性。
  25.   function F() {}
  26.   F.prototype = parent.prototype
  27.   child.prototype = new F()
  28.   // 修复实例
  29.   child.prototype.constructor = child
  30. }
  31. extendProto(Cat, Animal)
  33. // 实例化
  34. var cat = new Cat('Tom', '白')
  36. console.log(cat.name) // Tom
  37. console.log(cat.color) // 白
  38. cat.sleep() // Tom正在睡觉！
  39. cat.show() // Tom是白色的
  40. cat.eat('鱼') // Tom正在吃：鱼
  41. console.log(cat instanceof Animal) // true
  42. console.log(cat instanceof Cat) //true

ES6继承：

  1. // 创建父类 Animal
  2. class Animal {
  3.   constructor(name) {
  4.     this.name = name
  5.   }
  6.   sleep() {
  7.     console.log(`${this.name}正在睡觉！`)
  8.   }
  9.   eat(food) {
  10.     console.log(`${this.name}正在吃${food}`)
  11.   }
  12. }
  14. // 创建子类 Cat
  15. class Cat extends Animal {
  16.   constructor(name, color) {
  17.     super(name)
  18.     this.color = color
  19.   }
  20.   show() {
  21.     console.log(`${this.name}是${this.color}色的`)
  22.   }
  23. }
  25. // 实例化
  26. var cat = new Cat('Tom', '白')
  28. console.log(cat.name) // Tom
  29. console.log(cat.color) // 白
  30. cat.sleep() // Tom正在睡觉！
  31. cat.show() // Tom是白色的
  32. cat.eat('鱼') // Tom正在吃：鱼
  33. console.log(cat instanceof Animal) // true
  34. console.log(cat instanceof Cat) //true