一些你可能不熟悉的JS知识点总结
暂时性死区
只要块级作用域存在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值。
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");
})
这篇文章就介绍到这了，需要的朋友可以参考一下。
相关文章
这篇文章主要为大家介绍了JavaScript 隐式类型转换规则详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步早日升职加薪2023-05-05
日期函数是我们经常用到的知识点，下面通过本文给大家介绍JavaScript中日期函数的相关操作知识，非常不错，感兴趣的朋友一起学习吧2016-08-08
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
这里也会遇到一次性关闭所有modal引起阴影遮罩的问题，也就是所有modal都关闭了，但是主页面仍然被阴影遮罩。下面通过本文给大家分享解决方案，需要的朋友参考下吧2017-02-02
这篇文章主要为大家详细介绍了js实现计时器秒表功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
下面小编就为大家带来一篇JS 获取HTML标签内的子节点的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
本文主要给大家详细介绍Angular和Nodejs、socket.io的使用，以及如何使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室，需要的朋友可以来参考下2015-08-08
这篇文章主要介绍了javascript中this的用法,结合具体实例形式总结分析了javascript中this各种常见的功能、用法及相关操作注意事项,需要的朋友可以参考下2019-07-07
这篇文章主要为大家整理了18个JavaScript优化冗余代码的技巧，文中的示例代码简洁易懂，具有一定的借鉴价值，感兴趣的小伙伴可以了解一下2023-08-08
在前端直接读取并原样展示Word文档是一个相对复杂的任务,因为Word文档的格式(如.doc或.docx)与Web技术栈使用的格式(HTML、CSS)不兼容,这篇文章主要给大家介绍了关于前端实现读取word文件并将其原样式展示的几种方案,需要的朋友可以参考下2024-08-08
这篇文章主要给大家介绍了关于用js生成a标签下载文件并携带请求头的两种方法, 这种下载文件方式在前端项目中非常常见,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-03-03
最新评论