2023-5-22(第十四天)

128 阅读2分钟

取消事件绑定

绑定事件的三种方式

方式一:在HTML绑定

<elem on事件名=函数名()></elem>

方式二:事件处理函数

elem.on事件名=function(){}
​
//取消事件绑定
elem.on事件名=null;

方式三:事件API

elem.addEventListener("事件名",function(){})
​
//取消事件绑定
function goTo(){
     open("https://www.baidu.com");
     btn.removeEventListener("click",goTo)
}
btn.addEventListener("click",goTo);

this的指向

  • 单个元素绑定事件:this--->该元素
  • 多个元素绑定事件:this--->当前触发事件的元素
  • 箭头函数:this--->外部对象(外部非箭头函数)
  • 函数:this--->当前正在调用这个函数的人
  • 定时器:this--->window

ES5强制改变this的指向

临时替换函数中的的this(call/apply)

this---->借用该函数的对象

call
函数名.call(借用的对象,实参,...)
//实参需要依次单个传入
apply
函数名.apply(借用的对象,arr)
//第二个参数只能传入数组,apply会悄悄将数组打散

永久替换函数中的this(bind)

let 新函数名=函数名.bind(永久对象,永久实参,...)
特点:
  1. 创建了一个和原函数功能完全相同的新函数
  2. 将新函数的this永久绑定为了指定对象
  3. 可以将新函数的部分参数永久固定
  4. bind绑定的新函数没办法再被call/apply借走

三个固定使用场景

  1. 数组求最大(小)值
    Math.max/min.apply(Math,arr)
    ​
    //新方法
    Math.max/min(...arr)      //...展开数组和对象
    
  2. 判断数组
    Object.prototype.toString.call/apply(xxx)=="[object Array]"//新方法
    Array.isArray(xxx)
    
  3. 类数组对象转为索引数组
    let arr=Array.prototype.slice.call/apply(类数组对象);
    
    //新方法
    let arr=Array.from(类数组对象)
    

ES6新增

let

const关键字

箭头函数

模版字符串``

可以直接识别变量,不再需要+运算去拼接,实现了一个简单的JS环境,支持在里面做运算写API

`${变量/API}中文`

解构赋值

如果赋值符号=左右两边的结构一样,就会悄悄解开结构再一一进行赋值

类似数组的解构赋值
let [a,b,c]=[1,2,3]
//赋值一一对应
类似对象的解构赋值
let {a,b=0,c}={b:4,a:6,c:7}
函数传参时的解构赋值
function zwjs({name,age=18,hobby}){
	操作
}
zwjs({name:"刘思棋",hobby:"玩"})
函数返回的结果可以有多个
function f1(){
	return [a,b,c];
}

for of循环

for(let val of 数组名){}
//val---->值

缺点:

  1. 没有提供下标,意味不能修改原数组
  2. 只能遍历索引数组,不能遍历hash数组,意味着也不能遍历对象

Set

类似于数组的一种数据格式

作用:去重数组

[...new Set(arr)]
Map

类似于对象的一种数据格式

let m=new Map();
//添加属性
m.set("键","值")

//获取属性
m.get("键")

//删除属性
m.delete("键")

//清空
m.clear()

//遍历
m.forEach(function(){})