前端知识点

JS

VO：变量对象

AO：活动对象

• defer & async

  常规script脚本浏览器会立即加载并执行，异步加载使用async与defer
  二者区别在于aysnc为无序，defer会异步根据脚本位置先后依次加载执行

Vue

生命周期

​ 从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

1. beforeCreate
   • 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调
2. created
   • 实例已经创建完成，数据观测(data observer) 和 event/watcher 事件配置完成，但真实dom还没有生成，$el 还不可用。
   • 调用数据，调用方法，调用异步函数
3. beforeMount
   • 相关的render函数（模板）首次被调用
4. mounted
   • 挂载完成， $el 可用，dom渲染完成
5. beforeUpdate
   • 数据更新时调用，发生在学你dom重新渲染和打补丁之前，可以在这个钩子中进一步地更改状态，并不会触发附加的重渲染过程。当我们更改Vue的数据，都会触发改钩子
6. updated
   • 组件dom 已经更新，可以执行依赖于dom的操作，然而应该避免在此更改状态，可能会导致更新无限循环
7. beforeDestroy
   • 实例销毁之前调用，在这一步，实例仍然完全可用
8. destroyed
   • 实例销毁后调用

Vue生命周期在真实场景下的业务应用

created: 进行ajax请求异步数据的获取、初始化数据

mounted: 挂载元素dom节点的获取

nextTick: 针对单一事件更新数据后立即操作dom

updated: 任何数据的更新，如果要做统一的业务逻辑处理

watch: 监听数据变化，并做相应的处理

插槽

• 缩写 v-slot:header => #header，#default=”{user}”

• 说明

  插槽就是子组件中提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如HTML,组件等，填充的内容会替换子组件的<slot></slot>标签
  复制代码

• 场景

  在构建页面过程中一般会把用的比较多的公共的部分抽取出来作为一个单独的组件，但在实际开发过程中这个组件并不能完全满足需求，这个时候我们就需要用到插槽来分发内容
  复制代码

• 作用

  可以拓展组件，去更好的复用组件和对其做定制化处理
  复制代码

• 编译作用域

  父级 模板里所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的
  复制代码

• 注意：v-slot只能添加在<template>上 ，默认插槽除外

  <current-user v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </current-user>
  // 简写
  <current-user v-slot="slotProps">
    {{ slotProps.user.firstName }}
  </current-user>
  
  // 默认插槽的缩写语法不能和具名插槽混用，因为会导致作用域不明确
  <!-- 无效，会导致警告 -->
  <current-user v-slot="slotProps">
    {{ slotProps.user.firstName }}
    <template v-slot:other="otherSlotProps">
      slotProps is NOT available here
    </template>
  </current-user>
  
  // 只要出现多个插槽，请始终为所有的插槽使用完整的基于 <template> 的语法：
   <current-user>
    <template v-slot:default="slotProps">
      {{ slotProps.user.firstName }}
    </template>
  
    <template v-slot:other="otherSlotProps">
      ...
    </template>
  </current-user>   
  复制代码

• 分类

  默认插槽

  // parent
  // 无插槽内容
  <submit-button></submit-button>
  
  // 有插槽内容
  <submit-button>Save</submit-button>
  复制代码

  // <submit-button>
  <button type="submit">
    <slot>Submit</slot> // 如果父组件没有提供任何插槽内容，显示Submit
  </button>
  
  // 显示
  <button type="submit">
    <slot>Save</slot> // 显示Save
  </button>
  复制代码

  具名插槽

  // child  <myslot>
  <template>
      <div class="container">
        <header>
          <!-- 我们希望把页头放这里 -->
        </header>
        <main>
          <!-- 我们希望把主要内容放这里 -->
        </main>
        <footer>
          <!-- 我们希望把页脚放这里 -->
        </footer>
      </div>
  </template>
  
  // 修改后
  <template>
    <div class="container">
      <header>
      <slot name="header"></slot>
      </header>
    <main>
        <slot></slot>
      </main>
      <footer>
        <slot name="footer"></slot>
      </footer>
    </div>
  </template>
  复制代码

  // parent
  <template>
    <myslot>
      <div>大家好我是父组件</div>
      <template v-slot:header>
        <h1>Here might be a page title</h1>
      </template>
  
      <p>A paragraph for the main content.</p>
      <p>And another one.</p>
  
      <template v-slot:footer>
        <p>Here's footer info</p>
      </template>
    </myslot>
  </template>
  
  <script>
    import myslot from './myslot';
    export default {
      components: {
        myslot
      }
    }
  </script>
  复制代码

  作用域插槽（插槽内容能够访问子组件中才有的数据）

  // child current-user
  <span>
      <slot v-bind:user="user">
        {{ user.lastName }}
      </slot>
  </span>
  
  // parent
  <current-user>
    <template v-slot:default="slotProps">
      {{ slotProps.user.firstName }}
    </template>
  </current-user>
  // 解构
  <current-user>
  
  <template v-slot:default="{user}">
    {{ user.firstName }}
  </template>
  </current-user>
  
    // 重命名
    <current-user>
    <template v-slot:default="{user: person}">
      {{ person.firstName }}
    </template>
    </current-user>
  
    // 自定义后备内容
    <current-user>
    <template v-slot:default="{user={firstName: 'hui'}}">
      {{ person.firstName }}
    </template>
    </current-user>
  复制代码

  动态插槽名

  <base-layout>
     <template v-slot:[dynamicSlotName]>
        ...
     </template>
   </base-layout>
  复制代码

插件

添加全局方法或者property。如：vue-custom-element

添加全局资源：指令/过滤器/过渡等。如：vue-touch

