js

复习资料

基础知识
- 数据类型
  - 如何准确判断JS数据类型
- eval的用处
- 伪数组与真实数组
- 字面量的字符串和构造对象差异
- 正则
- es6语法特点
  - 变量声明的区别
  - 模块化
  - 箭头函数的特点
  - proxy和Object.defineProperty
重要概念
- this的指向
- 什么是闭包
- JS执行上下文栈作用域链
- 原型和原型链
手写函数
- 手写new函数
- 深拷贝
- 节流防抖
- 函数柯里化
- 手写promise
- 手写bind、apply、call
- instanceOf
- 如何实现继承、es5继承与es6的不同

内容

基础知识

数据类型

基本数据类型
- string、number、boolean、null、undefined、symbol
复杂数据类型
- object、array、function、date、regexp

类型判断（typeof） string、number、boolean、undefined、symbol、object、function

NaN，是数字类型，但是数学运算没有成功，返回了失败的结果
- isNaN用于判断传入的变量是否能转换成数字，如果可以返回false，不可以返回true

类型判断准确（toString）

Object.prototype.toString.call(val)
[object Type]

eval的用处

eval将传入的字符串当做javascript代码执行，返回执行结果
传入的不是字符串将原样返回
将字符串解析成对象，对象字符串外层需要包一下括号，否则会报错
将代码在全局作用域执行,newfunction始终是当前作用域

伪数组与真实数组

真实数组是array结构
伪数组是一个由一个对象构成的
- 伪数组通过0、1、2这样的key索引来存储值
- 它有length属性
- 并且它有Symbol.interator属性，来设置迭代返回值

const obj = {
    '0': 0,
    '1': 1,
    '2': 2,
    [Symbol.iterator] () {
        var current = this;
        let index = 0;
        return {
            next: function () {
                if(typeof current[index]!=='undefined'){
                    return {
                        value: current[index++],
                        done: false
                    }
                } else {
                    // index = 0;
                    return {
                        done: true
                    }
                }
            }
        };
    }
};

字面量的字符串和String构造函数生成的字符串有什么不同

字面量形式的字符串是string型，而构造函数的实例时objct
实例的string，对象具备PrimitiveValue属性，他标识的是值
两个一样的字符串，字面量和String构造函数实例不全等
字面量具备属性和方法，是因为js内部进行了包装
字面量添加属性和方法不生效，String的实例会生效

正则

常用方法：
- exec,返回匹配的数组
- test，匹配成功返回boolean

...待补充

es6语法

let、var、const区别

1.三者都表达的是变量申明 2.var申明，创建上下文阶段会出现变量提升，在申明前使用变量会变量值为undefined 3.let、const声明会出现暂时性死区，无法在变量申明前使用变量 4.const变量初始化必须携带值,申明后无法进行引用更改，意思就是普通类型无法改变，应用类型不能改变索引

模块化

模块化文章

在JavaScript中分为两种模块化标准，commonJS、es6标准
commonJS是node中的模块化标准，而es6标准是ECMAScript后续推出的标准
两者存在的差异
- commonJS输出的是值的拷贝，es6模块输出的是值得引用
- commonJS是运行时输出，在导入模块后。会执行导入脚本内容
- es6模块不是对象，它对外接口只是一个静态定义，在代码静态解析阶段就会生成，不能放在块级作用域
- es6的运行机制与commonJS不同，JS引擎对脚本静态分析时
- 遇到模块加载命令import就会生成一个只读引用，在脚本在真正执行时，再根据这个只读引用到被加载的模块取值
node，13.2开始允许commonJS可以与es6混用，.mjs文件总是以 ES6 模块加载，.cjs文件总是以 CommonJS 模块加载
.js文件的加载取决于package.json里面type字段的设置
COMMONJS：
- node使用的方案
- 使用：
  - require、module、exports、global
  - 导入：require、导出module.exports、exports
  - exports是module.exports的引用
- 特点：
  - 使用同步导入
AMD：
- 特点：采用异步加载，所有模块加载完成后才会执行回调
- 使用：
  - 使用：require，加回调函数，在回调函数中拿到加载的模块
  - 定义：defined，如果模块本身有依赖，第一个参数为数组依赖的模块
CMD：
- cmd和amd区别
- require后第一时间，加载并执行模块，amd提前执行，cmd延迟执行
- CMD使用时才加载，
es6module
- 特点：
  - es6模块不是对象，import命令会被静态分析，编译时导入，而不是在运行时加载
  - 静态分析成为可能
- 使用：
  - 导出：export、export default
  - 导入：import，或import函数
commonJs和es6的区别：
- 输出：
  - commonJS输出的是值得拷贝，es6输出的是值得引用
  - commonJS运行时加载，es6编译时导入接口
- es6：是编译时导出接口，所以不会执行脚本
- commonJS：会执行脚本，然后导出值

箭头函数的特点

箭头函数内的this，取决于外层作用域
箭头函数没有arguments
箭头函数不能使用new
箭头函数都是匿名函数

Proxy和Object.defineProperty

Proxy直接对对象进行代理
- 可以直接拦截到对象的，get、set、has、apply多达13种方式
- 针对数组拦截，调用push、splice会触发Proxy代理对象的set
- 可以配合Reflect使用，对对象操作规范化
Object.defineProperty
- 只能拦截对象的指定属性，无法拦截操作方法
- 对数组拦截，只能更改拦截数组的原型，或者将数组的访问方法代理到另一个更改的原型上

重要概念

说一说你对JS执行上下文栈和作用域链的理解

