一些你可能不熟悉的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 相关文章推荐
获取元素距离浏览器周边的位置的方法getBoundingClientRect
Apr 17 Javascript
javascrip关于继承的小例子
May 10 Javascript
JS中判断null、undefined与NaN的方法
Mar 26 Javascript
JavaScript验证图片类型(扩展名)的函数分享
May 05 Javascript
node.js操作mongodb学习小结
Apr 25 Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 Javascript
js cookie实现记住密码功能
Jan 17 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
Sep 14 Javascript
jquery实现倒计时小应用
Sep 19 jQuery
Vue中util的工具函数实例详解
Jul 08 Javascript
浅入深出Vue之自动化路由
Aug 06 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
使用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
mysql5写入和读出乱码解决
2006/11/25 PHP
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
PHP实现页面静态化的超简单方法
2016/09/06 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
Javascript 学习笔记 错误处理
2009/07/30 Javascript
jQuery 工具函数学习资料
2010/04/29 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
2013/09/25 Javascript
jquery实现滑动特效代码
2015/08/10 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
2016/10/31 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
Vue中的methods、watch、computed的区别
2018/11/26 Javascript
antd Upload 文件上传的示例代码
2018/12/14 Javascript
通过vue手动封装on、emit、off的代码详解
2019/05/29 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
vue中 数字相加为字串转化为数值的例子
2019/11/07 Javascript
[01:35]2018完美盛典章节片——共竞
2018/12/17 DOTA
Python性能优化的20条建议
2014/10/25 Python
python3.5使用tkinter制作记事本
2016/06/20 Python
Django后台获取前端post上传的文件方法
2018/05/28 Python
Python字典的核心底层原理讲解
2019/01/24 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
python网络编程之五子棋游戏
2020/05/14 Python
python matplotlib绘制三维图的示例
2020/09/24 Python
魅力教师事迹材料
2014/01/10 职场文书
上班离岗检讨书
2014/09/10 职场文书
镇党政领导班子民主生活会思想汇报
2014/10/11 职场文书
班主任工作实习计划
2015/01/16 职场文书
公司清洁工岗位职责
2015/04/15 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
化验室安全管理制度
2015/08/06 职场文书
升学宴祝酒词
2015/08/11 职场文书
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js
Python编写车票订购系统 Python实现快递收费系统
2022/08/14 Python