通过全局 mixin 来添加一些组件选项。如vue-router

添加全局实例方法，通过把它们添加到 config.globalProperties 上实现

一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router
复制代码

使用插件

通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成，Vue.use 会自动阻止多次注册相同插件，届时即使多次调用也只会注册一次该插件。

3.0 新特性

组合式API，2.0为选项式API

对原data中的属性，使用ref包装为响应式对象，对原prop的属性，使用toRefs包装为响应式对象

props

​ 因为 props 是响应式的，你不能使用 ES6 解构，因为它会消除 prop 的响应性。

context => { attrs, slots, emit}:

​ context 是一个普通的 JavaScript 对象，也就是说，它不是响应式的，这意味着你可以安全地对 context 使用 ES6 解构。

渲染机制和优化

虚拟 DOM 是轻量级的 JavaScript 对象，由渲染函数创建。它包含三个参数：元素，具有数据、prop、attr 等的对象，以及一个数组。数组是我们传递子级的地方，子级也具有所有这些参数，然后它们也可以具有子级，依此类推，直到我们构建完整的元素树为止。
复制代码

Object, Set和Map的区别

1. key的不同，在Object 中， key必须是简单数据类型（整数，字符串或者是symbol），而在Map中则可以是JavaScript 支持的所有类型数据，也就是说可以用一个Object 或 Function 来当做一个Map元素的key

2. 使用

   Obejct

   • object 可以通过Object.keys，Object.value，Object.entries，for…in…等遍历拿到键或者值
   • 可以用过 “a” in obj 来判断obj中是否有a属性

   Map

   • Map可以通过this.keys，this.values，this.entries，for…of…等遍历拿到键或者值
   • 常用方法map.set(key,value)、map.get(key)、map.has(key)
   • Map 在存储大量元素的时候性能表现更好
   • var map = new Map([[1, 2], [2, 3]]); // map = {1 => 2, 2 => 3}

   Set

   • Set是一种叫做集合的数据结构，Map是一种叫做字典的数据结构

   • Set和Map主要的应用场景在于数组去重和数据存储

   • 常用方法

       // size：返回集合所包含元素的数量
       // Set的方法：
       // 操作方法
       add(value)//向集合添加一个新的项
       delete(value)//从集合中移除一个值
       has(value)//如果值在集合中存在，返回true,否则false
       clear()// 移除集合里所有的项
       遍历方法
       keys()//返回一个包含集合中所有键的数组
       values()//返回一个包含集合中所有值的数组
       entries//返回一个包含集合中所有键值对的数组(感觉没什么用就不实现了)
       forEach()//用于对集合成员执行某种操作，没有返回值
   复制代码

不同

• JSON 直接支持 Object，但不支持 Map

• Map 是纯粹的 hash， 而 Object 还存在一些其他内在逻辑，所以在执行 delete 的时候会有性能问题。所以写入删除密集的情况应该使用 Map。

• Map 会按照插入顺序保持元素的顺序（FIFO 原则），而Object做不到

• Map 自身有 size 属性，可以自己维持 size 的变化。Object 则需要借助 Object.keys() 来计算

console.log(Object.keys(obj).length);
复制代码

• 如何确定一个类型是不是支持迭代呢？ 可以使用以下方法：

console.log(typeof obj[Symbol.iterator]); // undefined
console.log(typeof map[Symbol.iterator]); // function
复制代码

日志追踪实用技巧

• try…catch…这种方式适合捕获可预见的错误，无法捕获异步错误

• window.onerror 可以捕获到语法错误，但无法捕获到网络异常的错误。

• window.addEventListener(“error”, fun, true) 折中方式虽然可以捕获到网络请求的异常，但是无法判断HTTP的状态是404,还是其它如500等，还需要配合服务端日志才进行排查分析才可以

• unhandledrejection：可以捕获到promise异常，也是通过window.addEventListener(‘unhandledrejection’, fun, true)方式

• 可以配合配合项目使用的前端框架的错误处理方式来收集，比如VUE的异常处理方法errorHandler，可以通过重写vue.prototype.errorHandler 方法来达到手机框架的一些异常

  var defaults = {
      ua: window.navigator.userAgent,
      browser: '',
      os: '',
      osVersion: '',
      errUrl: window.location.href,
      msg: '', // 错误的具体信息
      url: '', // 错误所在的url
      line: '', // 错误所在的行
      col: '', // 错误所在的列
      error: '' // 具体的error对象
    }
  复制代码

Promise

• promise 是一个对象，对象和函数的区别就是对象可以保存状态，函数不可以（闭包除外）

• 多个异步等待合并便于解决

• 3种状态：pending，fulfilled，rejected

• 常用方法：Promise.all() Promise.race Promise.resolve Promise.reject

• Promise.all 和 Promise.race 区别

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

  all()：只有p1， p2, p3 的状态都变成fulfilled, p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组传递给p的回调函数

  ​ 只要有一个rejected，p的状态就变成rejected，此时第一个被reject的实例返回值会传递给p的回调函数

  race()：只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的Promise实例的返回值，就传递给p的返回值。

// 手写Promise

复制代码

async…await

async 是 ES7 才有的与异步操作有关的关键字，和 Promise ， Generator 有很大关联的。async/await 是建立在 promise 的基础上

async/await 让异步代码看起来、表现起来更像同步代码。这正是其威力所在。

闭包

【函数】和【函数内部能访问到的变量】（也叫环境）的总和，就是一个闭包

经常使用的场景中return 的作用是使用闭包，让别人可以间接访问

作用：常常用来【间接访问一个变量】。换句好说，【隐藏一个变量】

