JavaScript二三事

时间:2021-2-20 作者:admin

事件绑定

  • 嵌入dom中
<button onclick="btn()"><button>
  • 直接绑定
document.querySeleor('button').onclick=function(){}
  • 事件监听
document.querySeleor('button').addEventListener('click',function(){})

事件委托

事件委托是利用自己事件冒泡,通过父元素对子元素进行事件委托,好处:节约内存.例:

事件模型

dom零级事件

<button onclick='btn()'>点击</button>
btn.onclick=function(){}
btn.onclick=null

dom 二级事件

  • dom2事件可以冒泡和捕获
  • 是通过属性名.addEventListener(‘方法名’,回调函数)
  • 属性名.removeEventListener(‘要移除的函数方法名’,回调函数名)
btn.addEventListener('click',function test(){})
btn.removeEventListener('click',test)

dom 三级事件

dom3 具有更多事件类型

  • ui事件,当用户与页面元素交互时触发,例:load,scrol
//当页面滚动的时触发
document.addEventListener('scroll',function(){
    console.log('1')
})
  • 焦点事件,当用户获取或失去焦点时触发,如focus,blur
<input type='text' placeholder='请输入姓名'>
<script>
//获取焦点时,打印1
document.querySelecor('input').addEventListener('focus',function(){
    console.log(1)
})
//失去焦点时,打印2
document.querySelecor('input').addEventListener('blur',function(){
    console.log(1)
})
</script>
  • 鼠标事件:当用户通过鼠标在页面操作时,如:click(鼠标单击) dblclick(鼠标双击) mouseover(鼠标移入) mouseout(鼠标移出) mousedown(鼠标按下) mouseup(鼠标弹起) mousemove(鼠标移动)
  • 文本事件,当用户在文档中输入文本时触发,如textInput
  • 键盘事件,当用户按下键盘时触发,如:keydown(键盘按下任一键时触发) keyup(键盘弹起时触发) keypress(键盘按下非特殊键时触发) keyCode获取键盘按下的
document.querySelector('input').addEventListener('keydown',function(e){
    //当按下回车键时打印1
    if(e.keyCode==13){
        console.log(1)
    }
})
  • 改变事件,当每个东西发生改变时触发,change

如何自定义事件

let event=new Event('blick')
window.addEventListener('blick',function(e){
    console.log(122)
    //e.target 返回触发时的元素
    //e.currentTarget  返回绑定事件的元素
})
window.dispatchEvent(event)

prototype和__proto__的关系

prototype 是访问函数的原型对象

__proto__是用于访问函数实例化的对象的原型对象

函数拥有prototype属性,对象拥有__proto__属性,他们都是用来访问原型对象的
原型对象中有constructor属性,可以访问到这个函数

使用var let const 创建变量的区别

var

var会使变量提升,就可以在变量声明前面使用变量,不会报错,打印undefined,使用var声明的变量会将变量提升到作用域的顶端

var声明的全局变量,会作用于window对象上

var num=10
var num1=20
console.log(window.num,window.num1) //10  20

let

let声明的变量不会变量提升,let声明的变量值可以改变,作用域块级作用域中不会作用于window里

const

const声明的变量和let声明的变量大部分相同,但const一但声明并赋值,之后是不可以改变的

对象浅拷贝和深拷贝的区别

  • 简单的数据类型的拷贝是拷贝的变量
  • 引用数据类型拷贝的是变量的地址
  • 对于对象,浅拷贝是指对于数据的地址进行拷贝,没有重新创建一个对象
  • 深拷贝,创建了一个新的对象,并复制其成员变量

实现对对象的深拷贝

function deepCopy(origin,map=new WeakMap()){
    if(!origin||isObject(origin)) return origin
    if(typeof origin=='function'){
        return eval('('+origin.toString()+')')
    }
    let objType=getObject(origin)
    let result=createObj(origin,objType)
    //防止循环引用,不会遍历已经在map中的对象,因为上一层正在遍历
    if(map.get(origin)){
        return map.get(origin)
    }

    map.set(origin,result)

    //set
    if(objType==setTag){
        for(let value of origin){
            result.add(deepCopy(value,map))
        }
        return result
    }

    //map
    if(objType==mapTag){
        for(let [key,value] of origin){
            result.set(key,deepCopy(value,map))
        }
        return result
    }
    //对象或数组
    if(objType==objectTag||objType==arrayTag){
        for(let key in origin){
            result[key]=deepCopy(origin[key],map)
        }
        return result
    }
    return result
}
function getObjType(obj){
    return Object.prototype.toString.call(obj)
}
function createObj(obj,type){
    if(type==objectTag) return {}
    if(type==arrayTag) return []
    if(type==symbolTag) return Object(Symbol.prototype.valueOf.call(obj))
    return new obj.constructor(obj)
}
function isObject(origin){
    return typeof  origin=='object'||typeof origin=='function'
}

多个页面之间的通讯

  • cookie
  • web worker
  • sessionStorage和locateStorage

javascript 中的this的指向

  • 在使用new关键字,this的指向是new出来的实例化对象
  • 如果使用call、apply、bind方法调用、创建一个函数时,函数中的this指向这些方法传入的对象
  • 函数作为对象被调用时候,this指向这个对象,例obj.math(),函数内this指向obj对象
  • 如果调用函数不是作为上序方法,this指向window顶级对象
  • 在es5中的箭头函数,this不适用上序规则,this设置被他创建的上下文
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。