Core09 事件的取消绑定、this指向、ES6

94 阅读3分钟

事件的取消绑定:

1、如果你使用elem.on事件名=()=>{},那么写成:elem.on事件名=null; 可以取消事件绑定了
2、如果你使用elem.addEventListener("事件名",callback); 那么写成
	elem.removeEventListener("事件名",callback);  - 事件名和回调函数,【必须和添加时是一模一样的】

this的指向

1、单个元素绑定事件this->这个元素
2、多个元素绑定事件this->当前元素
3、箭头函数中this->外部对象
4、函数中的this->当前正在调用函数的这个人!
5、定时器的this->window

ES5强制改变this的指向

call/apply:临时的替换了函数之中的this - 借用
    语法:
	1、函数名.call(借用的对象,实参,...) - 单独传入每个实参
	2、函数名.apply(借用的对象,arr) - 只能传入一个事件要求必须是一个数组,apply其实会悄悄的将数组打散
    强调:call/apply:相当于立刻调用函数,立刻执行的
bind:永久替换了函数中的this - 买
	3件事:
	1、创建了一个和原函数功能完全相同的新函数
	2、将新函数的this永久绑定为了指定对象,别人都借不走
	3、将新函数的部分参数永久固定
	语法:var 新函数名=函数名.bind(永久对象,永久实参,...) - 不是立刻执行,需要自己调用
	强调:bind绑定的新函数没办法被call/apply再次借走!

	以后哪怕不是自己的方法,也可以使用,个人推荐:借,白嫖!
            三个固定套路:
                1Math.max/min.apply(Math,arr)	===>	Math.max/min(...arr)
		2Object.prototype.toString.call/apply(arr)=="[object Array]"//toString不需要传入实参,
鄙视题:判断xx是不是一个数组,千万不要用typeof,他只能判断原始类型,不能判断引用类型
		3、类数组转为普通数组:
			1、老方式:接住=Array.prototype.slice.call/apply(类数组对象);
			2、新方法:接住=Array.from(类数组对象)

ES6

 1.letconst关键字、箭头函数
 2.模板字符串:可以直接识别变量,不再需要+运算去拼接了,而且实现了一个简单的js环境,支持API
            `我的名字叫$(name)`;
 3.解构赋值:
    顾名思义:解析结构再进行赋值 - 赋值的新方式,并且得到了增强!
    如果赋值符号,左右两边的结构一样,就会悄悄得解开/脱掉结构再一一进行赋值
        语法:
            1、类似数组的解构赋值
    		let [a,b,c]=[1,2,3];
    		console.log(a);
    		console.log(b);
    		console.log(c);
            2、类似对象的解构赋值
    		let {a,b=默认值,c}={c:3,a:1,b:2}
    		console.log(a);
    		console.log(b);
    		console.log(c);
    		//形参可以设置默认值,如果自己传入了,就用自己的
            3、调用函数时,传递实参的顺序其实无所谓了
    		function zwjs({name="无名氏",age,hobby}){
                    return `我的名字叫${name},今年${age}岁,喜欢${hobby}`;
    		}
    		console.log(
                    zwjs({
    			age:18,
    			hobby:"学习"
                    })
    		)
            4、函数的返回的结果,可以有多个!
    		function f1(){
                    var a=1;
                    var b=2;
                    return [a,b];
    				}
                    var [a,b]=f1();
                    console.log(a);
                    console.log(b);
               //只要以后见到:方法名({里面放着很多很多的键值对,那么他的底层就是使用ES6的解构赋值,键值对的写入的顺序其实是随意的})

4、新的循环:
    	for(var val of 数组名){
            //val - 值
    	}
    缺陷:
    	1、没有提供过下标,意味着不能修改原数组
    	2、只能遍历索引数组,不能遍历hash数组,意味着也不能遍历对象

 5SetMap:两个新的数据类型:
    	1Set:有一点点用:类似于数组的一种数据格式 - 【去重数组,然后再转回数组】
    			[...new Set(arr)]
    			... - 三个点扩展运算符,可以脱掉数组/对象的外套!
    			不需要记忆他的任何的API,完全比不上数组的API

    	2Map:类似于对象的一种数据格式
    			var m=new Map();
    			添加:m.set("键","值");
    			获取:m.get("键");
    			删除:m.delete("键");
    			清空:m.clear();
    			遍历:m.forEach(callback);