// 案列一：
function a(){
    let a = "sd";
    function b(){
        console.log(a);
    }
}
// 案列2 return 作用是让别人可以间接访问到a变量
// 闭包：b可以读取a中的变量，只要把b作为返回值，就可以在a外读取a内部变
// 原因：a是b的父函数，b被赋给了一个全局变量，a始终存在内存中，b的存在依赖a，因此a也始终存在内存中，不会在调用结束后，被垃圾回收机制回收。
function a(){
    let a = "sd";
    return function b(){
        console.log(a);
    }
}


复制代码

场景：

1. 使用闭包代替全局变量

2. 函数外或在其他函数中访问某一函数内部的参数

3. 在函数执行之前为要执行的函数提供具体参数

4. 在函数执行之前为函数提供只有在函数执行或引用时才能知道的具体参数

5. 为节点循环绑定click事件，在事件函数中使用当次循环的值或节点，而不是最后一次循环的值或节点

6. 暂停执行

7. 包装相关功能

  // 1,2
  //闭包，test2是局部变量，这是闭包的目的
  //我们经常在小范围使用全局变量，这个时候就可以使用闭包来代替。
  (function(){
    var test2=222;
    function outer(){
        alert(test2);
    }
    function test(){
        alert("测试闭包："+test2);
    }
    outer(); //222
    test(); //测试闭包：222
  })();

  alert(test2); //未定义，这里就访问不到test2


  // 3
  //正确做法，使用闭包
  function f3(obj){return function(){alert(obj)}}
  var test2=f3('222');//返回f3的内部函数的引用
  setTimeout(test2,500);//正确,222
  document.getElementById("hello").onclick=test2;//正确,222
  document.getElementById("hello").attachEvent("onclick",test2);//正确,222


  //原生的setTimeout传递的第一个函数不能带参数
  setTimeout(function(param){
      alert(param)
  },1000)


  //通过闭包可以实现传参效果
  function func(param){
      return function(){
          alert(param)
      }
  }
  var f1 = func(1);
  setTimeout(f1,1000);



  //用闭包定义能访问私有函数和私有变量的公有函数。
  var counter = (function(){
      var privateCounter = 0; //私有变量
      function change(val){
          privateCounter += val;
      }
      return {
          increment:function(){   //三个闭包共享一个词法环境
              change(1);
          },
          decrement:function(){
              change(-1);
          },
          value:function(){
              return privateCounter;
          }
      };
  })();


  // 6

  function sleep(obj,iMinSecond){
  if (window.eventList==null) window.eventList=new Array(); 
      var ind=-1; 
      for (var i=0;i<window.eventList.length;i++){ 
          if (window.eventList[i]==null) { 
              window.eventList[i]=obj; 
              ind=i; 
              break; 
          } 
      } 

      if (ind==-1){ 
          ind=window.eventList.length; 
          window.eventList[ind]=obj; 
      } 

      setTimeout("goon(" + ind + ")",iMinSecond); 
  } 

  goo(){}
  function test(){
    sleep(this,3000);//调用暂停函数
  }

复制代码

原型，原型链

• 所有函数都有 prototype（原型）属性，所有引用类型都有 __proto__（隐式原型）属性，都是一个普通对象

• 引用类型的__proto__指向它的构造函数的prototype

    let Person = function(){}
    let person = new Person();
    person.__proto__ = Person.prototype
    person.__proto__.constructor = Person;
    Person.prototype.constructor = Person;
复制代码

当访问对象上的某个属性，会先在对象本身上查找，如果没有找到会继续在它的__proto__(隐式原型)上查找，即查找它的构造函数原型，如果还有找到，则继续在原型的__proto__上查到，直到Object.prototype.__proto__ （为null）停止。这样一层一层的向上查找就形成了一个链式结构（原型链）。另一面证明了万物皆对象

访问链路为：

作用：

• 继承，减少了内存占用
• prototype用来实现基于原型的继承与属性的共享
• 避免了代码冗余，公用的属性和方法可以提取放在原型中，这样通过改构造函数实例化的所有对象都可以使用该对象的构造函数中的属性和方法

场景：

• 有重复的代码和属性

特点：

• 就近原则，优先使用离自己近的
• 引用类型，当我们使用或者修改原型链上的值时。其实使用的都是同一个值
• 所有函数的默认原型都是Object的实例

类

第一种

funtion People(name, age){
    this.name = name;
    this.age = age;
}
People.prototype.printInfo = function(){
    console.log(`name: ${this.name}, age: ${this.age}`)
}
let people = new People("小明", 16);
people.printInfo(); // name: 小明，age: 16
复制代码

第二种

const People = {
    name:"",
    age:"",
    printInfo: function(){
        console.log(`name: ${name}, age: ${age}`)
    }
}

let people = Object.create(People);
people.name = "小明";
people.age = 16;
people.printInfo(); // name: 小明，age: 16

复制代码

第三种

• 弊端：instanceof 不能判断类

let Botany = {
    createNew: function(color) {
        let obj = {}
        obj.color = color;
        obj.printColor = function() {
            console.log(this.color);
        }
        return obj
    }
}

let cactus = Botany.createNew("green");
cactus.printColor();

// 继承
let A = {
        createNew: function() {
            let obj = Botany.createNew();
            // ...do something
            return obj;
        }
    }
    // 共享
let B = {
    isBotany: true,
    createNew: function() {}
}
复制代码

第四种 class 关键字

class Point {
  constructor(x, y) {
    // ...
  }

  toString() {
    // ...
  }
}

var b = new Point(); // 必须使用new 关键字，否则会报错

Object.keys(Point.prototype) // []
Object.getOwnPropertyNames(Point.prototype); // ["constructor", "toString"]

