JS面试专用

忘是亡心i 2022-09-04 10:57 242阅读 0赞

*  **herf和src的区别**  
    **引用**。herf用来建立当前元素和文档之间的链接。常用的有：link、a。引用css文件时，会并行下载，并不会阻止浏览器的渲染。  
    **引入**。src指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe。是串行的，常常会引入静态资源文件，会先暂停浏览器的渲染。
 *  **防抖节流**  
    **防抖**。*在第一次触发事件后不立刻执行，如果后面的某个固定时间都没有触发事件的话，才执行*。会有一个问题：如果一直触发事件，则一直不会执行。可以运用于resize的监听，这种只在乎最后状态的事件。
    
        function debounce(func,delay){ 
        	var timer; //定时器
        	return function(){ 
        		if(timer){ 
        			clearTimeout(timer); //重新计时
        		}
        		timer = setTimeout(func,delay); //开始计时 
        	}
        }
    
    **节流**。在出发某个事件后，之后相隔一定时间才能再次触发。可以用于表单输入的检测等等，需要不断触发的事件。

*  **JS数据类型**  
    分为*简单数据类型*和*复杂数据类型*。  
    其中简单数据类型有6种，分别是**null,undefined,number,boolean,string,symbo**l。  
    其中复杂数据类型叫Object，又可以叫引用类型，分为*基本引用类型*和*集合引用类型*。其中基本引用类型有regexp,date和原始值包装类型，集合引用类型有array,map,weakmap,set,weakset。
 *  **深拷贝**  
    在JS中，数据类型分为基本数据类型和引用数据类型两种，对于基本数据类型来说，它的值直接存储在栈内存中，而对于引用类型来说，它在栈内存中仅仅存储了一个引用，而真正的数据存储在堆内存中  
    **方法1**：JSON.stringify()以及JSON.parse()，不足：  
    （1）如果对象里有函数,函数无法被拷贝下来  
    （2）无法拷贝copyObj对象原型链上的属性和方法  
    （3）当数据的层次很深，会栈溢出  
    **方法2：** Object.assign(target, source)，不足：只能拷贝一层。语法: Object.assign(target, …sources) target: 目标对象,sources: 源对象。用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

var obj1 = { 
        a: 1,
        b: 2,
        c: 3
    }
    var obj2 = Object.assign({ }, obj1);
    obj2.b = 5;
    console.log(obj1.b); // 2
    console.log(obj2.b); // 5

**方法3**：递归拷贝，可以多层并且实现多种类型的拷贝。

*  **var,let的区别**  
    var是函数作用域，并且有变量提升，在全局作用域生命的时候会成为window的属性，可以重复声明。  
    let的块级作用域，没有变量提升，因此会有暂时性死区，不会在全局作用域生命的时候会成为window的属性，不可以重复声明，会报错。
 *  **原型链**  
    每一个**构造函数**都有一个**prototype属性**，该属性指向一个对象，叫做**原型对象**，公共方法就可以放在原型对象中，公共属性可以放在构造函数中。  
    而每一个对象都有\*\*\_ *proto*\_ \*\*属性，指向构造函数的原型对象prototype。  
    \_ *proto* \_和prototype里面都有constructor属性，指向构造函数。如果对他们俩进行了修改，必须手动指回构造函数。  
    因为prototype也是一个Object实例，prototype.*proto \_ = Object.prototype  
    Object.* *proto* \_ = null.

## 重绘和重排 ##

浏览器下载完页面中的所有组件——HTML标记、JavaScript、CSS、图片之后会解析生成两个内部数据结构——**DOM树**和**渲染树**。

**浏览器渲染过程**：HTML解析为DOM树=》CSS解析为CSS树=》CSS树和HTML树一起生成渲染树=》重排计算渲染树上节点的位置和大小=》渲染=》（如果遇到修改）回流=》重绘

**DOM树**表示页面结构，**渲染树**表示DOM节点如何显示。

当DOM的变化影响了元素的几何属性（宽或高），浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。这个过程称为**重排**。完成重排后，浏览器会重新绘制受影响的部分到屏幕，该过程称为**重绘**。

*  **重排何时发生？**
    
    1.  添加或者删除可见的DOM元素
    2.  元素位置改变
    3.  元素尺寸改变
    4.  元素内容改变（例如：一个文本被另一个不同尺寸的图片替代）
    5.  页面渲染初始化（这个无法避免）
    6.  浏览器窗口尺寸改变

