代码执行顺序 1. 代码1 for(var i=0; i<5; i++){ setTimeout(function(){ console.log(i); }, 1000); } console.log(i) 输出结果：在一秒后输出 5 个5 原因：每次 for 循环的时候 setTimeout 都会执行，但是里面的 function 则不会执行，被放入任务队列。因此放了 5 次；for 循环的 5 次执行完之后不到1000 毫秒；1000 毫秒后全部执行任务队列中的函数，所以就是输出5 个 5。 2. 代码2 setTimeout(function() { console.log(1) ...

JS怎么控制一次加载一张图片，加载完后再加载下一张 （1）方法1 <script type="text/javascript"> let obj = new Image(); obj.src = "http://218.106.254.125:9999/OTA/110131B1240920210712-2bb310dc6f8854bacab22fbfda8cc1172.jpg"; obj.onload = function() { alert('图片的宽度为：' + obj.width + '; 图片的高度为：' + obj.height);...

实现用方法访问私有变量的函数 1. 通过defineProperty实现 obj = { name: 'kobe', getName: function(){ return this.name; } } Object.defineProperty(obj, 'name', { // 不可枚举不可配置 }) 2. 通过函数的创建形式 function product(){ var name = 'Kobe'; this.getName = function(){ return name; } } var obj = new product();

js 监听对象属性的改变 我们假设这里有一个user对象 （1）在ES5中可以通过Object.defineProperty来实现已有属性的监听 Object.defineProperty(user, 'name', { set: function(key, value){ } }) 缺点：如果id不在user对象中，则不能监听id的变化。 （2）在ES6中可以通过Proxy来实现 var user = new Proxy({}, { set: function(target, key, value, receiver){ } }) 这样即使有属性在user中不存在，通过user.id来定义也...

将原生的ajax封装成promise var myNewAjax = function(url){ return new Promise(function(resolve, reject){ var xhr = new XMLHttpRequest(); xhr.open('get', url); xhr.send(data); xhr.onreadystatechange = function(){ if(xhr.status === 200 && xhr.readyState === 4){ resolve(json); } else if(xhr.readyState =...

实现一个函数参数只执行一次 function once(func){ var tag = true; return function(){ if(tag === true){ func.apply(null, arguments); tag = false; } return undefined; } }

深克隆和浅克隆 1. 浅克隆 1.1 数组的浅克隆 如果是数组，可以利用数组的一些方法，比如 slice，concat 方法返回一个新数组的特性来实现拷贝，但假如数组嵌套了对象或者数组的话，使用 concat 方法克隆并不完整。如果数组元素是基本类型，就会拷贝一份，互不影响，而如果是对象或数组，就会只拷贝对象和数组的引用，这样无论在新旧数组进行了修改，两者都会发生变化，把这种复制引用的拷贝方法称为浅拷贝。 1.2 浅克隆的实现 const arr = [ 'old', 1, true, ['old1', 'old2'], {old: 1} ]; function shallowCopy(obj...

js 中的eval函数 1. 定义 eval 是一个函数，有且只有一个参数 string，为字符串类型。 eval(string) 2. 特点 若 string 为 js 代码时，会直接解析执行；若是普通字符串，则返回原字符串。 3. 实例 参数 string 为 js 代码  eval("let a = 1; let b = 4; alert(a+b);") // 执行结果：alert一个5 应该避免使用，因为非常消耗性能（一次解析成js，一次执行）。

js 的垃圾回收机制 1. 必要性 由于字符串、对象和数组没有固定大小，所有当他们的大小已知时，才能对他们进行动态的存储分配。JavaScript 程序每次创建字符串、数组或对象时，解释器都必须分配内存来存储那个实体。只要像这样动态地分配了内存，最终都要释放这些内存以便他们能够被再用，否则，JavaScript 的解释器将会消耗完系统中所有可用的内存，造成系统崩溃。 这段话解释了为什么需要系统需要垃圾回收，JS 不像 C/C++，他有自己的一套垃圾回收机制（Garbage Collection）。JavaScript 的解释器可以检测到何时程序不再使用一个对象了，当他确定了一个对象是无用的时候...

mouseover和mouseenter 1. mouseover 当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡的过程。对应的移除事件是mouseout。 2. mouseenter 当鼠标移入元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡。对应的移除事件是mouseleave。

图片的懒加载和预加载 1. 预加载 提前加载图片，当用户需要查看时可直接从本地缓存中渲染。 2. 懒加载 懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。 3. 两种技术的本质 两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

事件委托 1. 事件委托简介 事件委托指的是，不在事件的发生地（直接 DOM）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素 DOM 的类型，来做出不同的响应。 事件委托是利用冒泡阶段的运行机制来实现的，就是把一个元素响应事件的函数委托到另一个元素，一般是把一组元素的事件委托到他的父元素上，委托的优点是减少内存消耗，节约效率。 2. 冒泡原理 事件冒泡，就是元素自身的事件被触发后，如果父元素有相同的事件，如 onclick 事件，那么元素本身的触发状态就会传递，也就是冒到父元素，父元素的相同事件也会一级一级根据嵌套关系向外触...

事件冒泡和事件捕获 1. 事件冒泡 1.1 简介 即事件由子元素向父元素传播，就像气泡从水底向水面上浮一样。 <div id='div' onclick='alert("div");'> <ul onclick='alert("ul");'> <li onclick='alert("li");'>test</li> </ul> </div> 上面的代码，我们单击 test 时，会依次触发 alert(“li”), alert(“ul”), alert(“div”)...

前端中的事件流 JavaScript 与 Html 之间的交互是通过事件实现的，而用户于浏览器页面的互动也是通过事件来实现的。 事件流 当页面中放了一个按钮，你用鼠标点击这个按钮，虽然你只是点击了这个按钮，但其实你也同时点击了这个按钮的所有父级元素。 事件流描述的是从页面中接收事件的顺序。 DOM事件流 DOM2级事件规定事件流包含三个阶段： 事件捕获阶段 处于目标阶段 事件冒泡阶段 事件冒泡 即事件从下级传递给上级。如果同时给儿子和父亲定义了事件，那么点击儿子，触发儿子的事件之后，也会再触发父亲的事件。浏览器是默认事件冒泡行为的。 但是在开发的过程中，我们大多数情况下是不需要事件冒泡的。我们...