//上面代码中，toString()方法是Point类内部定义的方法，它是不可枚举的。这一点与 ES5 的行为不一致。

var Point = function (x, y) {
  // ...
};

Point.prototype.toString = function () {
  // ...
};

Object.keys(Point.prototype)
// ["toString"]
Object.getOwnPropertyNames(Point.prototype)
// ["constructor","toString"]
复制代码

注意事项

• 私有属性的解决方案

  // 第一种 _bar()方法前面的下划线，表示这是一个只限于内部使用的私有方法。但是，这种命名是不保险的，在类的外部，还是可以调用到这个方法
  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值。
  const bar = Symbol('bar');
  const snaf = Symbol('snaf');
  
  export default class myClass{
  
    // 公有方法
    foo(baz) {
      this[bar](baz);
    }
  
    // 私有方法 
    [bar](baz) {
      return this[snaf] = baz;
    }
  
    // ...
  };
  
  
  // 提案，不做正式用
  // 在属性名之前，使用#表示
  
  class Counter {
    #xValue = 0;
  
    constructor() {
      super();
      // ...
    }
  
    get #x() { return #xValue; }
    set #x(value) {
      this.#xValue = value;
    }
  }
  复制代码

  • new.target

    function Person(name) {
      if (new.target !== undefined) {
        this.name = name;
      } else {
        throw new Error('必须使用 new 命令生成实例');
      }
    }
    
    // 另一种写法
    function Person(name) {
      if (new.target === Person) {
        this.name = name;
      } else {
        throw new Error('必须使用 new 命令生成实例');
      }
    }
    
    var person = new Person('张三'); // 正确
    var notAPerson = Person.call(person, '张三');  // 报错
    
    // class 注意的是，子类继承父类时，new.target会返回子类
    class Rectangle {
      constructor(length, width) {
        console.log(new.target === Rectangle);
        this.length = length;
        this.width = width;
      }
    }
    
    var obj = new Rectangle(3, 4); // 输出 true
    
    
    // new.target会返回子类。利用这个特点，可以写出不能独立使用、必须继承后才能使用的类
    class Shape {
      constructor() {
        if (new.target === Shape) {
          throw new Error('本类不能实例化');
        }
      }
    }
    
    class Rectangle extends Shape {
      constructor(length, width) {
        super();
        // ...
      }
    }
    
    var x = new Shape();  // 报错
    var y = new Rectangle(3, 4);  // 正确
    
    复制代码

    • Object.getPrototypeOf 可以从子类上获取父类，可用作判断一个类是否继承自另一个类

      Object.getPrototypeOf(ColorPoint) === Point  // true
      复制代码

    • super 关键字

      • 有时当做函数，有时当做对象
      • 当函数使用时：子类中的构造函数顶部必须执行super()；super() 相当于 父类.prototype.constructor.call(this);
      • 当对象使用时：super.xx 值父类的原型对象上的属性；相当于父类.prototype.xx
      • new.target.name 指向的永远是实例本身的构造函数

NAN

• Number.NaN

• Number.isNaN 相比于isNaN 不存在转换类型的行为

• isNAN

  // 通过Number()强类型转换 将val 转成number类型，再判断是否为NaN， 所以 isNaN是判断val是否能转为数字，成功返回false，失败返回true
  console.log(isNaN(null));            //false
  console.log(isNaN(true));            //false
  console.log(isNaN(false));           //false
  console.log(isNaN(0));               //false
  console.log(isNaN(undefined));       //true
  console.log(isNaN("AB"));            //true
  console.log(isNaN({a: 1}));          //true
  console.log(isNaN(NaN));             //true
  
  // Number.isNaN()
  // Es6 新加的严格判断是否 === NaN
  console.log(Number.isNaN(null));      //false
  console.log(Number.isNaN(true));      //false
  console.log(Number.isNaN(false));     //false
  console.log(Number.isNaN(0));         //false
  console.log(Number.isNaN(undefined)); //false
  console.log(Number.isNaN("AB"));      //false
  console.log(Number.isNaN({a: 1}));    //false
  console.log(Number.isNaN(NaN));       //true
  
  
  // 区别
  isNaN("123Hello") // true
  isNaN("123") // false
  Number.isNaN("123Hello") // false
  Number.isNaN("123") // false
  复制代码

== 和 ===

==：相等运算符

• 比较相同类型原始值与===一样

• 比较不同类型的数据是

  • 如果类型为原始类型，则会将数据转换为数字类型再进行比较

  • 对象与原始类型值比较，对象转化为原始类型再进行比较

    '' == '0' // false
    0 == '' // true
    0 == '0' //true
    false == 'false' //false
    false == '0' // true
    false == undefined // false
    false == null // false
    null == undefined // true
    ' \t\r\n ' == 0 // true
    复制代码

===：严格运算符

* 不同类型值，如果俩个值得类型不同，直接返回false
* 同一类型的原始类型的值（数值，字符串，布尔值）比较时，值相同就返回true，值不同返回false
* 俩个复合类型（对象，数组，函数）的数据比较时，不是比较他们的值是否相同，而是比较他们是否指向同一个对象（内存地址）
* undefined 和 null 与自身严格相等
复制代码

类型转换

在 JavaScript 中有 6 种不同的数据类型：

• string
• number
• boolean
• object
• function
• symbol

3 种对象类型：

• Object
• Date
• Array

2 个不包含任何值的数据类型：

• null
• undefined

全局方法String() 可以将数字转换为字符串，该方法可用于任何类型的数字，字母，变量，表达式

Number 方法toString() 也是同样的效果