重排像setState一样，大多数浏览器通过队列化修改并批量执行来优化重排过程。  
但是如果在多次修改重排的中间对属性进行查询，会强制刷新队列，立刻执行重排和重绘。

*  **如何减少重排和重绘？**
    
    1.  尽量不要在布局信息改变时做查询。
    2.  把多次修改属性的操作合并成一次。
    3.  多次修改节点时可以，使用**fragemt元素**，将新增的节点都放在fragment元素中，最后将fragment元素加入DOM树。这样只有一次的重排。
        
        > 文档片段是个轻量级的document对象，它的设计初衷就是为了完成这类任务——更新和移动节点。文档片段的一个便利的语法特性是当你附加一个片断到节点时，实际上被添加的是该片断的子节点，而不是片断本身。只触发了一次重排，而且只访问了一次实时的DOM。
    4.  将需要多次重排的元素，position属性设为absolute或fixed，这样此元素就脱离了文档流，它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。

## this指向 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70]

## call,bind,apply ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 1]  
当使用call或者apply的时候，如果我们传入的第一个参数为null，函数体内的this会默认指向宿主对象，在浏览器中则是window。

作用：

1.  **实现继承**
    
        function Product(name, price) { 
        	this.name = name;
        	this.price = price;
        }
        
        function Food(name, price) { 
        	Product.call(this, name, price); //
        	this.category = food;
        }
        
        var hotDog = new Food('hotDog', 20);
2.  **改变this**
3.  **只是单纯的调用函数**

*  **手写call**
    
        Function.prototype.myCall = function (obj) { 
            var obj = obj || window;   //可能没有传输This的值
            obj.fn = this;    //这里的this是调用call的方法，将该方法加入this对象上
            var args = [];   
            for(var i = 1, len = arguments.length; i < len; i++) {   //arguments是调用call时传入的参数集合
            	args.push('arguments[' + i + ']');   //记录除this以外的所有参数
          	}
          	var result = eval('obj.fn(' + args +')');  //eval可以执行字符串
          	delete obj.fn;   //将新加的方法删除，当做什么都没发生～
          	return result;
        };
        var foo = { 
        	value: 1
        };
        function show(a, b) { 
            console.log(this.value);
            console.log(a + b);
        };
        show.setCall(foo, 1, 2); // 1 3
 *  **手写bind**
    
        Function.prototype.bind = function (obj) { 
            var _this = this; // 保存调用bind的函数
            var obj = obj || window; // 确定被指向的this，如果obj为空，执行作用域的this就需要顶上喽
            return function(){ 
                return _this.apply(arguments); // 修正this的指向
            }
        };

多次连续使用bind的时候，只有第一次是有效的。因为每个bind里面其实是call，最后相当于，func.bind(obj1).bind(obj2).bind(obj3)，第二次进行绑定不是对func中的this绑定了，而是对第一次bind后返回的新函数进行绑定，因此相当于并灭有改变func的this值，而是改变的返回后的副本。再次bind的时候，我们已经无法对最原始的待绑定函数进行操作了，我们操作的只是它的代理。

## 同步异步 ##

**背景**：JS是单线程的，因为JS会操作DOM，如果多个线程同时修改，不知道以哪个为准。  
**原因**：因为单线程，所有代码同步执行的话，需要等待前面的任务执行，可能会产生阻塞，因此产生了异步。  
**如何实现异步？**：事件循环EVENT LOOP。  
**事件循环**：

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

主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为**Event Loop（事件循环）**。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 2]  
上图中，主线程运行的时候，产生堆（heap）和栈（stack），栈中的代码调用各种外部API，它们在"任务队列"中加入各种事件（click，load，done）。只要栈中的代码执行完毕，主线程就会去读取"任务队列"，依次执行那些事件所对应的回调函数。

**常见的异步操作**：定时器，事件绑定，网络请求。

## 执行栈 ##

所有的 JS 代码在运行时都是在**执行上下文**中进行的。执行上下文是一个抽象的概念，JS 中有三种执行上下文：

