你可能不熟悉的JS总结

时间  2019-11-05
标签 可能 不熟悉 总结 栏目 JavaScript 繁體版
原文   原文链接

暂时性死区

只要块级做用域存在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接收的是参数列表。服务器

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

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值。

let obj = {};

let obj1 = Object.defineProperty(obj, 'name', {
    enumerable: true,
    value: 'bjw'    
});

// 这里会返回false 由于咱们上面定义name这个属性是不可修改的,
// 而后咱们又在这里修改了name属性,因此修改失败返回值为false
let result1 = Reflect.defineProperty(obj, 'name', {
    configurable: true,
    enumerable: true,
    value: 'happy'
});
console.log(result1); // false
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

const PENDING = 'pending';
const RESOLVED = 'resolved';
const REJECTED = 'rejected';

function MyPromise(fn) {
    const _this = this;
    _this.state = PENDING;
    _this.value = null;
    _this.resolvedCallbacks = [];
    _this.rejectedCallbacks = [];


    // resolve函数
    function resolve(value) {
        if (_this.state === PENDING) {
            _this.state = RESOLVED;
            _this.value = value;
            _this.resolvedCallbacks.map(cb => cb(_this.value));
        }
    }

    // rejected函数
    function reject(value) {
        if (_this.state === PENDING) {
            _this.state = REJECTED;
            _this.value = value;
            _this.rejectedCallbacks.map(cb => cb(_this.value));
        }
    }

    // 当建立对象的时候，执行传进来的执行器函数
    // 而且传递resolve和reject函数
    try {
        fn(resolve, reject);
    } catch (e) {
        reject(e);
    }
}

// 为Promise原型链上添加then函数
MyPromise.prototype.then = function (onFulfilled, onRejected) {
    const _this = this;
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : v => v;
    onRejected = typeof onRejected === 'function' ? onRejected : r => {
        throw r;
    }
    if (_this.state === PENDING) {
        _this.resolvedCallbacks.push(onFulfilled);
        _this.rejectedCallbacks.push(onRejected);
    }
    if (_this.state === RESOLVED) {
        onFulfilled(_this.value);
    }
    if (_this.state === REJECTED) {
        onRejected(_this.value);
    }
    return _this;
}



// 测试
new MyPromise(function (resolve, reject) {
    setTimeout(() => {
        resolve('hello');
    }, 2000);
}).then(v => {
    console.log(v);
}).then(v => {
    console.log(v + "1");
})
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程