你可能不熟悉的JS总结

妖狐艹你老母 2022-03-19 14:28 155阅读 0赞

# 暂时性死区 #

只要块级作用域存在`let`命令，它所声明的变量就“绑定”这个区域，不再受外部的影响。这么说可能有些抽象，举个例子：

var temp = 123;
    if(true) {
        console.log(temp);
        let temp;
    }
    
    结果：
    > ReferenceError: temp is not defined

在代码块内，使用let声明变量之前，该变量都是不可用的。在语法上，称为“暂时性死区”。（temporal dead zone）

ES6规定暂时性死区和`let`、`const`语句不出现变量提升，主要是为了减少运行时错误，防止在变量声明前就使用这个变量，从而导致意料之外的行为。

# call和apply方法 #

这两个方法都可以改变一个函数的上下文对象，只是接受参数的方式不一样。  
call接收的是逗号分隔的参数。  
apply接收的是参数列表。

相信你肯定看到过这样的代码：

var arr = [1, 2, 3];
    var max = Function.prototype.apply.call(Math.max, null, arr);
    console.log(max); // 3

那么对这段代码怎么理解呢？

*  1.将`Function.prototype.apply`看成一个整体

(Function.prototype.apply).call(Math.max, null, arr)

*  2.`func.call(context, args)`可以转化为`context.func(args)`

所以代码被转换为：

Math.max.apply(undefined, arr)

基本上到这一步已经没必要去解释了。

那么你有没有试过将`call`和`apply`互换位置呢？

var arr = [1, 2, 3];
    var max = Function.prototype.call.apply(Math.max, null, arr);
    console.log(max); // -Infinity

为什么的它的输出结果为`-Infinity`呢？

因为`apply`的第二参数必须为数组，这里并不是，所以参数不能正确的传递给`call`函数。  
根据`func.apply(context, args)`可以转化为`context.func(args)`。所以被转化成了`Math.max.call()`， 直接调用则会输出`-Infinity`。

如果想要正确调用，则应这样书写：

var arr = [1, 2, 3];
    var max = Function.prototype.call.apply(Math.max, arr);
    console.log(max); // 3

为了巩固以上内容，且看一个面试题：

var a = Function.prototype.call.apply(function(a){return a;}, [0,4,3]);
    alert(a);

分析弹出的`a`值为多少？

// 将call方法看成一个整体
    (Function.prototype.call).apply(function(a){return a;}, [0,4,3]);
    
    // func.apply(context, args)可以转化为context.func(...args)
    (function(a){return a;}).call(0, 4, 3);
    
    // 所以结果很明显，输出4

# Proxy对象 #

作用：用来自定义对象中的操作。

let p = new Proxy(target, handler)

`target` 代表需要添加代理的对象，`handler` 用来自定义对象中的操作，比如可以用来自定义 `set` 或者 `get` 函数。

且看一个的小栗子：

// onChange 即要进行的监听操作
    var watch = (object, onChange) => {
        const handler = {
            // 如果属性对应的值为对象，则返回一个新的Proxy对象
            get(target, property, receiver) {
                try {
                    return new Proxy(target[property], handler);
                } catch (err) {
                    return Reflect.get(target, property, receiver);
                }
            },
            // 定义或修改对象属性
            defineProperty(target, property, descriptor) {
                onChange('define',property);
                return Reflect.defineProperty(target, property, descriptor);
            },
            // 删除对象属性
            deleteProperty(target, property) {
                onChange('delete',property);
                return Reflect.deleteProperty(target, property);
            }
        };
    
        return new Proxy(object, handler);
    };
    
    
    // 测试对象
    var obj = {
        name: 'bjw',
        age: 22,
        child: [1, 2, 3]
    }
    
    // 对象代理
    var p = watch(obj1, (type, property) => { 
        console.log(`类型：${type}, 修改的属性：${property}`)
    });
    
    p.name = 'qwe'
      类型：define, 修改的属性：name
      "qwe"
    
    p.child
      Proxy {0: 1, 1: 2, 2: 3, length: 3}
     
    p.child.push(4)
      类型：define, 修改的属性：3
      类型：define, 修改的属性：length
      4
    
    p.child.length = 2
      类型：define, 修改的属性：length
      2
    
    p.child
      Proxy {0: 1, 1: 2, length: 2}