全局执行上下文，默认的，在浏览器中是 window 对象，并且 this 在非严格模式下指向它。
    函数执行上下文，JS 的函数每当被调用时会创建一个上下文。
    Eval 执行上下文，eval 函数会产生自己的上下文，这里不讨论。

栈，是一种数据结构，具有先进后出的原则。JS 中的执行栈就具有这样的结构，当引擎第一次遇到 JS 代码时，会产生一个全局执行上下文并压入执行栈，每遇到一个函数调用，就会往栈中压入一个新的上下文。引擎执行栈顶的函数，执行完毕，弹出当前执行上下文。

## 宏任务&微任务 ##

任务分为**同步任务**和**异步任务**。  
其中异步任务又分为 **宏任务** 和 **微任务**。

*  **他们执行的顺序**：  
    在主线程中执行所有同步任务，从为微任务队列中挨个取出**所有**任务进入主线程开始执行，当为任务队列中没有任务时，再从宏任务队列中取出**一个**任务进入主线程开始执行，执行完毕后需要立刻查询微任务列表是否有任务，如果有需要执行微任务，否则可以在拿一个宏任务执行。
 *  任务分类  
    **宏任务**：包括整体代码script，setTimeout，setInterval、setImmediate。  
    **微任务**：原生Promise(有些实现的promise将then方法放到了宏任务中)、process.nextTick、Object.observe(已废弃)、 MutationObserver。

## JS中Number的范围 ##

***注意JS中最大数字和最大安全数字不一样！***  
在js中Number类型的实质是**64位浮点数**（JavaScript可以存储的**最大数字**）。

对于整数，在ECMAScript5规范中规定，无论正负数的值都不能大于**2^53**。  
在这个范围内，js的计算时精确的，一旦超出，js依旧可以计算，但是无法保证数值的精确。**最大安全数字是2^53-1**。

如何获得？

//最大安全数字
    console.log(Number.MAX_SAFE_INTEGER); //9007199254740991
    console.log(Number.MIN_SAFE_INTEGER); //-9007199254740991
    //最大数字
    Number.MAX_VALUE

当处理超大的数字时，可以使用BigInt类型。BigInt是JavaScript中的一个新的原始类型，可以用任意精度表示整数。使用BigInt，即使超出JavaScript Number 的安全整数限制，也可以安全地存储和操作大整数。  
要创建一个BigInt，**在数字后面添加n后缀即可**，例如，123变成123n。全局BigInt(number)函数可以用来将Number转换成BigInt。换句话说，BigInt(123) === 123n。

## AJAX ##

是异步的javascript和XML，它可以在不刷新页面的基础上向服务器发送请求，获得数据，改变部分页面内容。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 4]  
还有一个onload的属性，onreadystatechange()的定义是只要返回的状态码只要变化时就回调一次函数，而onload只有状态码为4时才能回调一次函数。

发送一个AJAX请求

## axios ##

基于Promise的HTTP库，用于发送Ajax。

axios基本使用方式主要有

1.  axios(config)
2.  axios.method(url, data , config)

document.querySelector('.btn').onclick = function() { 
            // 分别使用以下方法调用，查看myaxios的效果
            axios.post('/postAxios', { 
              name: 'post'
            }).then(res => { 
              console.log('postAxios 成功响应', res);
            })
    
            axios({ 
              method: 'post',
              url: '/getAxios'
            }).then(res => { 
              console.log('getAxios 成功响应', res);
            })
        }

**手写axios**

class Axios { 
        constructor() { 
    
        }
    
