前端基础知识整理汇总(中)

Call, bind, apply实现

// callFunction.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;}
// applyFunction.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;}
// bindFunction.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__属性会指向该对象的原型。

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

每一个对象都会从原型"继承"属性。
实例对象和构造函数都可以指向原型, 原型可以指向构造函数,不能指向实例(因为可以有多个实例)。
原型对象有两个属性,constructor 和 __proto__。

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() 必须 非必须

异步加载脚本

默认情况下,浏览器是同步加载 JavaScript 脚本,即渲染引擎遇到

你可能感兴趣的:(javascript,开发语言,phpstorm,etcd,前端框架,view,design)