分类：Javascript

2020
10-10

JavaScript 常见的继承方式汇总

原型链机制：在ECMAscript中描述了原型链的概念，并将原型链作为实现继承的主要方法，其基本思想就是利用原型让一个引用类型继承另一个引用类型的属性和方法。构造函数和原型还有实例之间的关系：每个构造函数都有一个原型对象（prototype），原型对象都包含一个指向构造函数的指针（constructor），而实例都包含一个指向原型对象的内部指针（__propto__）。关系图如下图所示：每一个Function都是Object基类的一个... 继续阅读 >
2020
10-10

JavaScript 闭包的使用场景

一、闭包由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，闭包就是能够读取其他函数内部变量的函数。所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。比如下面的代码：functionf1(){varn=999;functionf2(){console.log(n);}returnf2;}varresult=f1();result();//999函数f2就被包括在函数f1内部，这时f1内部的所有局部变量，对f2都是可见的。但是反过来就不行，f2内... 继续阅读 >
2020
10-10

谈谈JavaScript中的垃圾回收机制

JavaScript具有自动垃圾收集机制，也就是说，执行环境会负责管理代码执行过程中使用的内存。在编写JavaScript程序时，开发人员不用再关心内存使用问题，所需内存的分配以及无用内存的回收完全实现了自动管理。这种垃圾收集机制的原理其实很简单:找出那些不再继续使用的变量，然后释放其占用的内存。为此，垃圾收集器会按照固定的时间间隔(或代码执行中预定的收集时间)，周期性地执行这一操作。具体到浏览器中... 继续阅读 >
2020
10-10

详细分析JavaScript中的深浅拷贝

在说JS中深浅拷贝之前，我们需要对JS中的数据类型有所了解，分为基本数据类型与引用数据类型，对于基本数据类型并没有深浅拷贝的说法，深浅拷贝主要针对引用数据类型。一、浅拷贝浅拷贝只复制了引用，并没有复制值。在JS中最简单的浅拷贝就是利用“=”赋值操作符来实现。varobj1={a:1,b:[2,3,4],c:{name:'tanj'},fun:function(){console.log('fun')}}varobj2=obj1obj2.a=666/*修改obj2的值，obj1的值也随... 继续阅读 >
2020
10-10

详解JavaScript中的数据类型，以及检测数据类型的方法

一.js中的数据类型有哪些?在js中，基本数据类型有五种，分别是string、number、boolean、null、undefined，不过在ES6中新增加的了一种基本数据类型Symbol(表示独一无二的值)，其作用主要是从根本上防止属性名的冲突而设定的。除了基本数据类型之外，还有引用数据类型object，也有人称之为复杂数据类型，包含了我们常见的Array、Object、Function等。所以现在js中的数据类型共有七种。PS:Symbol数据类型通过Symbol函数生成。... 继续阅读 >
2020
10-10

JavaScript编码小技巧分享

三元操作符如果使用if...else语句，那么这是一个很好节省代码的方式。constx=20;letbig;if(x>10){big=true;}else{big=false;}//这样写...constbig=x>10?true:false;Short-circuitEvaluation分配一个变量值到另一个变量的时候，你可能想要确保变量不是null、undefined或空。你可以写一个有多个if的条件语句或者Short-circuitEvaluation。if(variable1!==null||variable1!==undefined||variab... 继续阅读 >
2020
10-10

JavaScript常用工具函数汇总（浏览器环境）

前端业务中比较常用的JavaScript工具函数，浏览器环境常用，可直接拷贝在项目里使用。这里统一整理，方便查阅，本文章会持续更新。一、file转为base64/***file转为base64*@param{*}filefile对象*@param{*}callback*/exportconstfileToDataURL=(file,callback)=>{letfreader=newFileReader();freader.readAsDataURL(file);freader.onload=function(e){callback(e.target.result);}}二、blob流转换... 继续阅读 >
2020
10-10

JavaScript中如何调用Java方法

在JavaScript中想要调用Java的方法，我通过JavaScript访问servlet，再通过servlet调用Java某个类的方法。HTML代码<tableid="cartTable"><thead><tr><thclass="product_remove"><label><inputclass="check-allcheck"type="checkbox"/>  全选</label><aclass="fldelete"id="deleteAll"href="javascript:;"rel="externalnofollow"><iclass="fafa-trash-o"></i... 继续阅读 >
2020
10-10

JavaScript 如何计算文本的行数的实现