        request(config) { 
            return new Promise(resolve => { 
                const { url = '', method = 'get', data = { }} = config;
                // 发送ajax请求
                console.log(config);
                const xhr = new XMLHttpRequest();
                xhr.open(method, url, true);
                xhr.onload = function() { 
                    console.log(xhr.responseText)
                    resolve(xhr.responseText);
                }
                xhr.send(data);
            })
        }
    }
    
    // 定义get,post...方法，挂在到Axios原型上
    const methodsArr = ['get', 'delete', 'head', 'options', 'put', 'patch', 'post'];
    methodsArr.forEach(met => { 
        Axios.prototype[met] = function() { 
            console.log('执行'+met+'方法');
            // 处理单个方法
            if (['get', 'delete', 'head', 'options'].includes(met)) {  // 2个参数(url[, config])
                return this.request({ 
                    method: met,
                    url: arguments[0],
                    ...arguments[1] || { }
                })
            } else {  // 3个参数(url[,data[,config]])
                return this.request({ 
                    method: met,
                    url: arguments[0],
                    data: arguments[1] || { },
                    ...arguments[2] || { }
                })
            }
    
        }
    })
    
    
    // 工具方法，实现b的方法或属性混入a;
    // 方法也要混入进去
    const utils = { 
      extend(a,b, context) { 
        for(let key in b) { 
          if (b.hasOwnProperty(key)) { 
            if (typeof b[key] === 'function') { 
              a[key] = b[key].bind(context);
            } else { 
              a[key] = b[key]
            }
          }
          
        }
      }
    }
    
    
    // 最终导出axios的方法-》即实例的request方法
    function CreateAxiosFn() { 
        let axios = new Axios();
    
        let req = axios.request.bind(axios);
        // 混入方法， 处理axios的request方法，使之拥有get,post...方法
        utils.extend(req, Axios.prototype, axios)
        return req;
    }
    
    // 得到最后的全局变量axios
    let axios = CreateAxiosFn();

## 模块化 ##

参考文章：https://juejin.cn/post/6844903576309858318  
https://es6.ruanyifeng.com/\#docs/module

模块化的开发方式可以提高代码复用率，方便进行代码的管理。**通常一个文件就是一个模块**，有自己的作用域，只向外暴露特定的变量和函数。目前流行的js模块化规范有CommonJS、AMD、CMD以及ES6的模块系统。

**1.commonJS**  
Node.js是commonJS规范的主要实践者，用module.exports定义当前模块对外输出的接口（不推荐直接用exports），用require加载模块。  
commonJS用**同步**的方式加载模块。在服务端，模块文件都存在本地磁盘，读取非常快，所以这样做不会有问题。但是在浏览器端，限于网络原因，更合理的方案是使用异步加载。

// 定义模块math.js
    var basicNum = 0;
    function add(a, b) { 
      return a + b;
    }
    module.exports = {  //在这里写上需要向外暴露的函数、变量
      add: add,
      basicNum: basicNum
    }
    
    // 引用自定义的模块时，参数包含路径，可省略.js
    var math = require('./math');   //引入的模块是一个对象
    math.add(2, 5);

**2. ES6 Moduel**  
在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器**通用**的模块解决方案。

ES6 模块的设计思想是尽量的**静态化**，使得**编译**时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。

// CommonJS模块
    let {  stat, exists, readfile } = require('fs');
    //实际上是整体加载fs模块（即加载fs的所有方法），生成一个对象（_fs），然后再从这个对象上面读取 3 个方法。这种加载称为“运行时加载”，因为只有运行时才能得到这个对象，导致完全没办法在编译时做“静态优化”。
    
    // ES6模块
    import {  stat, exists, readFile } from 'fs';
    //上面代码的实质是从fs模块加载 3 个方法，其他方法不加载。这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。当然，这也导致了没法引用 ES6 模块本身，因为它不是对象。

需要特别注意的是，export命令规定的是**对外的接口**，必须与模块内部的变量建立一一对应关系。export语句输出的接口，与其对应的值是**动态绑定关系**，即通过该接口，可以取到模块内部实时的值。这一点与 CommonJS 规范完全不同。CommonJS 模块输出的是**值的缓存**，不存在动态更新。

/** 定义模块 math.js **/
    var basicNum = 0;
    var add = function (a, b) { 
        return a + b;
    };
    export {  basicNum, add };
    
    /** 引用模块 **/
    import {  basicNum, add } from './math';
    function test(ele) { 
        ele.textContent = add(99 + basicNum);
    }

import命令是**编译阶段执行**的，在代码运行之前，有代码提升。由于import是**静态执行**，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构。

前面使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。就要用到**export default命令**，为模块指定默认输出。不需要知道原模块输出的函数名。需要注意的是，这时import命令后面，**不使用大括号**。export default命令用于指定模块的默认输出。显然，**一个模块只能有一个默认输出**，因此export default命令只能使用一次。所以，import命令后面才不用加大括号，因为只可能唯一对应export default命令。

正是因为export default命令其实只是输出一个叫做default的变量，所以它后面不能跟变量声明语句。