如果关注Vue进展的话，可能已经知道Vue3.0中将通过`Proxy`来替换原来的`Object.defineProperty`来实现数据响应式。之所以要用`Proxy`替换原来的API原因在于`Proxy`无需一层层递归为每个属性添加代理，一次即可完成以上操作。性能上更好，并且原本的实现有一些数据更新不能监听到，但`Proxy`可以完美监听到任何方式的数据改变，相信通过上面的例子已经能够感受到`Proxy`带来的优势了。唯一的缺点可能就是浏览器兼容性不太好了。

# Reflect对象 #

**为什么要有这样一个对象？**

*  用一个单一的全局对象去存储这些方法，能够保持其他的JavaScript代码整洁、干净。（不然的话得通过原型链调用）
 *  将一些命令式的操作delete、in使用函数代替，目的是为了让代码更好维护，避免出现更多的保留字。

**Reflect对象拥有以下静态方法：**

Reflect.apply
    Reflect.construct
    Reflect.defineProperty
    Reflect.deleteProperty
    Reflect.enumerate // 废弃的
    Reflect.get
    Reflect.getOwnPropertyDescriptor
    Reflect.getPrototypeOf
    Reflect.has
    Reflect.isExtensible
    Reflect.ownKeys
    Reflect.preventExtensions
    Reflect.set
    Reflect.setPrototypeOf

**具体函数细节：**

>  **Reflect.apply(target, this, arguments)**

// target：目标函数
    // this：绑定的上下文对象
    // arguments：函数的参数列表
    Reflect.apply(target, this, arguments)
    
    const arr = [2, 3, 4, 5, 6];
    let max;
    // ES6
    max = Reflect.apply(Math.max, null, arr)
    
    // ES5  
    max = Math.max.apply(null, arr);
    max = Function.prototype.apply.call(Math.max, null, arr);

>  **Reflect.construct(target, argumentsList\[, newTarget\])**

// 这个方法，提供了一种新的不使用new来调用构造函数的方法
    function A(name) {
        console.log('Function A is invoked!');
        this.name = name;
    }
    A.prototype.getName = function() {
        return this.name;
    };
    
    function B(age) {
        console.log('Function B is invoked!');
        this.age = age;
    }
    B.prototype.getAge = function() {
        return this.age;
    };
    
    
    // 测试 (这两种是一致的)
    var tom = new A('tom');
    var tom = Reflect.construct(A, ['tom']);
    
    
    // jnney继承了A的实例属性，同时继承了B的共享属性
    // 简单来说，A构造函数被调用，但是 jnney.__proto__ === B.prototype
    var jnney = Reflect.construct(A, ['jnney'], B);

>  **Reflect.defineProperty(target, propertyKey, attributes)**

这个方法和`Object.definePropperty`（属性定义失败，会抛出一个错误，成功则返回该对象）相似，不过`Reflect.defineProperty`（属性定义失败，返回false，成功则返回true）返回的是一个Boolean值。

>  **Reflect.deleteProperty(target, propertyKey)**

let obj = {
        name: 'dreamapple',
        age: 22
    };
    
    let r1 = Reflect.deleteProperty(obj, 'name');
    console.log(r1); // true
    let r2 = Reflect.deleteProperty(obj, 'name');
    console.log(r2); // true
    let r3 = Reflect.deleteProperty(Object.freeze(obj), 'age');
    console.log(r3); // false

>  **Reflect.get(target, propertyKey\[, receiver\])**   
>  **Reflect.set(target, propertyKey, value\[, receiver\])**

这个方法用来读取/设置一个对象的属性，`target`是目标对象，`propertyKey`是我们要读取的属性，`receiver`是可选的，如果`propertyKey`的`getter`函数里面有`this`值，那么`receiver`就是这个`this`所代表的上下文。

>  **Reflect.getOwnPropertyDescriptor(target, propertyKey)**

