js代码暂时性死区
只要块级作用域存在let命令,它所声明的变量就“绑定”这个区域,不再受外部的影响。这么说可能有些抽象,举个例子:
1
2
3
4
5
|
var
temp = 123;
if
(
true
) {
console.log(temp);
let temp;
}
|
结果:
> ReferenceError: temp is not defined
在代码块内,使用let声明变量之前,该变量都是不可用的。在语法上,称为“暂时性死区”。(temporal dead zone)
ES6规定暂时性死区和let、const语句不出现变量提升,主要是为了减少运行时错误,防止在变量声明前就使用这个变量,从而导致意料之外的行为。
vue插件 call和apply方法
这两个方法都可以改变一个函数的上下文对象,只是接受参数的方式不一样。
call接收的是逗号分隔的参数。
apply接收的是参数列表。
相信你肯定看到过这样的代码:
1
2
3
|
var
arr = [1, 2, 3];
var
max = Function.prototype.apply.call(Math.max,
null
, arr);
console.log(max);
// 3
|
那么对这段代码怎么理解呢?
1.将Function.prototype.apply看成一个整体
1
|
(Function.prototype.apply).call(Math.max,
null
, arr)
|
2.func.call(context, args)可以转化为context.func(args)
所以代码被转换为:
1
|
Math.max.apply(undefined, arr)
|
基本上到这一步已经没必要去解释了。
那么你有没有试过将call和apply互换位置呢?
1
2
3
|
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。
如果想要正确调用,则应这样书写:
1
2
3
|
var
arr = [1, 2, 3];
var
max = Function.prototype.call.apply(Math.max, arr);
console.log(max);
// 3
|
为了巩固以上内容,且看一个面试题:
1
2
|
var
a = Function.prototype.call.apply(
function
(a){
return
a;}, [0,4,3]);
alert(a);
|
分析弹出的a值为多少?
1
2
3
4
5
6
7
|
// 将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
|
css3文字 Proxy对象
作用:用来自定义对象中的操作。
let p = new Proxy(target, handler)
target 代表需要添加代理的对象,handler 用来自定义对象中的操作,比如可以用来自定义 set 或者 get 函数。
且看一个的小栗子:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
// 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)
1
2
3
4
5
6
7
8
9
10
11
12
13
|
// 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])
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
// 这个方法,提供了一种新的不使用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值。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
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)
1
2
3
4
5
6
7
8
9
10
11
|
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
会抛出一个错误。)
1
2
3
|
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操作符,就是检查一个对象上是否含有特定的属性;我们继续来实践这个方法:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
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必须为一个对象,否则会抛出错误)
1
2
3
4
5
6
7
|
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
这两种实现方式已经很少见到,具体的使用方式如下:
1
2
3
4
5
6
7
8
9
10
11
12
|
// 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中见到它。
1
2
3
4
5
6
7
8
9
10
11
|
// a.js
module.exports = {
a: 1
}
// or
exports.a = 1;
// 在b.js中可以引入
var
module = require(
'./a'
);
module.a
// log 1
|
难点解析:
1
2
3
4
5
6
7
8
|
// module 基本实现
var
module = {
id:
'xxx'
,
exports: {}
}
var
exports = module.exports;
// 所以,通过对exports重新赋值,不能导出变量
|
ES Module
ES Module 是原生实现模块化方案。
1
2
3
4
5
6
7
8
9
10
|
// 导入模块
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
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"
);
})
|