// 正确
    export var a = 1;
    
    // 正确
    var a = 1;
    export default a;
    
    // 错误
    export default var a = 1;

上面代码中，export default a的含义是将变量a的值赋给变量default。所以，最后一种写法会报错。

同样地，因为export default命令的本质是将后面的值，赋给default变量，所以可以直接将一个值写在export default之后。（**刚好和export相反，export要么写变量声明语句，要么必须将变量写在大括号里**）

## CommonJS和ES6 Moduel的区别 ##

1.  CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。export命令规定的是**对外的接口**，接口和模块内部的变量是一一对应的关系，通过这个接口可以获取模块内变量实时的值，而CommonJS不行。
2.  CommonJS 常用于node.js，因为他是同步的，会阻塞后面的代码，常用于服务器，因为在服务端，模块文件都存在本地磁盘，读取非常快，所以这样做不会有问题。但是在浏览器端，限于网络原因，更合理的方案是使用异步加载。而ES6模块化是在编译阶段执行，因此可以用于浏览器也可以用于服务器。
3.  CommonJS 模块是**运行时加载**，ES6 模块是**编译时**输出接口。CommonJS 模块就是**对象**；即在输入时是先加载整个模块，生成一个对象，然后再从这个对象上面读取方法，这种加载称为“运行时加载”，因此也不能按需引用。ES6 模块的设计思想是尽量的**静态化**，使得**编译**时就能确定模块的依赖关系，可以按需引用。

## 继承 ##

判断原型和实例的关系

1.  instanceof 操作符
2.  isPrototypeOf()

**实现继承的方法**  
**1. 原型链继承**  
子类的原型设置为父类的实例。问题：

1.  子类的的原型都是同一个父类实例的引用，多个实例对引用类型的操作会被篡改。
2.  子类无法向父类传参。
    
        Son.prototype = new Father();

**2.借用构造函数**  
在子类型构造函数的内部调用超类型构造函数。问题：

1.  只能继承父类的实例属性和方法，不能继承原型属性/方法
2.  无法实现复用，每个子类都有父类实例函数的副本，影响性能
    
        function Son(){ 
        	Father.call(this);//继承了Father,且向父类型传递参数
        }

**3. 组合继承**  
使用**原型链**实现对原型属性和方法的继承,通过借用**构造函数**来实现对实例属性的继承.问题：

1.  在实例和原型中存在着同名的父类构造函数中的属性和方法，造成了不必要的浪费。
    
        function Son(name,age){ 
        	Father.call(this,name);//继承实例属性，第一次调用Father()
        	this.age = age;
        }
        Son.prototype = new Father();//继承父类方法,第二次调用Father()

**4.原型继承**  
利用一个**空对象**作为中介，将某个对象直接赋值给空对象构造函数的原型，返回新对象的实例。问题（和原型链一样）：

1.  子类的的原型都是同一个父类实例的引用，多个实例对引用类型的操作会被篡改。
2.  子类无法向父类传参。
    
        function object(obj){ 
          function F(){ }
          F.prototype = obj;
          return new F();
        }
        var anotherPerson = object(person);  //person是对象实例的引用

**5.寄生式继承**  
核心：在原型式继承的基础上，**增强对象**，返回增强后的对象。问题：

1.  原型链继承多个实例的引用类型属性指向相同，存在篡改的可能。
2.  无法传递参数
3.  能做到函数复用而降低效率

function createAnother(original){ 
    	var clone = object(original);//通过调用object函数创建一个新对象
    	clone.sayHi = function(){ //以某种方式来增强这个对象
    		alert("hi");
    	};
    	return clone;//返回这个对象
    }

**6.寄生组合式继承**  
**通过调用父类构造函数来继承属性，再通过寄生式继承来继承父类的圆形中的函数**（而不是继承实例），这样它只调用了一次SuperType 构造函数，并且因此避免了在SubType.prototype 上创建不必要的、多余的属性。于此同时，原型链还能保持不变；因此，还能够正常使用instanceof 和isPrototypeOf()。

**7.混入方式继承多个对象**

function MyClass() { 
         SuperClass.call(this);
         OtherSuperClass.call(this);
    }
    
    // 继承一个类
    MyClass.prototype = Object.create(SuperClass.prototype);
    // 混合其它
    Object.assign(MyClass.prototype, OtherSuperClass.prototype);
    // 重新指定constructor
    MyClass.prototype.constructor = MyClass;
    
    MyClass.prototype.myMethod = function() { 
         // do something
    };