这个方法与`Object.getOwnPropertyDescriptor`方法类似，其中`target`是目标对象，`propertyKey`是对象的属性，如果这个属性存在属性描述符的话就返回这个属性描述符；如果不存在的话，就返回undefined。(如果第一个参数不是对象的话，那么`Object.getOwnPropertyDescriptor`会将这个参数强制转换为对象，而方法 `Reflect.getOwnPropertyDescriptor`会抛出一个错误。)

var obj = {age: 22}
    Reflect.getOwnPropertyDescriptor(obj, 'age')
    {value: 22, writable: true, enumerable: true, configurable: true}

>  **Reflect.getPrototypeOf(target)**   
>  **Reflect.setPrototypeOf(target, prototype)**

这个方法与`Object.getPrototypeOf`方法是一样的，都是返回一个对象的原型，也就是内部的\[\[Prototype\]\]属性的值。

`Reflect.setPrototypeOf`与`Object.setPrototypeOf`方法的作用是相似的，设置一个对象的原型，如果设置成功的话，这个对象会返回一个true；如果设置失败，这个对象会返回一个false。

>  **Reflect.has(target, propertyKey)**

这个方法相当于ES5的`in`操作符，就是检查一个对象上是否含有特定的属性；我们继续来实践这个方法：

function A(name) {
        this.name = name || 'dreamapple';
    }
    A.prototype.getName = function() {
        return this.name;
    };
    
    var a = new A();
    
    console.log('name' in a); // true
    console.log('getName' in a); // true
    
    let r1 = Reflect.has(a, 'name');
    let r2 = Reflect.has(a, 'getName');
    console.log(r1, r2); // true true

>  **Reflect.isExtensible(target)**

这个函数检查一个对象是否是可以扩展的，也就是是否可以添加新的属性。(要求`target`必须为一个对象，否则会抛出错误)

let obj = {};
    let r1 = Reflect.isExtensible(obj);
    console.log(r1); // true
    // 密封这个对象
    Object.seal(obj);
    let r2 = Reflect.isExtensible(obj);
    console.log(r2); // false

# 模块化 #

使用模块化，可以为我们带来以下好处：

*  解决命名冲突
 *  提供复用性
 *  提高代码可维护性

### 立即执行函数 ###

在早期，使用立即执行函数实现模块化，通过函数作用域解决了命名冲突、污染全局作用域的问题。

### AMD 和 CMD ###

这两种实现方式已经很少见到，具体的使用方式如下：

// AMD
    define(['./a', './b'],function(a, b){
        // 模块加载完毕可以使用
        a.do();
        b.do(); 
    });
    
    // CMD
    define(function(require, exports, module){
        // 加载模块
        var a = require('./a');    
    });

### CommonJS ###

CommonJS最早是Node在使用，目前可以在Webpack中见到它。

// a.js
    module.exports = {
        a: 1
    }
    
    // or 
    exports.a = 1;
    
    // 在b.js中可以引入
    var module = require('./a');
    module.a   // log 1

**难点解析：**

// module 基本实现
    var module = {
        id: 'xxx',
        exports: {}
    }
    
    var exports = module.exports;
    // 所以，通过对exports重新赋值，不能导出变量

### ES Module ###

ES Module 是原生实现模块化方案。

// 导入模块
    import xxx form './a.js';
    import { xxx } from './b.js';
    
    // 导出模块
    export function a(){}
    
    // 默认导出
    export default {};
    export default function(){}

# ES Module和CommonJS区别 #

*  CommonJS支持动态导入，也就是`require(${path}/xx.js)`,ES Module不支持
 *  CommonJS是同步导入，因为用于服务器端，文件都在本地，同步导入即使卡住主线程影响也不大。而ES Module是异步导入，因为用于浏览器，需要下载文件，采用同步导入会对渲染有很大影响
 *  CommonJS在导出时都是值拷贝，就算导出值变了，导入的值也不会改变。如果想更新值，必须重新导入一次。但是ES Module采用实时绑定的方式，导入导出的值都指向同一个内存地址，所以导入值会跟导出值变化
 *  ES Module 会编译成 `require/exports` 来执行的

# 手写简单版本的Promise #

来源：[https://segmentfault.com/a/1190000018113011][https_segmentfault.com_a_1190000018113011]

[https_segmentfault.com_a_1190000018113011]: https://segmentfault.com/a/1190000018113011