// toExponential() 把对象的值转换为指数计数法
var num = 5.56789;
var n = num.toExponential(); // 5.56789e+0
// toFixed() 把数字转换为字符串，结果的小数点后有指定位数的数字
// toPrecision() 把数字格式化为指定的长度

// Number.isInteger(): 用来判断给定的参数是否为整数。
// Number.isSafeInteger(): 判断传入的参数值是否是一个"安全整数"。
Number.isInteger(10);        // 返回 true
Number.isInteger(10.5);      // 返回 false
复制代码

// typeof 操作符来查看JavaScript 变量的数据类型
typeof "John"                 // 返回 string
typeof 3.14                   // 返回 number
typeof NaN                    // 返回 number
typeof false                  // 返回 boolean
typeof [1,2,3,4]              // 返回 object
typeof {name:'John', age:34}  // 返回 object
typeof new Date()             // 返回 object
typeof function () {}         // 返回 function
typeof myCar                  // 返回 undefined (如果 myCar 没有声明)
typeof null                   // 返回 object
复制代码

// constructor 属性返回JavaScript变量的构造函数
"John".constructor                 // 返回函数 String()  { [native code] }
(3.14).constructor                 // 返回函数 Number()  { [native code] }
false.constructor                  // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor              // 返回函数 Array()   { [native code] }
{name:'John', age:34}.constructor  // 返回函数 Object()  { [native code] }
new Date().constructor             // 返回函数 Date()    { [native code] }
function () {}.constructor         // 返回函数 Function(){ [native code] }


// 使用constructor 属性来查看对象是否为数组（包含字符串“Array”）
function isArray(data){
   return data.constructor.toString().indexOf("Array") > -1;
}

// 使用constructor 属性来查看对象是否为日期
function isDate(data){
   return data.constructor.toString().indexOf("Date") > -1;
}
复制代码

把鼠标移到按钮并点击时

hover-focus-active

同步和异步的区别

我们知道 js 是一个单线程的操作，为什么说它是单线程呢？不可以是多线程呢？js是作为浏览器的脚本语言，主要是实现用户与浏览器的交互，以及操作dom；这决定了它只能是单线程，否则会带来很复杂的同步问题。 举个例子：如果js被设计了多线程，如果有一个线程要修改一个dom元素，另一个线程要删除这个dom元素，此时浏览器就会一脸茫然，不知所措。所以，为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成了这门语言的核心特征，将来也不会改变

异步运行机制如下：

1. 所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
2. 主线程之外，还存在一个”任务队列”（task queue）。只要异步任务有了运行结果，就在”任务队列”之中放置一个事件。
3. 一旦”执行栈”中的所有同步任务执行完毕，系统就会读取”任务队列”，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
4. 主线程不断重复上面的第三步。

“异步模式”编程的4种方法

1. 回调函数

    // setTimeout、setInterval
    function fun1(){
        setTimeout(()=>{
            cb();
        })
        console.log('fun1');
    }
    function fun2(){
        console.log('fun2');
    }
    fun1(fun2);
    
    // node
    var fs=require('fs');
    function getMime(callback){
      fs.readFile('mime.json',function(err,data){
          callback(data);
      })
    }
    getMime(function(result){
      console.log(result.toString());
    })
复制代码

2. 事件监听,任务的执行不取决于代码的顺序，而取决于某个事件是否发生

    // 监听函数有：on, bind, listen, addEventListener, observe 
    
复制代码

3. 发布订阅模式，也叫观察者模式

我们假定，存在一个“信号中心”，某个任务执行完成
复制代码

4. Promises对象

浏览器的工作原理

• Process-per-site-instance
• Process-per-site
• Process-per-tab
• Single-process

click 优化

常用算法

冒泡

function bubbleSort(arr) {
    for (let i = 0, len = arr.length; i < len - 1; i++) {

        for (let j = 0; j < len - 1 - i; j++) {
            console.log(i, j, arr.join());
            count++;
            if (arr[j] - arr[j + 1] > 0) {
                let x = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = x;
            } else {
                // break;
            }
        }


    }
    return arr;
}

复制代码

事件冒泡和事件传递

DOM 2 级事件 规定的事件流包含三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，然后是实际的目标接收事件，最后阶段是冒泡阶段

事件传播三个阶段 （Event.prototype）

• 0 NONE: 默认值，不代表任何意思
• 1 CAPTURING_PHASE: 捕获阶段
• 2 AT_TARGET: 目标阶段（当前事件源）
• 3 BUBBLING _PHASE: 冒泡阶段

事件时用户或浏览器自身执行的某种动作，而响应某个事件的函数叫做事件处理程序，HTML事件处理程序。DOM 0 级事件处理程序和IE事件处理程序均以“on”开头，DOM 2 级事件处理程序不需要加“on”

• DOM 0 级事件绑定：
  • dom.onclick = function(){}
• DOM 2 级事件绑定
  • 标准浏览器： dom.addEventlistener(‘click’, function(){}, false);
  • IE 6-8：dom. (‘onclick’, function(){}), 事件对象通过window.event 来获取

• 事件捕获是指从外层传递到里面，知道当前元素的事件行为

  • addEventlistener(eventName, function, true)

• 事件冒泡:当前元素的某个事件行为被处罚，他的所有祖先元素（一直到document）的相关事件行为也会被触发执行（由里向外）

  • addEventlistener(eventName, function, false) window.event? window.event.cancelBubble = true : e.stopPropagation();

• DOM 3 事件中stopImmediatePropagation()方法来阻止事件捕获，另外此方法还可以阻止事件冒泡

• mouseover 存在冒泡传播机制，mouseenter冒泡传播机智被浏览器阻止

