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


Posted in Javascript onMarch 15, 2019

 暂时性死区

只要块级作用域存在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是可选的,如果propertyKeygetter函数里面有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.setPrototypeOfObject.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 相关文章推荐
JS IE和FF兼容性问题汇总
Feb 09 Javascript
JS 的应用开发初探(mootools)
Dec 19 Javascript
WEB高性能开发之疯狂的HTML压缩
Jun 19 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
Mar 05 Javascript
关于JS控制代码暂停的实现方法分享
Oct 11 Javascript
不同的jQuery API来处理不同的浏览器事件
Dec 09 Javascript
限制textbox或textarea输入字符长度的JS代码
Oct 16 Javascript
12行javascript代码绘制一个八卦图
Apr 02 Javascript
Bootstrop实现多级下拉菜单功能
Nov 24 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
vue-router的两种模式的区别
May 30 Javascript
刷新页面后让控制台的js代码继续执行
Sep 20 Javascript
使用element-ui table expand展开行实现手风琴效果
Mar 15 #Javascript
element-ui组件table实现自定义筛选功能的示例代码
Mar 15 #Javascript
vue过滤器用法实例分析
Mar 15 #Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
Mar 15 #Javascript
详解vue移动端项目代码拆分记录
Mar 15 #Javascript
小程序自定义单页面、全局导航栏的实现代码
Mar 15 #Javascript
使用webpack搭建vue项目实现脚手架功能
Mar 15 #Javascript
You might like
php中比较简单的导入phpmyadmin生成的sql文件的方法
2011/06/28 PHP
PHP 中检查或过滤IP地址的实现代码
2011/11/27 PHP
php制作动态随机验证码
2015/02/12 PHP
PHP数学运算函数大汇总(经典值得收藏)
2016/04/01 PHP
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
PHP扩展mcrypt实现的AES加密功能示例
2019/01/29 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
JS自动缩小超出大小的图片
2012/10/12 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
2014/04/12 Javascript
简介JavaScript中的getSeconds()方法的使用
2015/06/10 Javascript
jQuery实现鼠标点击弹出渐变层的方法
2015/07/09 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
2016/06/21 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
详解Angular中通过$location获取地址栏的参数
2018/08/02 Javascript
vue+element实现打印页面功能
2019/05/20 Javascript
JavaScript常用内置对象用法分析
2019/07/09 Javascript
微信小程序实现转盘抽奖
2020/09/21 Javascript
[02:57]DOTA2英雄基础教程 风行者
2014/01/16 DOTA
举例讲解Python编程中对线程锁的使用
2016/07/12 Python
利用django-suit模板添加自定义的菜单、页面及设置访问权限
2018/07/13 Python
python实现三次样条插值
2018/12/17 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
Python使用enumerate获取迭代元素下标
2020/02/03 Python
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
python GUI库图形界面开发之PyQt5开发环境配置与基础使用
2020/02/25 Python
python右对齐的实例方法
2020/07/05 Python
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
环境科学专业个人求职信
2013/09/26 职场文书
yy婚礼主持词
2014/03/14 职场文书
火灾现场处置方案
2014/05/28 职场文书
青年志愿者服务活动总结
2015/05/06 职场文书
2015入党个人自传范文
2015/06/26 职场文书
2016年寒假家长评语
2015/10/10 职场文书
2019年个人工作总结范文
2019/03/25 职场文书
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers