前端基础知识整理汇总二

接上昨天的《前端基础知识整理汇总(上)》，这些知识虽然是很基础的，但是对于系统的梳理还是非常有帮助的，也希望这些内容对你有所帮助。

成都创新互联专注为客户提供全方位的互联网综合服务，包含不限于成都网站制作、网站建设、外贸网站建设、四川网络推广、微信小程序开发、四川网络营销、四川企业策划、四川品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联为所有大学生创业者提供四川建站搭建服务，24小时服务热线：13518219792，官方网址：www.cdcxhl.com

Call, bind, apply实现

 
 
 
 
    
  
  
  
  
  1. // call 
    2. 
  
  
  
  
  2. Function.prototype.myCall = function (context) { 
    3. 
  
  
  
  
  3.   context = context ? Object(context) : window  
    4. 
  
  
  
  
  4.   context.fn = this; 
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6.   let args = [...arguments].slice(1); 
    7. 
  
  
  
  
  7.   const result = context.fn(...args); 
    8. 
  
  
  
  
  8.   delete context.fn; 
    9. 
  
  
  
  
  9.   return result; 
    10. 
  
  
  
  
  10. } 
    11. 
  
  
  
  
  11.  
    12. 
  
  
  
  
  12. // apply 
    13. 
  
  
  
  
  13. Function.prototype.myApply = function (context) { 
    14. 
  
  
  
  
  14.   context = context ? Object(context) : window; 
    15. 
  
  
  
  
  15.   context.fn = this; 
    16. 
  
  
  
  
  16.  
    17. 
  
  
  
  
  17.   let args = [...arguments][1]; 
    18. 
  
  
  
  
  18.   let result; 
    19. 
  
  
  
  
  19.   if (args.length === 0) { 
    20. 
  
  
  
  
  20.       result = context.fn(); 
    21. 
  
  
  
  
  21.   } else { 
    22. 
  
  
  
  
  22.       result = context.fn(args); 
    23. 
  
  
  
  
  23.   } 
    24. 
  
  
  
  
  24.   delete context.fn; 
    25. 
  
  
  
  
  25.   return result; 
    26. 
  
  
  
  
  26. } 
    27. 
  
  
  
  
  27.  
    28. 
  
  
  
  
  28. // bind 
    29. 
  
  
  
  
  29. Function.prototype.myBind = function (context) { 
    30. 
  
  
  
  
  30.   let self = this; 
    31. 
  
  
  
  
  31.   let args = [...arguments].slice(1);  
    32. 
  
  
  
  
  32.   return function() { 
    33. 
  
  
  
  
  33.     let newArgs = [...arguments]; 
    34. 
  
  
  
  
  34.     return self.apply(context, args.concat(newArgs)); 
    35. 
  
  
  
  
  35.   } 
    36. 
  
  
  
  
  36. } 
    37.

原型与原型链

每一个JavaScript对象(null除外)在创建的时候会关联另一个对象，这个被关联的对象就是原型。每一个JavaScript对象(除了 null)都具有的__proto__属性会指向该对象的原型。JavaScript中所有的对象都是由它的原型对象继承而来，而原型也是一个对象，它也有自己的原型对象，这样层层上溯，就形成了一个类似链表的结构，这就是原型链。每一个对象都会从原型"继承"属性。

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

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

 
 
 
 
    
  
  
  
  
  1. function Person() {} 
    2. 
  
  
  
  
  2. var person = new Person(); 
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4. // 实例原型 === 构造函数原型 
    5. 
  
  
  
  
  5. person.__proto__ === Person.prototype // true 
    6. 
  
  
  
  
  6. // 原型构造函数 === 构造函数 
    7. 
  
  
  
  
  7. Person.prototype.constructor === Person // true 
    8.

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 。【全部数据类型属性值】

异步加载脚本

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