forked from hans000/javascript-note
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathbind.html
More file actions
101 lines (91 loc) · 2.28 KB
/
Copy pathbind.html
File metadata and controls
101 lines (91 loc) · 2.28 KB
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
<script>
let name = 'g_name'
// let a = { age: 18, }
// function B(name, age) {
// this.msg = function(n1, n2) {
// console.log(this.name, this.age, n1, n2);
// }
// }
// B.prototype = a
class A {
constructor(age=18) {
this.age = age
}
}
class B extends A {
constructor(name, ...args) {
super(...args)
this.name = name
}
msg(n1, n2) {
console.log(this, this.name, this.age, n1, n2);
}
}
let b = new B('b_name')
let c = {
name: 'c_name',
fn: 'hello',
}
// 原生js实现bind方法
Function.prototype.bindX = function() {
let self = this
let [thisArg, ...args] = arguments
return function() {
self.apply(thisArg, [...args, ...arguments])
}
}
// bind test
b.msg(7, 8)
b.msg.bind(c, 7, 8)(9)
b.msg.bindX(c, 7, 8)(9)
// 扩展
// 箭头函数不绑定Arguments 对象
// 箭头函数只能用于非方法函数
// 箭头函数不能作为构造函数
// 箭头函数没有property属性
// 比较权威https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
//
// 实现call
Function.prototype.callX = function () {
let [thisArg, ...args] = arguments
let fn = Symbol()
thisArg[fn] = this
let result = thisArg[fn](...args)
delete thisArg[fn]
return result
}
// call test
// b.call(c, 7, 8, 9)
// b.call(null, 7, 8, 9)
// b.callX(c, 7, 8, 9)
// b.callX(1, 7, 8, 9)
// apply
Function.prototype.applyX = function () {
let [thisArg, args] = arguments
let fn = Symbol()
thisArg[fn] = this
let result = thisArg[fn](...args)
delete thisArg[fn]
return result
}
// apply test
// b.apply(c, [7, 8, 9])
// b.applyX(c, [7, 8, 9])
// 保存当前对象this
// 保存绑定对象thisArg
// 保存剩余参数
// 根据具体功能处理
// - bind 返回的是函数
// - call 返回的是函数执行的结果，剩余参数是展开形式
// - apply 返回的是函数执行的结果，剩余参数是数组形式
</script>
</html>