需求：根据行数决定是否限制展开和收起。思路：用2个块统计行高，一个不加高度限制用来统计行数(css隐藏)，一个加高度限制用来显示(加高度限制会导致统计行数不准)要想知道文本的行数，那就需要知道文本的总高度和每一行的高度，总高度除以行高就是行数。当然总高度的计算必须是文字所在的DOM没有对高度的限制，随着文本的增加DOM要随之变高才行；最后还要考虑DOM的样式padding和margin对高度的影响。这样一来我们就可以计算... 继续阅读 >
2020
10-10

JavaScript实现串行请求的示例代码

使用async和awaitvarfn=asyncfunction(promiseArr){for(leti=0,len=arr.length;i<len;i++){currentPromise=(promiseArr[i]instanceOfPromise)?promiseArr[i]:Promise.resolve(promiseArr[i]);varresult=awaitcurrentPromise;console.log(result)}}fn(arr)Promise实现依照promises规范，一旦一个promise被创建，它就被执行了。如果then方法里返回的是一个promise对象，那么执行下一个th... 继续阅读 >
2020
10-10

浅谈JavaScript 声明提升

1引例及基本原理在学习JavaScript声明提升之前，我们先看下面这个例子：console.log(a);vara=2;运行结果会是什么？你可能会有以下的猜测：1.报错ReferenceError:aisnotdefined；2.打印2；3.打印undefined。正确的结果是第三种，打印undefined。下面让我们来看看具体的原因。其实，对于vara=2;这条语句，JavaScript会将其视为两个声明：定义声明vara，会在编译阶段进行；赋值声明a=2，会留在原地等待执行阶段进行。而所... 继续阅读 >
2020
10-10

详解JavaScript 高阶函数

高阶函数简介高阶函数的英文名叫Higher-OrderFunction，是函数式编程中的一种。他的表现形式往往是通过把函数作为参数传入另一个函数，或者将函数作为另一个函数的返回值返回。在实际开发业务中，高阶函数往往可以抽象我们的代码，将我们的命令式编程转换为复用性更高级的函数式编程，从而提升我们的代码质量。下面拿3个面试中常问的高阶函数举例子，希望看完以后能够提升大家对JS的理解，提高我们的代码质量。chatis... 继续阅读 >
2020
10-10

JavaScript位置参数实现原理及过程解析

1.什么是位置参数?JavaScript：为什么命名参数比位置参数更好你一定很熟悉位置参数，即使你第一次听到这个名字。functiongreet(firstName,lastName){console.log(`Hello${firstName}${lastName}`);}//预期用法greet('Michael','Scott');constfName='Harry';constlName='Potter';greet(fName,lName);//错误用法constfirstName='Erlich';constlastName='Bachman';greet(lastName,firstName);... 继续阅读 >
2020
10-10

浅谈javascript事件环微任务和宏任务队列原理

JS事件环JS程序的运行是离不开事件环机制的，这个机制保证在发生某些事情的时候我们有机会执行一个我们事先预定好的函数，事情发生的时候JS会将相应的函数入栈执行然后出栈，但是关于事件环我们还有一些未知的东西，例如，setTimeout我们习惯称他为定时器，但是可能很多人没有意识到，这个东西和我们常用的一些事件没什么不同，只不过我们通常所说的事件大多需要用户触发，而setTimeout不用用户自己触发，而是指定时间之后... 继续阅读 >
2020
10-10

JavaScript 判断数据类型的4种方法

本文提供四种方法判断js数据类型，这里记录了它们之间的差异，分别是typeof运算符、instanceof运算符、constructor属性、Object.prototype.toString方法。一、使用typeof判断数据类型console.log('测试Number->',typeof1);//numberconsole.log('测试Boolean->',typeoftrue);//booleanconsole.log('测试String->',typeof'');//stringconsole.log('测试null->',typeofnull);//objectconsole.log('测... 继续阅读 >
2020
10-10

JavaScript常用工具函数库汇总

对象或数组的深拷贝/***对象或数组的深拷贝*@param{*}cloneObj被克隆的对象*@param{*}targetObj克隆的目标对象*@param{*}isOverride若属性重复，是否覆盖被克隆对象的属性*/functiondeepClone(cloneObj,targetObj,isOverride=true){const_toString=Object.prototype.toStringif(_toString.call(cloneObj)!=='[objectArray]'&&_toString.call(cloneObj)!=='[objectObject]'){returnclone... 继续阅读 >