• 阻止事件的默认行为及阻止

  • A标签有哪些默认行为
    

    1. 超链接：点击A标签可以实现页面的跳转
    2. 锚点定位：通过HASH值定位到当前页面的指定ID盒子位置

    • 首先URL地址栏末尾追加一个HASH；
    • 如果地址栏包含hash值，浏览器在渲染页面后，会默认定位到hash值得位置

    • 阻止A标签的默认行为
      1. 在HTML中 <a href="" />;
      2. 在JS中 e=e||window.event; e.preventDefault?e.preventDefault:e.returnValue = false;

• 当一个容器内的很多元素都要为同一事件绑定方法，那么我们只需要给外层容器的该事件绑定方法，当里层元素的事件被出发时，会通过冒泡传播机制传到最外层容器那里，触发外层容器绑定的方法执行，在方法执行时，我们只需要根据判断事件源的不同而做不同的事情。（利用事件委托可提高50%左右的性能）

• onDOMContentLoaded //当前浏览器中的DOM结构加载完成，就会触发这个事件

• readystatechange // IE6-8下使用

this问题
标准：当事件行为被触发，方法中的this指向当前元素本身
IE6-8:当事件行为被触发，方法中的this指向window

五种主要数据类型的克隆（Bumber, String, Object, Array, Boolean）

1. 使用typeof 判断值得类型；
2. 使用toString区分数组和对象
3. 使用递归函数

  function clone(obj){
    if(typeof obj === 'object' && typeof obj !== 'null'){
      var cloneObj = Obejct.prototype.toString.call(obj).slice(8, -1) === 'Array'?[]:{};
      for(let k in obj){
        if(typeof obj[k] === 'object' && typeof obj[k] !== 'null'){
          cloneObj[k] = clone(obj[k]);
        }else{
          cloneObj[k] = obj[k]
        }
      }
    }else{
      return obj;
    }
    return cloneObj;
  }
复制代码

去重方法， 排序算法，统计最多字母数

伪数组，如何转化为标准数组

伪数组是一个Object，存在的意义是可以让普通的对象也能正常使用数组的很多方法。比如：

let obj = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
}

;[].push.call(obj, 'd')
console.log([].slice.call(obj))

;[].forEach.call(obj, function(num, index){
  console.log(num)
})
复制代码

常见的伪数组有：

• 函数内部的arguments
• DOM对象列表（比如通过document.getElemntsByTags 得到的列表）
• jQuery 对象（比如 $(“div”)）

不同

• 对象数组没有Array.prototype 属性， 类型是Obejct，而数组类型是Array
• 数组是基于索引的实现，length会自动更新，而对象时键值对
• 使用对象可以创建伪数组，伪数组可以使用数组的大部分方法

call 和 apply 区别

javascript 中 的每一个Function对象都有一个apply()方法和 call() 方法

定义

*  apply：调用一个对象的一个方法，用另一个对象替换当前对象。*例如*：B.apply(A, arguments); 即A对象应用B对象的方法
*  call：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.call(A, args1,args2);即A对象调用B对象的方法。
复制代码

不同

* apply：最多只能有两个参数--新this对象和一个数组argArray，如果给改方法传递多个参数，则把参数都写入这个数组里面，当然，即使只有一个参数，也要写进数组里，如果argArray不是一个有效的数组和arguments对象，那么将导致一个TypeError。如果没有提供argArray 和 thisObj 任何一个参数，那么Global对象将被用作thisObj，并且无法被传递任何参数。
复制代码

• call：它可以接受多个参数，第一个参数

与apply一样，后面则是一串参数列表。这个方法主要用在js对象各方法相互调用的时候，使当前this实例指针保持一致，或者在特殊情况下改变this指针。没有提供thisObj参数，那么Global
对象被用作thisObj。

• apply和call的功能是一样的，只是传入

的参数列表形式不同

function add(a,b){
  return a+b;  
}
function sub(a,b){
  return a-b;  
}
var a1 = add.apply(sub,[4,2]);　　//sub调用add的方法
var a2 = sub.apply(add,[4,2]);
alert(a1);  //6     
alert(a2);  //2

/*call的用法*/
var a1 = add.call(sub,4,2);
复制代码

callee和caller的作用

function factorial(x) {
	return x<=1 ? 1 : x*factorial(x-1);
}

// 使用 callee , callee 是arguments对象的一个属性，指向arguments对象的函数
function factorial(x) {
	return x<=1 ? 1 : x*arguments.callee(x-1);
}

// caller 函数对象的一个属性，指向调用当前函数的函数，比如A()调用B()，则在B()中B.caller指向A();
function B(){
	console.log(B.caller); // A();
}

