当前位置：移动技术网 > IT编程>开发语言>JavaScript > 一些你可能不熟悉的JS知识点总结

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

2019年03月17日 | 移动技术网IT编程 | 我要评论

暂时性死区

只要块级作用域存在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");
})

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

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

js实现页面滚动返回顶部

许多网站的右下角都有一个可以使页面返回顶部的按钮例如这些网站：返回顶部我们可以用锚点链接来实现，但是锚点链接它突... [阅读全文]
JS函数传参时值传递与引用传递的区别

大家都知道在计算机内存中js的数据类型分为基础数据类型和引用数据类型基础数据类型number / string ... [阅读全文]
JavaScript开发中如何防抖(前端更好的用户体验)

在前端开发中会遇到一些频繁的事件触发，比如：resize、scroll、mousedown、mousemove、... [阅读全文]
做一个网页送给心动女孩子生日礼物(表白也合适)

如何做一个网页送给女朋友做生日礼物本文里面涉及到python，HTML ，css,JavaScript的知识，是... [阅读全文]
three.js 制作动态二维码的示例代码

今天郭先生说一下用canvas解析图片流，然后制作一个动态二维码的小案例，话不多说先上图，这是郭先生的微信二维码哦！1. 解析图片流canvas = docum... [阅读全文]
同事牛逼啊，写了个隐藏 bug，我排查了 3 天才解决问题！

最近线上监控 SFTP 连接频繁爆表，通过重启某个系统，连接数迅速下降，系统就能恢复正常，初步判断是应用程序连接... [阅读全文]
Redis实现自定义序列化方式

1. 如何实现redis的序列化？序列化：把对象转换为字节序列的过程称为对象的序列化。反序列化：把字节序列恢复为... [阅读全文]
【JavaScript笔记（一）】万丈高楼平地起 - 基本概念篇

基本数据类型：String,Boolean,Number,Undefined,Null引用数据类型：Object... [阅读全文]
方法和构造方法的区别

一、为什么要有构造方法本来已经有方法了，为什么要有构造方法呢？我们知道，方法是指参数经过一定的 ... [阅读全文]
轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑

今天在整合smm项目时：遇到两个错误，分享给各位Failed to load or instantiate Ta... [阅读全文]