Object.assign会把 OtherSuperClass原型上的函数拷贝到 MyClass原型上，使 MyClass 的所有实例都可用 OtherSuperClass 的方法。

**8.ES6 extends**  
extends继承的核心代码如下，其实现和上述的寄生组合式继承方式一样。子类必须在constructor方法中代用super方法，否则新建实例将会报错

总结：  
1、函数声明会提升和类声明不会提升  
2、ES5的继承实质上是先创建子类的实例对象，然后再将父类的方法添加到this上（Parent.call(this)，ES6的继承有所不同，实质上是先创建父类的实例对象this，然后再用子类的构造函数修改this。因为子类没有自己的this对象，所以必须先调用父类的super()方法，否则新建实例报错。

## new运算符 ##

var obj  = { };
    obj.__proto__ = F.prototype;
    F.call(obj);

第一行，我们创建了一个空对象obj;

第二行，我们将这个空对象的\_\_proto\_\_成员指向了F函数对象prototype成员对象;

第三行，我们将F函数对象的this指针替换成obj，然后再调用F函数.

当函数返回值类型为对象时，则返回该对象。  
当函数返回值类型不为对象时，返回该构造函数的实例化对象。  
我们的构造函数中返回了参数name,如果参数是普通值(非引用类型)，则不会发生什么影响，但是如果值是引用类型（如对象，数组等），则我们new 出来的对象就会被返回的引用类型值给替换了。

**手写new**

function _new(fn,...rest){ 
      var obj = { }
      obj.__proto__ = fn.prototype;
      //将thisObj作为fn的this，继承其属性，并获取返回结果为result
      const result = fn.apply(obj,rest);
      //根据result对象的类型决定返回结果
      return typeof result === "object" ? result : obj;
    }

## 判断JS类型 ##

1.  typeof，只能判断基本类型。
2.  instanceof，不能判断基本类型。
3.  constructor属性，不能判断null和undefined，并且属性可以被更改。
4.  toString，都可以进行判断，Object类型可以直接使用，而非Object类型需要:  
    Object.prototype.toString.call(xxx)来进行判断，可以获取class属性。

## 数组扁平化 ##

1.  **reduce+递归**

function flatten(arr) {   
        return arr.reduce((result, item)=> { 
            return result.concat(Array.isArray(item) ? flatten(item) : item);
        }, []);
    }

**2. toString()、jion()**  
数字数组调用toString（）后会去掉\[\]，字符串调用的话会报错，但是字符穿可以使用join（）。比如：

a = [[1, 2], 3, [4, 5, [6, 7]]]
    console.log(a.toString()); //1,2,3,4,5,6,7
    console.log(a.join(',')); //1,2,3,4,5,6,7

数字可以通过map转换成number类型。

arr.toString().split(',').map(number=>Number(number))
    arr.join(',').split(',')

**3. es6提供的新方法flat(depth)**  
flat(depth) 方法中的参数depth，代表展开嵌套数组的深度，默认是1。所以我们可以添加参数1，或者直接调用flat()来对2维数组进行扁平化。  
其实还有一种更简单的办法，无需知道数组的维度，直接将目标数组变成1维数组。depth的值设置为**Infinity**。

let a = [1,[2,3,[4,[5]]]];
    a.flat(Infinity); // [1,2,3,4,5] a是4维数组

**4. 循环+递归**

## 伪数组 ##

伪数组有两个特点：

1.  具有length属性，其他属性（索引）为非负整数
2.  但是却不具备数组的方法  
    也就是看起来像是数组，然而并不是…

比如函数中的arguements，以及通过DOM选择器选出来的DOM节点。

**如何判断真伪数组？**

1.  使用instanceof 方法
2.  使用Array.isArray()方法: **未必准确**，见下文， 使用伪数组.**proto** = Array.prototype;转换后不可用，因为该方法无法检测通过原型继承修改类型的这种情况。
3.  伪数组.constructor === Array; 适用于带constructor的场景
4.  Object.prototype.toString.call(arr) === ‘\[object Array\]’

**如何把伪数组转换成数组?**

