一些你可能不熟悉的JS知识点总结

2023-08-25 21:18:04 71

暂时性死区

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

vartemp=123;
if(true){
console.log(temp);
lettemp;
}

结果：

>ReferenceError:tempisnotdefined

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

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

call和apply方法

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

apply接收的是参数列表。

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

vararr=[1,2,3];
varmax=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互换位置呢？

vararr=[1,2,3];
varmax=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。

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

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

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

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

分析弹出的a值为多少？

//将call方法看成一个整体
(Function.prototype.call).apply(function(a){returna;},[0,4,3]);

//func.apply(context,args)可以转化为context.func(...args)
(function(a){returna;}).call(0,4,3);

//所以结果很明显，输出4

Proxy对象

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

letp=newProxy(target,handler)

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

且看一个的小栗子：

//onChange即要进行的监听操作
varwatch=(object,onChange)=>{
consthandler={
//如果属性对应的值为对象，则返回一个新的Proxy对象
get(target,property,receiver){
try{
returnnewProxy(target[property],handler);
}catch(err){
returnReflect.get(target,property,receiver);
}
},
//定义或修改对象属性
defineProperty(target,property,descriptor){
onChange('define',property);
returnReflect.defineProperty(target,property,descriptor);
},
//删除对象属性
deleteProperty(target,property){
onChange('delete',property);
returnReflect.deleteProperty(target,property);
}
};

returnnewProxy(object,handler);
};


//测试对象
varobj={
name:'bjw',
age:22,
child:[1,2,3]
}

//对象代理
varp=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)

constarr=[2,3,4,5,6];
letmax;
//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来调用构造函数的方法
functionA(name){
console.log('FunctionAisinvoked!');
this.name=name;
}
A.prototype.getName=function(){
returnthis.name;
};

functionB(age){
console.log('FunctionBisinvoked!');
this.age=age;
}
B.prototype.getAge=function(){
returnthis.age;
};


//测试(这两种是一致的)
vartom=newA('tom');
vartom=Reflect.construct(A,['tom']);


//jnney继承了A的实例属性，同时继承了B的共享属性
//简单来说，A构造函数被调用，但是jnney.__proto__===B.prototype
varjnney=Reflect.construct(A,['jnney'],B);

Reflect.defineProperty(target,propertyKey,attributes)

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

letobj={};

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

//这里会返回false因为我们上面定义name这个属性是不可修改的,
//然后我们又在这里修改了name属性,所以修改失败返回值为false
letresult1=Reflect.defineProperty(obj,'name',{
configurable:true,
enumerable:true,
value:'happy'
});
console.log(result1);//false

Reflect.deleteProperty(target,propertyKey)

letobj={
name:'dreamapple',
age:22
};

letr1=Reflect.deleteProperty(obj,'name');
console.log(r1);//true
letr2=Reflect.deleteProperty(obj,'name');
console.log(r2);//true
letr3=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会抛出一个错误。)

varobj={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操作符，就是检查一个对象上是否含有特定的属性；我们继续来实践这个方法：

functionA(name){
this.name=name||'dreamapple';
}
A.prototype.getName=function(){
returnthis.name;
};

vara=newA();

console.log('name'ina);//true
console.log('getName'ina);//true

letr1=Reflect.has(a,'name');
letr2=Reflect.has(a,'getName');
console.log(r1,r2);//truetrue

Reflect.isExtensible(target)

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

letobj={};
letr1=Reflect.isExtensible(obj);
console.log(r1);//true
//密封这个对象
Object.seal(obj);
letr2=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){
//加载模块
vara=require('./a');
});

CommonJS

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

//a.js
module.exports={
a:1
}

//or
exports.a=1;

//在b.js中可以引入
varmodule=require('./a');
module.a//log1

难点解析：

//module基本实现
varmodule={
id:'xxx',
exports:{}
}

varexports=module.exports;
//所以，通过对exports重新赋值，不能导出变量

ESModule

ESModule是原生实现模块化方案。

//导入模块
importxxxform'./a.js';
import{xxx}from'./b.js';

//导出模块
exportfunctiona(){}

//默认导出
exportdefault{};
exportdefaultfunction(){}

ESModule和CommonJS区别

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

手写简单版本的Promise

constPENDING='pending';
constRESOLVED='resolved';
constREJECTED='rejected';

functionMyPromise(fn){
const_this=this;
_this.state=PENDING;
_this.value=null;
_this.resolvedCallbacks=[];
_this.rejectedCallbacks=[];


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

//rejected函数
functionreject(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=typeofonFulfilled==='function'?onFulfilled:v=>v;
onRejected=typeofonRejected==='function'?onRejected:r=>{
throwr;
}
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;
}



//测试
newMyPromise(function(resolve,reject){
setTimeout(()=>{
resolve('hello');
},2000);
}).then(v=>{
console.log(v);
}).then(v=>{
console.log(v+"1");
})

这篇文章就介绍到这了，需要的朋友可以参考一下。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。