包装对象

JS 中有三个基本数据类型是比较特殊的存在,分别是 String、number、Boolear,这个三个基本是由自己对应的包装对象。并且随时等候召唤

  • 包装对象:

    其实就是对象,有相应的属性和方法,至于这个过程怎么发生的呢?其是在后台偷偷发生的。

  • 区别:

    引用类型和基本包装对象的区别在于,生存期,引用类型所创建的对象,在执行期间一直在内存中,而基本包装对象只是存在一瞬间(也就是执行完后变量就变成 null)。

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
/*
基本包装对象
1、String
2、number
3、Boobear
*/
var str = 'dwkdwqudu2i';
var str2 = str.charAt(0);
cconsole.log(str2);

/* 在后台的执行过程 */
var str = new String('dwkdwqudu2i');
var str2 = str.charAt(0);
str = null;//把原来的str清空为null
console.log(str2);

/* 例1 */
str.name = 10;
consloe.log(str.name);//undefined
/* 例1在后台运行 */
var str = new String(10);
str.name = 10;
str = null;

/*
设置原型就可以不会销毁
但是会污染所有的String
*/
String.porototype.name = 12;
console.log(str.name);//12

仿写包装对象 底层实现函数
function mysplit(str, method, arg) {
let temp = new String(str)
return temp[method](arg)
//销毁包装对象;
}

组件是什么?

组件 :数据和方法的简单封装;
模板组件实例

事件委托

节点不存在绑定事件,委托给父级添加事件

自定义事件

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
function fn1() {
console.log('很多逻辑a')
}

function fn2() {
console.log('很多逻辑b')
}
//自定义事件
class MyEvent {
constructor() {
this.handle = {}
}
addEvent(eventName, fn) {
if (typeof this.handle[eventName] === 'undefined') {
this.handle[eventName] = []
}
this.handle[eventName].push(fn)
}
trigger(eventName) {
if (!(eventName in this.handle)) {
return
}
this.handle[eventName].forEach((v) => {
v()
})
}
removeEvent(eventName, fn) {
if (!(eventName in this.handle)) {
return
}
for (let i = 0; i < this.handle[eventName].length; i++) {
if (this.handle[eventName][i] === fn) {
this.handle[eventName].splice(i, 1)
break
}
}
}
}
let newEvent = new MyEvent()
newEvent.addEvent('myEvent', fn1)
newEvent.addEvent('myEvent', fn2)
// newEvent.removeEvent("myEvent", fn2);
newEvent.trigger('myEvent')