1.  Array.prototype.slice.call(); / Array.prototype.slice.apply();
2.  原型继承： 伪数组. \_ *proto*\_ = Array.prototype;arguments 无影响正常使用  
    ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YiYU3VybWFu_size_20_color_FFFFFF_t_70_g_se_x_16]
3.  ES6中数组的新方法 Array.from()

**总结**

1.  在使用判断是否为数组时，如果无法知道数组是否可能是使用\*\*“原型继承”\*\*的方法转换得到的，就不要使用Array.isArray()方法判断对象是否为数组的方法。
2.  在写转换方法时，由于**原型继承**： 伪数组.\_ *proto*\_ = Array.prototype;可能存在判断失误，尽量使用Array.prototype.slice.call(); / Array.prototype.slice.apply();如果可以使用ES6，使用Array.from()方法较为简单明了。

## 数组去重 ##

参考：https://www.cnblogs.com/zsp-1064239893/p/11196501.html

1.  ES6 Set()

let arr = [1,0,0,2,9,8,3,1];
              function unique(arr) { 
                    return Array.from(new Set(arr))
              }
              console.log(unique(arr));   // [1,0,2,9,8,3]　　or6　　　　　　console.log(...new Set(arr));　// [1,0,2,9,8,3]

1.  利用数组的indexOf方法去重

1.  利用数组的sort方法去重（相邻元素对比法）

1.  利用数组的includes去重

1.  利用数组的filter方法去重

function unique( arr ){ 
    12                     // 如果新数组的当前元素的索引值 == 该元素在原始数组中的第一个索引，则返回当前元素
    13                     return arr.filter(function(item,index){ 
    14                         return arr.indexOf(item,0) === index;
    15                     });
    16                 }

## attribute & property ##

参考文章：https://www.cnblogs.com/soyxiaobi/p/9581851.html

attribute 是 dom 元素在文档中作为 html 标签拥有的属性；  
property 是 dom 元素在 js 中作为对象拥有的属性。

**attribute:**  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YiYU3VybWFu_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
通过setAttribute()和getAttribute()可以来修改在html上原本的、自定义的属性。

**property:**  
html自带的dom属性会自动转换成property,但是自定义的属性没有这个’权利’  
**直接把div标签当作对象,用’.'输出即是property属性**  
但是注意!property是不能输出自定义属性的

<div class="divClass" id="divId" addUserDefine="zidingyi"></div>
    
    console.log(divId.class);           //打印 divClass
    console.log(divId.addUserDefine)    //打印 undefined

需要通过defineProperty定义。注意，**对属性Property可以赋任何类型的值，而对特性Attribute只能赋值字符串！**

var obj = { };
    Object.defineProperty(obj,'name',{ 
        value:'Property'
    })
    
    console.log(obj.name)   //打印 Property

还有，  
1.property能够从attribute中得到同步；  
2.attribute不会同步property上的值，会导致不同步；

//html
    <input value="initValue" id="ipt"/>
    
    //js
    window.onload = function(){ 
        var ipt = document.getElementById('ipt');
    
        ipt.value = 'changeValue'
        console.log(ipt.value);   //changeValue
        console.log(ipt.getAttribute('value'));   //initValue
    }

## 柯里化 ##

> 定义：是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。

好处:

1.  参数复用
    
        // 正常正则验证字符串 reg.test(txt)
        
        // 函数封装后
        function check(reg, txt) { 
            return reg.test(txt)
        }
        
        check(/\d+/g, 'test')       //false
        check(/[a-z]+/g, 'test')    //true
        
        // Currying后
        function curryingCheck(reg) { 
            return function(txt) { 
                return reg.test(txt)
            }
        }
        
        var hasNumber = curryingCheck(/\d+/g)
        var hasLetter = curryingCheck(/[a-z]+/g)
        
        hasNumber('test1')      // true
        hasNumber('testtest')   // false
        hasLetter('21212')      // false
2.  延迟执行
3.  提前确认，动态返回函数（可以使用动态返回的on，不用每次绑定事件都要进行判断）
    
        var on = function(element, event, handler) { 
            if (document.addEventListener) { 
                if (element && event && handler) { 
                    element.addEventListener(event, handler, false);
                }
            } else { 
                if (element && event && handler) { 
                    element.attachEvent('on' + event, handler);
                }
            }
        }
        
        var on = (function() { 
            if (document.addEventListener) { 
                return function(element, event, handler) { 
                    if (element && event && handler) { 
                        element.addEventListener(event, handler, false);
                    }
                };
            } else { 
                return function(element, event, handler) { 
                    if (element && event && handler) { 
                        element.attachEvent('on' + event, handler);
                    }
                };
            }
        })();