执行上下文分为两种类型：全局执行上下文、函数执行上下文
执行上下文分为两个阶段：创建阶段、激活/执行阶段
执行上下文在创建阶段会初始化：变量对象、作用域链、this指向
执行上下文以栈的形式存储，按照先进后出的原则，所以在全局代码尚未执行完成，底部始终有一个全局执行上下文

this的指向

this的指向主要分为一下几种情况
- new创建的新对象，this指向新对象
- 是否是通过硬绑定形式的对象，apply、call执行指定对象
- 箭头函数中的this，取决于箭头函数外的环境
- 是否是隐式调用，通过对象的形式调用自身上的方法
- 默认绑定，在非严格模式下，指向window或global，否则报错

什么是闭包

简单用一句话概括就是，闭包就是一个函数能够访问他的词法作用域，即使这个函数在他的词法作用域外执行

原型和原型链

原型和原型链
js原型重新赋值对象变化
instanceof原理
两句话简单概括：
- 构造函数实例具有__proto__属性指向构造函数的原型（标准浏览器），构造函数具有prototype指向它的原型，原型具有constructor指向它的构造函数
- 所有构造函数都是Function的实例，所有原型对象都是Object的实例除了Object.prototype
实现继承：

...待补充

手写函数

手写new执行过程的函数

在new执行阶段主要做了以下几件事情
- 创建一个新对象
- 将这个新对象作为构造函数的上下文
- 将新对象的__proto__属性指向构造函数的原型
- 若构造函数执行的结果是对象（非null）或函数直接返回执行结果
- 否则返回新对象

function _new(){
    var target = {};
    let [fn,...args] = arguments;
    target.__proto__ = fn.prototype;
    var result = fn.apply(target,args);
    if((typeof(result)==='object' || typeof(result)==='function') && result !== null) {
        return result;
    }
    return target;
}

深拷贝

主要是普通值引用和对象类型的引用关系解决循环引用强引用，弱引用

function deepCopy(val) {

    var constructor = getType(val);

    if (constructor!=='Array' && constructor!=='Object'){
        return val;
    }
    var nObj = constructor !== 'Array'?{}:[];

    for (var i in val) {
        var nType = getType(val[i]);
        if (nType==='Array'||nType==='Object') {
            nObj[i] = deepCopy(val[i]);
        } else {
            nObj[i] = val[i];
        }
    }

    function getType(val) {
        return Object.prototype.toString.call(val).slice(8, -1);
    }

    return nObj;
}

节流函数、防抖函数是什么，有什么作用如何写

概念：
- 防抖函数,在一段时间内只会执行一次，适用场景，浏览器宽度调整，页面自动适用宽度改变布局，限制触发频率，例如500秒做一次判断，是否需要改变根据宽度自适应
- 防抖函数，在一段时间后没执行该函数，执行。适用场景，搜索框输入出现推荐搜索词条时，在用户停止输入300毫秒后执行服务端请求
节流函数：

// function throttle(fn,wait){
//     var timer,pre;
//     return function(){
//         var now = +new Date();
//         var args = arguments;
//         if(!pre) pre = now;
//         var time = wait - (now-pre);
//         if(timer) clearTimeout(timer);
//         if(time<=0 || time>wait) {
//             fn.apply(this,args);
//             pre = now;
//         } else {
//             timer = setTimeout(()=>{
//                 fn.apply(this,args);
//                 pre = now;
//             },time)
//         }
//     }
// }
function throttle(fn,wait){
    let timer;
    return function(...args){
        if(timer) return;
        timer = setTimeout(()=>{
            timer = null;
            fn.apply(this,args);
        },wait)
    }
}

防抖函数：

function debounce(fn,wait = 200){
    var timer;
    return function(){
        var args = arguments;
        if(timer) clearTimeout(timer);
        timer = setTimeout(()=>{
            fn.apply(this,args);
        },wait);
    }
}

函数柯里化

概念：
- 函数柯里化是将接收多个参数的函数，转换为接收单个参数的函数
- 并且返回接收剩余参数的函数，若参数长度已达到函数入参标准则返回结果

function curry(fn,...args){
    var len = fn.length;
    return args.length>=len?fn.apply(this,args):(...nArgs)=>curry(fn,...args,...nArgs);
}

手写Promise

实现Promise基础功能
Promise链式调用
Promise.race方法
Promise.all方法

手写apply、call

Function.prototype._call = function(){
    let [target,...args] = arguments;
    let _contructor = this;
    if(target===undefined || target === null){
        target = typeof window !== 'undefined'? window: global;
    }
    var key = Symbol('key');
    target[key] = _contructor;
    var result = target[key](...args);
    delete target[key];
    return result;
}

实现bind
- 将this绑定到指定this对象
- 将目标函数的原型指向新返回函数的原型

Function.prototype._bind = function(){
    if (typeof this !== 'function') {
        throw '调用必须为函数'
    }
    let [context,...args] = arguments;
    var callFn = this;
    var nFn = function(){
        return callFn.apply(this instanceof nFn? this : context,args);
    }
    if (this.prototype) {
        nFn.prototype = Object.create(this.prototype);
    }
    return nFn;
}

如何实现继承，es6继承与之有何不同

es5和es6继承区别
- ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。
- ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。

注意：ES6中继承的子类中，如果使用构造函数constructor()那么就必须使用 super()方法初始化，这样下面才可以调用this关键字。super()只能用在子类的构造函数之中，用在其他地方就会报错。

子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。 ---阮一峰

instanceOf

实现instanceOf

function instanceOf(left,right){
    while(left){
        if (left.__proto__ === right.prototype) return true;
        left = left.__proto__;
    }
    return false;
}

目录​

内容​

基础知识​

es6语法​

重要概念​

手写函数​

目录

内容

基础知识

es6语法

重要概念

手写函数