JS知识点总结（一）

JS知识点总结

一、DOM中中target和currentTarget的区别

target指触发事件的元素，到哪并一定是绑定该事件的元素。
currentTarget指绑定事件的元素。
同时，在事件处理函数中this始终指向事件绑定的元素，即e.currentTarget。

二、实现发布订阅模式

通过一个对象来保存预定的函数（订阅），等待时机到了就触发（发布）。

class EventEmitter {
    
    
    constructor() {
    
    
        this.events = {
    
    };
    }

    // 订阅
    // 就是给某个事件添加方法
    on(eventName, handler) {
    
    
        if (!this.events[eventName]) {
    
    
            this.events[eventName] = [handler];
        } else {
    
    
            this.events[eventName].push(handler);
        }
    }

    // 发布
    // 就是触发已订阅的方法
    emit(eventName) {
    
    
        this.events[eventName] && this.events[eventName].forEach(fn => fn());
    }

    // 移除订阅事件
    removeEmitter(eventName, callback) {
    
    
        if (this.events[eventName]) {
    
    
            this.events[eventName] = this.events[eventName].filter(fn => fn !== callback);
        }
    }

    // 只执行一次订阅的事件，然后移除
    once(eventName, handler) {
    
    
        const fn = () => {
    
    
            handler();
            this.removeEmitter(eventName, fn);
        }
        this.on(eventName, fn);
    }
}

三、作用域和作用域链

• 作用域决定了代码块中变量和资源的可见性
• 当代码在一个环境中运行时会创建一个变量对象的作用域链，保证所有变量和函数的有序访问。作用域链的最前端是当前执行代码的环境的变量对象。

四、原型链

• 什么是原型链
  原型链是实现继承的主要方法。为了实现构造函数new对象和继承，给每个对象都赋予一个__proto__属性指向构造函数的prototype属性，这样就能访问其变量和函数，达到构造对象的目的。子构造函数的prototype.__proto__指向父构造函数prototype属性，实现继承。
• 原型链终点为什么是null
  是为了保证原型链的长度是有限的，否则在查询的时候会无限制的查询下去。

五、移动端touch和click，以及300ms延迟的问题

事件触发顺序：touchstart => touchmove => touchend => touchcancel => click
由于浏览器会判断是否双击，因此会等待300ms是否有第二次点击
解决办法：使用fastclick库。

六、DOM模型

DOM模型是W3C提供的使用JS操作html元素的接口，在DOM模型中每一个html元素都是一个对象可通过JS进行操作。

七、事件委托的优缺点

事件委托是基于事件冒泡的。
优点：
父元素处理所有子元素的事件，节省了操作DOM的次数和内存空间
缺点：
不支持事件冒泡的无法完成事件委托
在冒泡过程中可能被阻止冒泡
有可能发生误判，触发多次事件

不支持冒泡的事件

UI事件

• load
• unload
• scroll
• resize

焦点事件

• focus
• blur

鼠标事件

• mouseleave
• mouseenter