**封装柯里化函数**

*  两次
    
        // 初步封装
        var currying = function(fn) { 
            // args 获取第一个方法内的全部参数
            var args = Array.prototype.slice.call(arguments, 1)
            // arguments是类数组，不能直接使用数组方法
            return function() { 
                // 将后面方法里的全部参数和args进行合并
                var newArgs = args.concat(Array.prototype.slice.call(arguments))
                // 把合并后的参数通过apply作为fn的参数并执行
                return fn.apply(this, newArgs)
            }
        }
 *  多次扩展，只要参数小于函数的参数的个数就可以一直扩展
    
        // 支持多参数传递
        function progressCurrying(fn, args) { 
            var len = fn.length;
            var args = args || [];
        
            return function () { 
                var _args = Array.prototype.slice.call(arguments);
                Array.prototype.push.apply(args, _args);
        
                // 如果参数个数小于最初的fn.length，则递归调用，继续收集参数
                if (args.length < len) { 
                    return progressCurrying.call(null, fn, args);
                } else { 
                    // 参数收集完毕，则执行fn
                    return fn.apply(null, args);
                }
        
        
            }
        }
        function add(a, b, c) { 
            return a + b + c;
        }
        var x = progressCurrying(add)(1)(2)(3);
        console.log(x);  //6
 *  add面试题

// 实现一个add方法，使计算结果能够满足如下预期：
    add(1)(2)(3) = 6;
    add(1, 2, 3)(4) = 10;
    add(1)(2)(3)(4)(5) = 15;
    
    function add() { 
        // 第一次执行时，定义一个数组专门用来存储所有的参数
        var _args = Array.prototype.slice.call(arguments);
    
        // 在内部声明一个函数，利用闭包的特性保存_args并收集所有的参数值
        var _adder = function() { 
            _args.push(...arguments);
            return _adder;
        };
    
        // 利用toString隐式转换的特性，当最后执行时隐式转换，并计算最终的值返回
        _adder.toString = function () { 
            return _args.reduce(function (a, b) { 
                return a + b;
            });
        }
        return _adder;
    }

## JS精确时间倒计时 ##

参考文章：https://www.xuanfengge.com/js-realizes-precise-countdown.html

当前服务器时间 = 服务器系统返回时间 + 网络传输时间 + 前端渲染时间 + 常量（可选）

//继续线程占用
    setInterval(function(){  
         var j = 0; 
         while(j++ < 100000000); 
    }, 0); 
     
    //倒计时
    var  interval = 1000,
           ms = 50000,  //从服务器和活动开始时间计算出的时间差，这里测试用50000ms
           count = 0,
           startTime = new Date().getTime();
    if( ms >= 0){ 
           var timeCounter = setTimeout(countDownStart,interval);                  
    }
     
    function countDownStart(){ 
           count++;
           var offset = new Date().getTime() - (startTime + count * interval);
           var nextTime = interval - offset;
           var daytohour = 0; 
           if (nextTime < 0) {  nextTime = 0 };
           ms -= interval;
           console.log("误差：" + offset + "ms，下一次执行：" + nextTime + "ms后，离活动开始还有：" + ms + "ms");
           if(ms < 0){ 
                  clearTimeout(timeCounter);
           }else{ 
                  timeCounter = setTimeout(countDownStart,nextTime);
           }
     }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70]: /images/20220829/05bf19e33b2545529e966bd41bc9ba96.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 1]: /images/20220829/1217b952cdba4079bab6535d54ea0cd1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 2]: /images/20220829/6a613257d34b46ba90fd03b93fefc473.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 3]: /images/20220829/486baefdeeed4d289fbd344049f27dec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 4]: /images/20220829/b6ea188debe34c0f9c7c9bc14254828b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YiYU3VybWFu_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/57f2c42e9aa549b98be600696fbf01a6.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YiYU3VybWFu_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/4adbad2fd624454e8c12c2a4d6627505.png