前端基础知识总结（二）

Call, bind, apply实现

// call
Function.prototype.myCall = function (context) {
  context = context ? Object(context) : window 
  context.fn = this;
  
  let args = [...arguments].slice(1);
  const result = context.fn(...args);
  delete context.fn;
  return result;
}

// apply
Function.prototype.myApply = function (context) {
  context = context ? Object(context) : window;
  context.fn = this;
  
  let args = [...arguments][1];
  let result;
  if (args.length === 0) {
      result = context.fn();
  } else {
      result = context.fn(args);
  }
  delete context.fn;
  return result;
}

// bind
Function.prototype.myBind = function (context) {
  let self = this;
  let args = [...arguments].slice(1); 
  return function() {
    let newArgs = [...arguments];
    return self.apply(context, args.concat(newArgs));
  }
}

原型与原型链

每一个JavaScript对象(null除外)在创建的时候会关联另一个对象，这个对象就是原型，每一个对象都会从原型"继承"属性。

每一个JavaScript对象(除了 null )都具有的一个属性，叫__proto__，这个属性会指向该对象的原型。

实例对象和构造函数都可以指向原型, 原型可以指向构造函数，不能指向实例(因为可以有多个实例)。

原型有两个属性，constructor 和 __proto__。

JavaScript中所有的对象都是由它的原型对象继承而来。而原型对象自身也是一个对象，它也有自己的原型对象，这样层层上溯，就形成了一个类似链表的结构，这就是原型链。

function Person() {}
var person = new Person();

// 实例原型 === 构造函数原型
person.__proto__ === Person.prototype // true
// 原型构造函数 === 构造函数
Person.prototype.constructor === Person // true

react diff

• React 通过制定大胆的 diff 策略，将 O(n3) 复杂度的问题转换成 O(n) 复杂度的问题；
• React 通过分层求异的策略，对 tree diff 进行算法优化；

  对树进行分层比较，两棵树只会对同一层次的节点进行比较。

• React 通过相同类生成相似树形结构，不同类生成不同树形结构的策略，对 component diff 进行算法优化；

  1. 如果是同一类型的组件，按照原策略继续比较 virtual DOM tree。
  2. 如果不是，则将该组件判断为 dirty component，从而替换整个组件下的所有子节点。
  3. 对于同一类型的组件，有可能其 Virtual DOM 没有任何变化，如果能够确切的知道这点那可以节省大量的 diff 运算时间，因此 React 允许用户通过 shouldComponentUpdate() 来判断该组件是否需要进行 diff。
• React 通过设置唯一 key的策略，对 element diff 进行算法优化；
• 建议，在开发组件时，保持稳定的 DOM 结构会有助于性能的提升；

对象方法

对象遍历方法总结：

• for...in：遍历对象自身， 包含继承， 可枚举，不含 Symbol 的属性。
• Object.keys(obj)：遍历对象自身, 不含继承，可枚举，不含 Symbol 的属性。【values， entries】
• Object.getOwnPropertyNames(obj)：遍历对象自身, 不含继承, 不含 Symbol 的属性, 不管是否可枚举
• Object.getOwnPropertySymbols(obj): 遍历对象自身, 不含继承, 所有 Symbol 的属性, 不管是否可枚举
• Reflect.ownKeys(obj): 遍历对象自身，不含继承，所有键名，不管是否Symbol 和可枚举。

  对象其他方法：

• JSON.stringify()：只串行化对象自身，不含继承，可枚举，不含 Symbol属性。【function，undefined, Symbol会丢失， set、map会处理成空对象】
• Object.assign()： 只拷贝对象自身，不含继承， 可枚举属性, 不管是否是Symbol 。【全部数据类型属性值】

方法	自身属性	继承属性	可枚举属性	Symbol属性
for...in..	是	是	必须	否
Object.keys()	是	否	必须	否
Object.getOwnPropertyNames(obj)	是	否	非必须	否
Object.getOwnPropertySymbols(obj)	是	否	非必须	是
Reflect.ownKeys(obj)	是	否	非必须	非必须
JSON.stringify()	是	否	必须	否
Object.assign()	是	否	必须	非必须

加载脚本