qq_42345237的博客

我们使用类的方式来实现一个 Promise概念及作用在《JavaScript 高级程序设计第四版》中是这样描述 Promise的：期约（也就是 Promise）是对尚不存在结果的一个替身。在ES6 中增加引用数据类型 Promise，通过 new关键字来实例化。它需要传入一个执行器（executor）函数作为参数（必传，否则会出错）。所以这里我们先定义一个 Promise类：class Promise { constructor(executor) { if (isUndef(ex.

前面面试八股文系列

什么是继承对于继承这个概念来说大家都不陌生，在现实中有儿子继承父业，孙子继承了爷爷的财产等等。那么在编程中，我们熟知的继承其实主要来自于面向对象编程。而很多的面向对象语言都支持两种继承：接口继承和实现继承。前者是只继承方法签名，后者继承实际的方法。继承的主要作用是将一些抽象的模块抽离出来，作为一个父类使用，这样便于实际编程中代码的可复用性和可维护性，也从一定程度上减少代码冗余，使得代码更加的简洁整齐。在 JavaScript 中接口继承是不可能实现的，因为函数没有签名。所以实现继承成了 JavaScr

首先我们知道 var\let\const 都是声明变量用的，但是它们三个除了这个共同点之外，其他部分都各不相同，下面我们来看下。varvar 关键词，是用来声明一个变量的，并可选地将其初始化为一个值。var num = 1;var str = 'hello world';var fn = () => {};// 也可以声明多个变量，中间用逗号隔开var a = 1, b = 2, c = 3;特点：它的作用域是它当前的执行上下文，本身是根据声明位置决定是全局变量还是局部变量。

数组的去重方法，其实无论实在实际项目还是在面试中都会有用到的，下面我们来列举一下常见的几个：使用 for 循环和 includes使用 Set 和 Array.from()使用 for 循环和 indexOffor 循环嵌套 for 循环，结合 splice使用 sort 和 reduce 方法使用 filter 和 indexOf使用 forEach 循环和 Map使用 reduce 和 includes使用扩展运算符和 set如果是数组对象的数据格式，可以使用 forEach 和

我们在看一些讲解 JavaScript 基础和进阶博客中，或者视频中，会经常听到一个名词——词法环境。那究竟什么是词法环境？它的作用是什么？今天我们就来唠叨唠叨。首先来看看词法环境的概念。A Lexical Environment is a specification type used to define the association of Identifiers to specific variables and functions based upon the lexical nesting

这也是一道很基础的题目，主要考察这个 API 的用法、缺陷及如何实现，下面我们就来一起看下。基本用法缺陷如何实现一个 typeof延伸：与 instanceof 做比较基本用法作用：获得操作值的数据类型，返回一个字符串。语法：在 typeof 后面跟一个需要计算的数据即可，typeof <operand> 或者 typeof(operand) 。typeof 1; // "number"typeof '1'; // "string"typeof t

闭包的概念闭包解决了什么问题？闭包带来的副作用是什么？闭包的应用场景都有哪些？概念MDN 上给出的闭包的定义是：一个函数和其周围状态的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包。也就是说，闭包可以让你在一个内层函数中访问到外层函数的作用域。在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。来看个例子：function parent() { var name = 'closure'; // name 是在 parent 函数.

我们在之前的一篇文章里讲述了浅拷贝的概念，今天咱们来说下深拷贝。概念首先我们要知道深拷贝不仅是将源对象的各个属性逐个复制过去，还深层递归各属性所包含的对象。深拷贝是开辟新的栈，目标对象和源对象的地址是不同的，两者互不影响。–和原数据是否指向同一对象第一层数据为基本数据类型原数据包含子对象赋值是改变会使原数据一同改变改变会使原数据一同改变浅拷贝否改变不会使原数据一同改变改变会使原数据一同改变深拷贝否改变不会使原数据一同改变改变不会使原数据一同改变

原型和原型链这在面试中都是老生常谈的话题了，那么今天我们再来唠叨唠叨。解决什么问题？在介绍它们之前，我们先要搞清楚，原型和原型链解决了什么问题？我们知道早期的 JavaScript 是没有类这个概念的，我们要生成一个对象，通常是定义一个构造函数，然后 new 这个构造函数去生成对象的。而这个构造函数就成为了一个实例对象的原型对象。function Cat(name, weight) { this.name = name; this.weight = weight}// new 一个新对象

析题首先，手写数组的 push 方法，那我们第一步想到的应该是数组本身的 push 方法，有什么作用？push方法将一个或者多个元素添加到数组的末尾，并返回该数组的新长度。const animals = ['pigs', 'goats', 'sheep'];const count = animals.push('cows');console.log(count);// expected output: 4console.log(animals);// expected output: Ar

图片转自js 深拷贝 vs 浅拷贝我们平常说的深拷贝和浅拷贝都是基于对诸如 Object 和 Array 等引用数据类型的拷贝。对于基本数据而言，拷贝为某个值的赋值。在说拷贝之前，我们先复习一下什么是基本数据类型和引用类型。基本数据类型JavaScript 中基本数据类型有五类——String、Number、Boolean、null、undefined，它们的值存放在了内存中的栈中，也就是我们说的栈内存。它们是存放在栈内存中的简单数据段，数据大小确定，内存空间大小可以分配，可以直接访问。基本数据

来看看今天的链式问题：作用是啥？原理是啥？怎么实现？源码实现instanceof 解决什么问题我们在使用 instanceof 的时候，需要知道，它是用来判断某实例是否是特定的类型。什么意思呢？首先，我们在使用 typeof 的时候，只能判断基础数据类型，当判断引用数据类型的时候呢，无论什么类型的变量，都会返回 Object。所以这里引入了 instanceof 来判断引用数据类型。instanceof 运算符可以用于检测构造函数的 prototype 属性是否出现在某个实例对象的原

在 IOS 手机中 input 框中粘贴复制触发不了 Keyup 事件：解决方法：1.改为 change 事件2. 改为 input 事件

我们来写一个 each 方法，然后挂载到 Array 的 prototype 上要实现的功能：必传参数 callback，如果有异常则抛出异常如果只有一个callback，则里面的 this 指向 window如果有第二个参数 obj, 则把 this 执行第二个参数 obj生成一个新的数组，用来返回处理过后的数据function each (callback, obj) { ...

懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。用户滚动到它们之前，可视区域外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。适用场景：商城网站或者图片很多的其他展示性网站中。那使用懒加载的优点有哪些呢？能提升用户的体验。减少无效资源的加载，减小服务器和浏览器的负担。防止并发加载的资源...

需求：要求做一张表格，表头第一栏有斜线分割，且分割线也要跟随表格自适应思路：因为之前用了CSS去写，但是发现，只能实现固定的长和宽，如果页面伸缩，斜线就会破版，跟th或者td衔接不上。因此转而将目标锁定在了 canvas 上面，想通过 canvas 来实现自适应的效果。首先，给第一栏的第一个td 或者th 设置position: relative; 然后在里面嵌套一个 canvas 并设置其...

函数节流高频触发事件，在 n 秒内只会执行一次，所以节流会稀释函数执行的频率。举个例子，古时候人们治水，一般都是直接用堵起来的水坝，把水堵住。但是后来发现，堵不如疏，你不能让水越聚越多，而是要选择减缓水流的速度。那么在 JS 中其实就在减少高频事件执行的频率，降低性能消耗。实现思路首先我们定义一个标记，当标记为 true 的时候执行函数，然后呢，我们在闭包里去判断如果这个标记为 fal...

介绍旧接口模式与使用者不兼容中间加一个适配器转换接口类似于笔记本电脑与显示器之间的转换线来看个例子：class Adaptee { specificRequest () { return "显示器接口" }}class Target { constructor () { this.adaptee = new Adaptee() } request () { ...

介绍系统中被唯一使用一个类只有一个实例示例登录框购物车在JS中如何使用单例模式：class SingleObject { login() { console.log('login...') }}// 使用闭包SingleObject.getInstance = (function(){ let instance; return function () {...

介绍将 new 操作单独封装遇到 new 操作时，就要考虑是否使用工厂模式来看代码：class Product { constructor (name) { this.name = name } init() { console.log("这是初始化...") } getName() { console.log(this.name) }}// 工厂fun...

1. 宏任务与微任务依据我们多年编写 ajax 的经验：js 应该是按照语句先后顺序执行，在出现异步时，则发起异步请求后，接着往下执行，待异步结果返回后再接着执行。但他内部是怎样管理这些执行任务的呢？在 js 中，任务分为宏任务(macrotask)和微任务(microtask)，这两个任务分别维护一个队列，均采用先进先出的策略进行执行！同步执行的任务都在宏任务上执行。宏任务主要有：scri...

我们可以直接使用原生JavaScript提供的API来做class类的增加和删除，效率更高。Element.classList它是一个只读属性，返回一个元素的类属性的实时DOMTokenList集合。如果类属性未设置或为空，那么它的length为0。虽然element.classList本身是只读的，但是你可以使用add()和remove()方法来修改它。add( String[, Str...

在h5页面中a链接是经常用到的标签，但是在移动端，我们在页面滚动的时候，a链接就会给我们造成很大的困扰。比如我们本来只是想要页面进行滚动，结果当我们刚触碰到页面上时，页面就跳转了。。。那么这里就是在移动端的touch事件所影响的，可以在touch事件的时候阻止a链接的点击事件，然后在释放。<li ontouchstart="cancleDefault(this)" ontouchend=...

首先我们需要判断模态框是否已经被调用，这里使用bootstrap里提供的方法：// 监听点击事件，来触发页面是否滚动// 定义两个函数，来禁止滚动和释放页面滚动$('.modal').on('show.bs.modal', function(e) { stopScroll();})$('.modal').on('hidden.bs.modal', function(e) { ...

offsettop及相关属性介绍最近的项目中有用到offsetTop属性配合iscroll插件来进行下拉加载的一个效果，经过测试，在其他浏览器都是OK的，但是在iPhone的safari上页面刚加载完以后，滚动部分会有被遮挡一部分，后来发现是因为获取到的offsetTop值在刚开始进来的时候，并不是0，而是120px，这个刚好是节点元素到页面顶部的距离，所以猜测这里应该是offsetparent...

在setting配置项里增加一个view属性，如下：setting = { view: { addDiyDom: addDiyDom }}然后再用函数去定义它的内容及样式：function addDiyDom(treeId, treeNode) { // 判断是最后一层子节点 if (treeNode.isParent == false) { ...

咱们在写页面的时候如果不用框架或者webpack之类的自动化工具，每次修改一个样式或者一个js，就得自己手动刷新一下页面，这对于追求高效率的我们来说是很浪费时间的，那么今天给大家来介绍一个工具—— browser-sync。Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、...

splice（）方法采坑splice()方法用于插入、删除或者替换数组里的元素，在做项目时，我们会经常用到这种方法。这种方法会改变原数组！来看看语法：arrayObject.splice(index,howmany,item1,.....,itemX)它的主要参数有index，howmany，item1，…，itemX；index——必须。规定从何处添加/删除元素，表示下标。howm...

像onclick、onblur这种直接写在标签中的事件，该如何使用this？我们一般使用this，会首先获取到相对应的dom对象，比如document.getElementById(),或者用jquery的方法$()来获取，然后进行相应的操作。如果说咱们没有获取相应的dom对象，那么this就代表的是全局对象window。那如果说是函数作为对象的方法调用，就会是另一个样子，咱们来看个例子：...

首先推荐一个自动生成gif图标的一个网址：preloaders.net 在里面挑选好加载的效果图以后，点击下载： 下载完成以后把gif图片保存到你项目的img文件夹中，方便使用。 **loading方法1.很low的方法——直接使用定时器&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &l...

在实际过程中，尝尝会遇到一大堆外部的js和css文件，有经验的人会将其分类，分门别类的引入各页面中，但是相对于初学者或者没有良好的代码规范的人会时常将其弄的乱七八糟，比如这样： 看，是不是很乱，干脆不知道哪个是哪个，有一种不管谁是谁，直接放上去，起作用就行的感觉（事实也是如此），那么在不知道具体情况的时候，我们如何让页面代码看起来更加简洁美观呢？ 很简单，首先我们可以新建一个commo...

iframe父子页面之间传值需要在服务器下进行（因为一些浏览器不支持file://协议的页面跨框架获取）。 那么如何把本地文件变成http请求获取呢？ 1.首先全局安装：serve: npm install -g serve 2.找到你想用http请求的文件目录 3.在目录下打开cmd 4.启动命令：serve -p 8080 5.直接访问localhost:8080即可访问到本地文...

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>canvas画图</title> <link rel="stylesh...

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。那么同样的在安装webpack之前，我们要确保本地环境已经安装了node.js。由于npm安装较慢，我们也可以选择用cnpm进行安装。安装步骤及方法都一样，在这里用npm进行安装。首先，我是直接用npm init初始化生成一个package.json文件...

在做弹框部分时，要用到一个拖拽的效果，搜了好久的插件，但是感觉没有很符合我需要的那种，所以就把之前写的js拖拽拿了过来，放到vue里。那具体操作时怎样的呢？咱们一起来看一下：1.首先在assets/js里新建一个drag.js2.将拖拽的js拷贝到里面，并export default出去。export default function drag (id) { // 代码内容}...

在jsp页面中使用到了layui里的分页，本来是异步刷新，但是这里因为直接返回的是model，所以这里layui里的curr参数是后台直接传过来的：// 分页layui.use(['laypage', 'layer'], function(){ var laypage = layui.laypage, layer = layui.layer;//自定义首页、尾页、上一页、下一页...

废话不多说，直接上代码：drag: function (id) { let isDown = false; let idObj = document.getElementById(id); let _this; // 缓存this let x, y, l, t; idObj.onmousedown = functio...