(function A(){
	B()
}

// 如果c的执行环境为window则返回null
var c = function(x,y) {
   console.log(arguments.length,arguments.callee.length,arguments.callee)
   // arguments.callee.length 形参的长度
} ;

 c(1,2,3) ; // 3, 2, function(x, y){}
复制代码

注：在箭头函数中，this作用域跟函数外是一致的，且没有arguments对象，所以callee和caller在箭头函数中是无效的

一次完整HTTP 事务是怎样的过程

• 域名解析
• 发起TCP的3次握手
• 建立TCP连接后发起的http请求
• 服务端响应http请求，浏览器得到html代码
• 浏览器解析html代码，并请求html代码中的资源
• 浏览器对页面进行渲染呈现给用户

instanceof

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

ES5 对象方法

// 添加或更改对象属性
Object.defineProperty(object, property, descriptor)

// 添加或更改多个对象属性
Object.defineProperties(object, descriptors)

// 访问属性
Object.getOwnPropertyDescriptor(object, property)

// 以数组返回所有属性
Object.getOwnPropertyNames(object)

// 以数组返回所有可枚举的属性
Object.keys(object)

// 访问原型
Object.getPrototypeOf(object)

// 阻止向对象添加属性
Object.preventExtensions(object)

// 如果可将属性添加到对象，则返回 true
Object.isExtensible(object)

// 防止更改对象属性（而不是值）
Object.seal(object)

// 如果对象被密封，则返回 true
Object.isSealed(object)

// 防止对对象进行任何更改
Object.freeze(object)

// 如果对象被冻结，则返回 true
Object.isFrozen(object)
复制代码

IP

ip分5类，A，B，C，D，E类
它总共32位2进制位，每八位分为一组，组成一个十进制的数字。
A类ip前8个2进制位代表网络号，后面的代表主机
B类ip前16个2进制位代表网络号，后面的代表主机
C类ip前24个2进制位代表网络号，后面的代表主机
D,E类ip在中国没有，它是美国专用的。
所以，

A;1.0.0.0-127.255.255.255
B;128.0.0.0-191.255.255.255
C;192.0.0.0-223.255.255.255
D;224.0.0.0-239.255.255.255
E;240.0.0.0-254.255.255.255

上边A,B,C类的地址有私有ip，是不能在因特网中使用，只能在局域网中用。它们是
10.0.0.0-10.255.255.255
172.13.0.0-172.31.255.255
192.168.0.0-192.168.255.255

Html

这里是javascript中制作滚动代码的常用属性

页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;

window.innerHeight;
网页可见区域宽： document.body.offsetWidth (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;

屏幕可用工作区高度： window.screen.availHeight;

输入url到页面渲染，包含dns查找

1. DNS 解析

• 查找缓存
  • Chrome 搜索自身的 DNS 缓存， 看有没有该域名对应的 IP 地址
  • Chrome 会搜索操作系统自身的 DNS 缓存（浏览器没有找到缓存或者缓存已经失效）
  • 读取本地的 HOST 文件（操作系统中的 缓存没有找到）
• 浏览器发起一个 DNS 的一个系统调用（向本地主控 DNS 服务器， 一般由宽带运营商提供的， 发起的一个域名解析请求）
  • 宽带运营商服务器查看本地缓存 有没有过期
  • 运营商服务器代替浏览器发起的一个迭代 DNS 解析的请求（
    baidu.com 的 IP 地址是多少？
    1、寻找根域的 DNS IP 地址
    2、COM 域 的 顶级域的 IP 地址
    3、baidu.com 域的 IP 地址）

2. TCP 连接

3. 发送 HTTP 请求

4. 服务端处理请求并返回HTTP响应报文

5. 浏览器解析渲染页面

行类元素

• 常用
  a, button, input, label, select, textarea, script, span, img
  b（加粗，用于吸引读者的注意到该元素的内容上）
  i（斜体）
  br（在文本中生成一个换行（回车）符号）
  small（文本字体小一号，表示边注释和附属细则，包括版权和法律文本）
  abbr（缩写元素，可选title属性提供完整的描述）
  cite（表示一个作品的引用，且必须包含作品的标题，这个引用可能是一个根据适当的上下文约定关联引用的元数据的缩写）
  em（标记出需要拥护着重阅读的内容，是可以嵌套的，嵌套层级越深，则其包含的内容被认定为越需要着重的部分）

  
  

• 不常用
  sub（定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更低并且更小。）
  sup（定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更高并且更小。）
  map（ 属性 与 属性一起使用来定义一个图像映射(一个可点击的链接区域).）
  kbd（HTML键盘输入元素() 用于表示用户输入，它将产生一个行内元素，以浏览器的默认monospace字体显示。）
  strong（表示文本十分重要，一般用粗体显示。）
  code（呈现一段计算机代码）
  dfn（标记被定义的术语）
  samp（用于标识计算机程序输出，通常使用浏览器缺省的 monotype 字体）, var（表示变量的名称，或者由用户提供的值。）
  bdo
  object（表示引入一个外部资源，这个资源可能是一张图片，一个嵌入的浏览上下文，亦或是一个插件所使用的资源。）
  q（引用标签 ()表示一个封闭的并且是短的行内引用的文本. 这个标签是用来引用短的文本，所以请不要引入换行符; 对于长的文本的引用请使用

  替代.）

  // 设置图片宽度一致
  // 根据浏览器宽度以及每列宽度计算出列表个数，列表默认为0
  // 当图片加载完成，所有图片一次放置在最小的列数下面
  // 父容器高度去列表数组的最大值

  function fall() {
      const minGap = 20
      const itemWidth = 100
      const scrollBarWidth = getScrollbarWidth()
      const pageWidth = window.innerWidth - scrollBarWidth
      const column = Math.floor(pageWidth / (itemWidth + minGap))
      const gap = (pageWidth - itemWidth * column) / column / 2 // 真实的间距

      const items = document.querySelectorAll('.item')


      console.log('scrokkBarWidth', items);

      const heightArr = []

      function getScrollbarWidth() {
          const oDiv = document.createElement('div')

          oDiv.style.cssText = `width:50px; height:50px; overflow:scroll; background:red;`

          document.body.appendChild(oDiv);

          const scrollBarWidth = oDiv.offsetWidth - oDiv.clientWidth;

          oDiv.remove();

          return scrollBarWidth;
      }

      for (let i = 0, len = items.length; i < len; i++) {
          const height = items[i].offsetHeight;

          if (i < column) {
              items[i].style.cssText = `top:${gap}px; left:${(itemWidth + gap) * i +gap}px`

              heightArr.push(height);
          } else {
              let minHeight = heightArr[0];

              let minIndex = 0;
              for (let j = 0, jLen = heightArr.length; j < jLen; j++) {
                  if (minHeight > heightArr[j]) {
                      minHeight = heightArr[j]
                      minIndex = j;
                  }
              }

              items[i].style = `top:${minHeight+gap *2}px; left:${(itemWidth+gap) * minIndex + gap}px`

              heightArr[minIndex] = minHeight + gap + height;
          }
      }
  }
  // 页面加载完成调用一次。
  window.onload = fall;
  // 页面尺寸发生改变再次调用。
  window.onresize = fall;
复制代码

/* 使用cssText */
el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 20px';
复制代码

// css
p{
    background-color: expression(altBgcolor(this))
}

// js
function altBgcolor(el){
    el.style.backgroundColor = (new Date()).getHours() % 2 ? "#fff" : "#06c";
}
复制代码

.triangle{
    width:0px;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-bottom:20px solid #000;
}
复制代码

  box-sizing: content-box|border-box|inherit:
复制代码

~~~ js
// 减少判断层级
// 方法1：
fun2(){
    if(){
       if(){
        
    	}
   }else{
       
   }
}
// 方法2:优先推荐
fun3(){
    if(){}
    if(){}
    if(){}
}
复制代码

    2. 时间开销大（维护数值变化（监听），对象修改，引用计数也需修改）

* 标记清除

  * 分标记和清除两个阶段完成

  * 遍历所有对象找标记活动对象
    
    * 标记计数时会递归的查找引用层级关系，把可达对象进行标记
    
  * 遍历所有对象清除没有标记对象
    1. 清除没有标记的对象

    2. 标记清除将回收的空间放在空闲列表上面，方便后面的程序直接在这里申请内存使用。

  * 回收相应空间

  * 优点

    1. 解决对象循环引用不能回收的问题（相对于引用计数）

  * 缺点

    1. 空间碎片化（由于回收的空间地址不连续），不能是空间最大化使用
    2. 不会立即清除垃圾

* 标记整理

  * 标记整理算法是标记清除算法的一个升级。主要是为了减少碎片空间化。工作原理与标记清除算法相同。
  * 相比于标记清除，在清除没有标记的对象之前，把这些垃圾对象移动位置，也就是先进行整理到一块后再清理，这样减少了碎片化空间

* 分代回收

  * 内存设限：64位内存不超过1.5G，32位不超过800m
  
  * 内存空间分为 新生代（存活时间短）和老生代
  
    * 小空间用于存储新生代对象（32m[64位] | 16m[32位]）
  
    * 新生代对象回收
  
      * 回收过程采用复制算法+标记整理
  
      * 新生代内存区分为二个等大小空间
  
      * 使用空间位From，空闲空间位To
  
      * 活动对象存储于From空间
  
      * 标记整理后将活动对象拷贝至To
  
      * From 与 To交换空间完成释放
  
        > ​	回收细节
        >
        > 1. 拷贝过程中可能出现晋升
        > 2. 晋升就是将新生代对象移动至老生代
        > 3. 一轮GC还存活的新生代需要晋升
        > 4. To空间的使用率超过25%
  
    * 老年代对象  （1.4G[64位] | 700m[32位]） 
  
      * 老年代对象就是存活时间长的对象
      * 主要采用标记清楚，标记整理，增量标记算法
      * 首先（主要）使用标记清除完成垃圾空间的回收
      * 采用标记整理进行空间优化
      * 采用增量标记来进行效率优化
复制代码

<html>
    <head></head>
	<body>
       <!-- 页面布局  -->
        <script></script>
    </body>	
</html>
复制代码

// 防抖，在第一次触发事件时，不立即执行函数，而是给出一个期限值比如1000ms
// 如果短时间在大量触发同一事件，只会执行一次函数
// 就是事件触发后等待一会，看还触发不了，触发了重新等待执行
function debounce(fn, delay){
	let timer = null;
    return function(){
        if(time){
            clearTimeout(timer);
        }
        timer = setTimeout(fn, delay);
    }
}

// 节流
// 防止无聊人士没事瞎点击，在delay时间范围内多次触发只执行一次
let isClick = true;
function throttle(fn, delay){
    let valid = true;
    return function(){
        if(valid){
            valid = false;
            setTimeout(()=>{
                fn();
                valid = true;
            }, delay)
        }
    }
}
复制代码

function loadScript(url, cb){
    let script = document.createElement("script");
    script.type = "text/javascript";
    if(script.readyState){
        script.onreadystatechange = function(){
            if(script.readyState === 'loaded' || script.readyState === 'complete'){
                script.onreadystatechange = null;
                cb();
            }
        }
    }else{
        script.onload = function(){
            cb();
        }
    }
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
}

// 使用
loadScript('./a.js',function(){
    loadScript('./b.js',function(){
        loadScript('./c.js',function(){
            console.log('加载完成')
        })
    })
})
复制代码

// 不推荐
for(var i=0; i<tem.length; i++){
    process(item[i]);
}

// 推荐
// for 循环
for(var i=item.length; i--){
    process(item[i]);
}
// while循环
var j = item.length;
while(j--){
    process(item[i]);
}
复制代码

// for...in... 循环比较慢，因为每次迭代操作时会同时查询实例或原型属性
// for循环迭代比forEach函数迭代性能高
// 不推荐
items.forEach(function(value,index,array){
    process(value);
})
复制代码

var Person = function(){};
var p = new Person();
复制代码

1. CND 节点解决了跨运营商和跨地域访问的问题，访问延时大大降低。
2. 大部分请求在CDN边缘节点完成，CDN起到了分流作用，减轻了源服务器的负载压力
复制代码