事件流 事件捕获 捕获阶段，事件依次传递的顺序是：window --> document --> html--> body --> 父元素、子元素、目标元素 事件冒泡 以下事件不冒泡：blur、focus、load、unload、onmouseenter、onmouseleave，可以通过event.bubbles检查。 阻止冒泡： element.onclick = function (event) { //阻止冒泡 event = event || window.event; if (event && event.stopPropagation) { event.stopPropagation(); } else { // < IE10 event.cancelBubble = true; } }; 事件委托 事件委托，是把一个元素响应事件（click、keydown......）的函数委托到另一个元素，如在父元素的响应函数中处理子元素的事件，事件委托利用了冒泡机制，减少了事件绑定的次数，减少内存消耗，提高性能。 focus、blur 之类的事件本身没有事件冒泡机制，所以无法委托。 mousemove、mouseout 这样的事件，虽然有事件冒泡，但是只能不断通过位置去计算定位，对性能消耗高，因此也是不适合于事件委托的。 // https://zhuanlan.zhihu.com/p/26536815 function eventDelegate(parentSelector, targetSelector, events, foo) { // 触发执行的函数 function triFunction(e) { // 兼容性处理 var event = e || window.event; // 获取到目标阶段指向的元素 var target = event.target || event.srcElement; // 获取到代理事件的函数 var currentTarget = event.currentTarget; // 处理 matches 的兼容性 if (!Element.prototype.matches) { Element.prototype.matches = Element.prototype.matchesSelector || Element.prototype.mozMatchesSelector || Element.prototype.msMatchesSelector || Element.prototype.oMatchesSelector || Element.prototype.webkitMatchesSelector || function (s) { var matches = (this.document || this.ownerDocument).querySelectorAll( s ), i = matches.length; while (--i >= 0 && matches.item(i) !== this) {} return i > -1; }; } // 遍历外层并且匹配 while (target !== currentTarget) { // 判断是否匹配到我们所需要的元素上 if (target.matches(targetSelector)) { var sTarget = target; // 执行绑定的函数，注意 this foo.call(sTarget, Array.prototype.slice.call(arguments)); } target = target.parentNode; } } // 如果有多个事件的话需要全部一一绑定事件 events.split(".").forEach(function (evt) { // 多个父层元素的话也需要一一绑定 Array.prototype.slice .call(document.querySelectorAll(parentSelector)) .forEach(function ($p) { $p.addEventListener(evt, triFunction); }); }); } eventDelegate("#list",…

单例模式 前端面试指南：作用域和闭包 单例模式避免了重复实例化带来的内存开销。 // 单例模式 function Singleton() { this.data = "singleton"; } Singleton.getInstance = (function () { var instance; return function () { if (instance) { return instance; } else { instance = new Singleton(); return instance; } }; })(); var sa = Singleton.getInstance(); var sb = Singleton.getInstance(); console.log(sa === sb); // true console.log(sa.data); // 'singleton' References Learning JavaScript Design Patterns

对象创建 {}对象字面量 工厂模式 /* * 使用工厂方法创建对象 * 通过该方法可以大批量的创建对象 */ function createPerson(name, age, gender) { //创建一个新的对象 var obj = new Object(); //向对象中添加属性 obj.name = name; obj.age = age; obj.gender = gender; obj.sayName = function () { alert(this.name); }; //将新的对象返回 return obj; } var obj2 = createPerson("猪八戒", 28, "男"); var obj3 = createPerson("白骨精", 16, "女"); var obj4 = createPerson("蜘蛛精", 18, "女"); 构造函数 构造函数需要使用 new 关键字来调用才有意义 以构造函数的形式调用时，this 指向新创建的实例对象 静态成员是构造函数的属性和方法，通过构造函数访问：Person.prototype 实例成员是实例化对象的属性和方法，通过实例化对象访问 // 创建一个构造函数，专门用来创建Person对象 function Person(name, age, gender) { this.name = name; this.age = age; this.gender = gender; this.sayName = function () { alert(this.name); }; } var per = new Person("孙悟空", 18, "男"); var per2 = new Person("玉兔精", 16, "女"); var per3 = new Person("奔波霸", 38, "男"); // 创建一个构造函数，专门用来创建 Dog 对象 function Dog() {} var dog = new Dog(); 浅拷贝、深拷贝 浅拷贝的推荐实现：Object.assign 原型和原型链 __proto__ 是非标准属性，建议使用 ES6 新增的 Reflect.getPrototypeOf 和 Object.setPrototypeOf Function.__proto__等于Function.prototype 处理原型链污染 检测constructor、__proto__这些敏感键值 使用Object.create(null)创建原型为null的对象，保证对原型的修改无效 使用Object.freeze()冻结对象 [ ] 建立 JSON schema ，在解析用户输入内容时，通过 JSON schema 过滤敏感键名 规避不安全的递归性合并 原型链继承 原型链继承->组合继承->寄生组合继承。 原型链继承 通过修改子类构造函数原型为父类构造函数实例实现。 存在的问题： 在创建子类实例的时候，不能向超类型的构造函数中传递参数 这样创建的子类原型会包含父类的实例属性，造成引用类型属性同步修改的问题 组合继承 使用call在子类构造函数中调用父类构造函数解决原型链继承的问题。 存在的问题： 父类的构造函数被调用了两次（创建子类原型时调用了一次，创建子类实例时又调用了一次），导致子类原型上会存在父类实例属性，浪费内存 寄生组合继承 使用 Object.create(Parent.prototype) 创建一个新的原型对象赋予子类从而解决组合继承的缺陷。 // 寄生组合继承实现 function Parent(value) { this.value = value; } Parent.prototype.getValue =…

Base 千古前端图文教程

TODO: Article

TODO [ ] 理解浏览器工作原理 [ ] 防抖和节流

Fundamental ECMAScript中new Array(len)的操作 判断 len 是否为合法数字（小于 2^32 - 1 的正整数），如果不是则抛出错误； 创建一个 JavaScript Array 实例； 将这个实例对象的 length 属性设置为入参的值； 但该数组此时并没有包含任何实际的元素，而且不能理所当然地认为它包含 len 个值为 undefined 的元素 More empty和undefined的区别 导致数组的map、some、filter、includes、for in、for of、findIndex、sort等方法的差异 稀疏数组、密集数组的互相转换 V8 访问对象有两种模式：字典模式 和 快速模式 JavaScript 之稀疏数组与密集数组 稀疏数组与密集数组 伪数组(ArrayLike) 按索引方式储存数据 length不会动态变化 伪数组的原型链中没有 Array.prototype，因此不具有push、forEach等方法 常见的如arguments、DOM children 元素集。 // 伪数组转真数组 Array.prototype.slice.call(ArrayLike); [].slice.call(ArrayLike); Array.from(ArrayLike); sort方法 默认按 Unicode 编码排序 自定义排序规则：return 大于 0 的值——元素交换位置，return 小于 0 的值——元素位置不变，return 等于 0 的值——不交换位置 // 冒泡排序 arr.sort((a, b) => a - b); forEach会改变原数组吗，map()会吗 :question: arr.reduce(function (previousValue, currentValue, currentIndex, arr) {}, initialValue); e.g. 统计元素出现的次数、找最大值等 清空数组 array.splice(0); //方式1：删除数组中所有项目 array.length = 0; //方式2：length属性可以赋值，在其它语言中length是只读 array = []; //方式3：推荐 join的应用 相比字符串拼接 由于字符串的不变性，str 拼接过多的话，性能差，且容易导致内存溢出（很多个 str 都堆放在栈里）