乐趣区

关于javascript:前端JavaScript-基础

jiezi

留神：每道题后面呈现的 (xx) 数字代表这道题呈现的频次，此 JS 根底是基于 30+ 篇前端面经整顿出的问题和对应的答复、参考链接等

（2）问：0.1 + 0.2 === 0.3 嘛？为什么？

JavaScirpt 应用 Number 类型来示意数字（整数或浮点数），遵循 IEEE 754 规范，通过 64 位来示意一个数字（1 + 11 + 52）

  • 1 符号位，0 示意负数，1 示意正数 s
  • 11 指数位（e）
  • 52 尾数，小数局部（即有效数字）

最大平安数字：Number.MAX_SAFE_INTEGER = Math.pow(2, 53) – 1，转换成整数就是 16 位，所以 0.1 === 0.1，是因为通过 toPrecision(16) 去无效位之后，两者是相等的。

在两数相加时，会先转换成二进制，0.1 和 0.2 转换成二进制的时候尾数会产生有限循环，而后进行对阶运算，JS 引擎对二进制进行截断，所以造成精度失落。

所以总结：精度失落可能呈现在进制转换和对阶运算中

参考链接

  • juejin.im/post/5b90e0…

（4）问：JS 数据类型

根本类型：Number、Boolean、String、null、undefined、symbol（ES6 新增的），BigInt（ES2020）援用类型：Object，对象子类型（Array，Function）

参考链接

  • juejin.im/post/5b2b0a…
  • developer.mozilla.org/zh-CN/docs/…

问：JS 整数是怎么示意的？

  • 通过 Number 类型来示意，遵循 IEEE754 规范，通过 64 位来示意一个数字，（1 + 11 + 52），最大平安数字是 Math.pow(2, 53) – 1，对于 16 位十进制。（符号位 + 指数位 + 小数局部无效位）

问：Number() 的存储空间是多大？如果后盾发送了一个超过最大本人的数字怎么办

Math.pow(2, 53)，53 为有效数字，会产生截断，等于 JS 能反对的最大数字。

（4）写代码：实现函数可能深度克隆根本类型

浅克隆：

function shallowClone(obj) {let cloneObj = {};
  
  for (let i in obj) {cloneObj[i] = obj[i];
  }
  
  return cloneObj;
}
复制代码

深克隆：

  • 思考根底类型

  • 援用类型

    • RegExp、Date、函数 不是 JSON 平安的
    • 会失落 constructor，所有的构造函数都指向 Object
    • 破解循环援用
function deepCopy(obj) {if (typeof obj === 'object') {var result = obj.constructor === Array ? [] : {};
    
    for (var i in obj) {result[i] = typeof obj[i] === 'object' ? deepCopy(obj[i]) : obj[i];
    }
  } else {var result = obj;}
  
  return result;
}
复制代码

问：事件流

事件流是网页元素接管事件的程序，”DOM2 级事件 ” 规定的事件流包含三个阶段：事件捕捉阶段、处于指标阶段、事件冒泡阶段。首先产生的事件捕捉，为截获事件提供机会。而后是理论的指标承受事件。最初一个阶段是工夫冒泡阶段，能够在这个阶段对事件做出响应。尽管捕捉阶段在标准中规定不容许响应事件，然而实际上还是会执行，所以有两次机会获取到指标对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 事件冒泡 </title>
</head>
<body>
    <div>
        <p id="parEle"> 我是父元素    <span id="sonEle"> 我是子元素 </span></p>
    </div>
</body>
</html>
<script type="text/javascript"> var sonEle = document.getElementById('sonEle');
var parEle = document.getElementById('parEle');

parEle.addEventListener('click', function () {alert('父级 冒泡');
}, false);
parEle.addEventListener('click', function () {alert('父级 捕捉');
}, true);

sonEle.addEventListener('click', function () {alert('子级冒泡');
}, false);
sonEle.addEventListener('click', function () {alert('子级捕捉');
}, true); </script>
复制代码

当容器元素及嵌套元素，即在 捕捉阶段 又在 冒泡阶段 调用事件处理程序时：事件按 DOM 事件流的程序 执行事件处理程序：

  • 父级捕捉
  • 子级冒泡
  • 子级捕捉
  • 父级冒泡

且当事件处于指标阶段时，事件调用程序决定于绑定事件的 书写程序，按下面的例子为，先调用冒泡阶段的事件处理程序，再调用捕捉阶段的事件处理程序。顺次 alert 出“子集冒泡”，“子集捕捉”。

IE 兼容

  • attchEvent(‘on’ + type, handler)
  • detachEvent(‘on’ + type, handler)

参考链接

  • juejin.im/entry/5826b…

问：事件是如何实现的？

基于公布订阅模式，就是在浏览器加载的时候会读取事件相干的代码，然而只有理论等到具体的事件触发的时候才会执行。

比方点击按钮，这是个事件（Event），而负责处理事件的代码段通常被称为事件处理程序（Event Handler），也就是「启动对话框的显示」这个动作。

在 Web 端，咱们常见的就是 DOM 事件：

  • DOM0 级事件，间接在 html 元素上绑定 on-event，比方 onclick，勾销的话，dom.onclick = null，同一个事件只能有一个处理程序，前面的会笼罩后面的。
  • DOM2 级事件，通过 addEventListener 注册事件，通过 removeEventListener 来删除事件，一个事件能够有多个事件处理程序，按程序执行，捕捉事件和冒泡事件
  • DOM3 级事件，减少了事件类型，比方 UI 事件，焦点事件，鼠标事件

参考链接

  • zhuanlan.zhihu.com/p/73091706

问：new 一个函数产生了什么

结构调用：

  • 发明一个全新的对象
  • 这个对象会被执行 [[Prototype]] 连贯，将这个新对象的 [[Prototype]] 链接到这个构造函数.prototype 所指向的对象
  • 这个新对象会绑定到函数调用的 this
  • 如果函数没有返回其余对象，那么 new 表达式中的函数调用会主动返回这个新对象

问：new 一个构造函数，如果函数返回 return {}、return null，return 1，return true 会产生什么状况？

如果函数返回一个对象，那么 new 这个函数调用返回这个函数的返回对象，否则返回 new 创立的新对象

问：symbol 有什么用途

能够用来示意一个举世无双的变量避免命名抵触。然而面试官问还有吗？我没想出其余的用途就间接答我不晓得了，还能够利用 symbol 不会被惯例的办法（除了 Object.getOwnPropertySymbols 外）遍历到，所以能够用来模仿公有变量。

次要用来提供遍历接口，安排了 symbol.iterator 的对象才能够应用 for···of 循环，能够对立解决数据结构。调用之后回返回一个遍历器对象，蕴含有一个 next 办法，应用 next 办法后有两个返回值 value 和 done 别离示意函数以后执行地位的值和是否遍历结束。

Symbol.for() 能够在全局拜访 symbol

（3）问：闭包是什么？

闭包是指有权拜访另外一个函数作用域中的变量的函数

JavaScript 代码的整个执行过程，分为两个阶段，代码编译阶段与代码执行阶段。编译阶段由编译器实现，将代码翻译成可执行代码，这个阶段作用域规定会确定。执行阶段由引擎实现，次要工作是执行可执行代码，执行上下文在这个阶段创立。

什么是作用域？

ES5 中只存在两种作用域：全局作用域和函数作用域。在 JavaScript 中，咱们将作用域定义为一套规定，这套规定用来治理引擎如何在以后作用域以及嵌套子作用域中依据标识符名称进行变量（变量名或者函数名）查找

什么是作用域链？

首先要理解作用域链，当拜访一个变量时，编译器在执行这段代码时，会首先从以后的作用域中查找是否有这个标识符，如果没有找到，就会去父作用域查找，如果父作用域还没找到持续向上查找，直到全局作用域为止,，而作用域链，就是有以后作用域与下层作用域的一系列变量对象组成，它保障了以后执行的作用域对合乎拜访权限的变量和函数的有序拜访。

闭包产生的实质

以后环境中存在指向父级作用域的援用

什么是闭包

闭包是一种非凡的对象，它由两局部组成：执行上下文（代号 A），以及在该执行上下文中创立的函数（代号 B），当 B 执行时，如果拜访了 A 中变量对象的值，那么闭包就会产生，且在 Chrome 中应用这个执行上下文 A 的函数名代指闭包。

个别如何产生闭包

  • 返回函数
  • 函数当做参数传递

闭包的利用场景

  • 柯里化 bind
  • 模块

参考文章

  • segmentfault.com/a/119000001…

问：NaN 是什么，用 typeof 会输入什么？

Not a Number，示意非数字，typeof NaN === ‘number’

（2）问：JS 隐式转换，显示转换

个别非根底类型进行转换时会先调用 valueOf，如果 valueOf 无奈返回根本类型值，就会调用 toString

字符串和数字

  • “+” 操作符，如果有一个为字符串，那么都转化到字符串而后执行字符串拼接
  • “-” 操作符，转换为数字，相减 (-a, a * 1 a/1) 都能进行隐式强制类型转换
[] + {} 和 {} + []
复制代码

布尔值到数字

  • 1 + true = 2
  • 1 + false = 1

转换为布尔值

  • for 中第二个
  • while
  • if
  • 三元表达式
  • ||（逻辑或）&&（逻辑与）右边的操作数

符号

  • 不能被转换为数字
  • 能被转换为布尔值（都是 true）
  • 能够被转换成字符串 “Symbol(cool)”

宽松相等和严格相等

宽松相等容许进行强制类型转换，而严格相等不容许

字符串与数字

转换为数字而后比拟

其余类型与布尔类型

  • 先把布尔类型转换为数字，而后持续进行比拟

对象与非对象

  • 执行对象的 ToPrimitive(对象）而后持续进行比拟

假值列表

  • undefined
  • null
  • false
  • +0, -0, NaN
  • “”

（2）问：理解 this 嘛，bind，call，apply 具体指什么

它们都是函数的办法

call: Array.prototype.call(this, args1, args2]) apply: Array.prototype.apply(this, [args1, args2])：ES6 之前用来开展数组调用, foo.appy(null, [])，ES6 之后应用 … 操作符

  • New 绑定 > 显示绑定 > 隐式绑定 > 默认绑定
  • 如果须要应用 bind 的柯里化和 apply 的数组解构，绑定到 null，尽可能应用 Object.create(null) 创立一个 DMZ 对象

四条规定：

  • 默认绑定，没有其余润饰（bind、apply、call)，在非严格模式下定义指向全局对象，在严格模式下定义指向 undefined
function foo() {console.log(this.a); 
}

var a = 2;
foo();
复制代码
  • 隐式绑定：调用地位是否有上下文对象，或者是否被某个对象领有或者蕴含，那么隐式绑定规定会把函数调用中的 this 绑定到这个上下文对象。而且，对象属性链只有上一层或者说最初一层在调用地位中起作用
function foo() {console.log(this.a);
}

var obj = {
  a: 2,
  foo: foo,
}

obj.foo(); // 2
复制代码
  • 显示绑定：通过在函数上运行 call 和 apply，来显示的绑定 this
function foo() {console.log(this.a);
}

var obj = {a: 2};

foo.call(obj);
复制代码

显示绑定之硬绑定

function foo(something) {console.log(this.a, something);
  
  return this.a + something;
}

function bind(fn, obj) {return function() {return fn.apply(obj, arguments);
  };
}

var obj = {a: 2}

var bar = bind(foo, obj);
复制代码

New 绑定，new 调用函数会创立一个全新的对象，并将这个对象绑定到函数调用的 this。

  • New 绑定时，如果是 new 一个硬绑定函数，那么会用 new 新建的对象替换这个硬绑定 this，
function foo(a) {this.a = a;}

var bar = new foo(2);
console.log(bar.a)
复制代码

（4）问：手写 bind、apply、call

// call

Function.prototype.call = function (context, ...args) {
  context = context || window;
  
  const fnSymbol = Symbol("fn");
  context[fnSymbol] = this;
  
  context[fnSymbol](...args);
  delete context[fnSymbol];
}
复制代码
// apply

Function.prototype.apply = function (context, argsArr) {
  context = context || window;
  
  const fnSymbol = Symbol("fn");
  context[fnSymbol] = this;
  
  context[fnSymbol](...argsArr);
  delete context[fnSymbol];
}
复制代码
// bind

Function.prototype.bind = function (context, ...args) {
  context = context || window;
  const fnSymbol = Symbol("fn");
  context[fnSymbol] = this;
  
  return function (..._args) {args = args.concat(_args);
    
    context[fnSymbol](...args);
    delete context[fnSymbol];   
  }
}
    
复制代码

（3）问：setTimeout(fn, 0)多久才执行，Event Loop

setTimeout 依照程序放到队列外面，而后期待函数调用栈清空之后才开始执行，而这些操作进入队列的程序，则由设定的延迟时间来决定

手写题：Promise 原理

class MyPromise {constructor(fn) {this.resolvedCallbacks = [];
    this.rejectedCallbacks = [];
    
    this.state = 'PENDING';
    this.value = '';
    
    fn(this.resolve.bind(this), this.reject.bind(this));
    
  }
  
  resolve(value) {if (this.state === 'PENDING') {
      this.state = 'RESOLVED';
      this.value = value;
      
      this.resolvedCallbacks.map(cb => cb(value));   
    }
  }
  
  reject(value) {if (this.state === 'PENDING') {
      this.state = 'REJECTED';
      this.value = value;
      
      this.rejectedCallbacks.map(cb => cb(value));
    }
  }
  
  then(onFulfilled, onRejected) {if (this.state === 'PENDING') {this.resolvedCallbacks.push(onFulfilled);
      this.rejectedCallbacks.push(onRejected);
      
    }
    
    if (this.state === 'RESOLVED') {onFulfilled(this.value);
    }
    
    if (this.state === 'REJECTED') {onRejected(this.value);
    }
  }
}
      
复制代码

问：js 脚本加载问题，async、defer 问题

  • 如果依赖其余脚本和 DOM 后果，应用 defer
  • 如果与 DOM 和其余脚本依赖不强时，应用 async

参考资料

  • mp.weixin.qq.com/s/pw5lfFeNa…

问：如何判断一个对象是不是空对象？

Object.keys(obj).length === 0

手写题：在线编程，getUrlParams(url,key); 就是很简略的获取 url 的某个参数的问题，但要思考边界状况，多个返回值等等

问：<script src=’xxx’’xxx’/> 内部 js 文件先加载还是 onload 先执行，为什么？

onload 是所以加载实现之后执行的

问：怎么加事件监听，两种

onclick 和 addEventListener

问：事件流传机制（事件流）

冒泡和捕捉

（4）问：说一下原型链和原型链的继承吧

  • 所有一般的 [[Prototype]] 链最终都会指向内置的 Object.prototype，其蕴含了 JavaScript 中许多通用的性能
  • 为什么能创立“类”，借助一种非凡的属性：所有的函数默认都会领有一个名为 prototype 的共有且不可枚举的属性，它会指向另外一个对象，这个对象通常被称为函数的原型
function Person(name) {this.name = name;}

Person.prototype.constructor = Person
复制代码
  • 在产生 new 结构函数调用时，会将创立的新对象的 [[Prototype]] 链接到 Person.prototype 指向的对象，这个机制就被称为原型链继承
  • 办法定义在原型上，属性定义在构造函数上
  • 首先要说一下 JS 原型和实例的关系：每个构造函数（constructor）都有一个原型对象（prototype），这个原型对象蕴含一个指向此构造函数的指针属性，通过 new 进行结构函数调用生成的实例，此实例蕴含一个指向原型对象的指针，也就是通过 [[Prototype]] 链接到了这个原型对象
  • 而后说一下 JS 中属性的查找：当咱们试图援用实例对象的某个属性时，是依照这样的形式去查找的，首先查找实例对象上是否有这个属性，如果没有找到，就去结构这个实例对象的构造函数的 prototype 所指向的对象下来查找，如果还找不到，就从这个 prototype 对象所指向的构造函数的 prototype 原型对象下来查找
  • 什么是原型链：这样逐级查找形似一个链条，且通过  [[Prototype]] 属性链接，所以被称为原型链
  • 什么是原型链继承，类比类的继承：当有两个构造函数 A 和 B，将一个构造函数 A 的原型对象的，通过其 [[Prototype]] 属性链接到另外一个 B 构造函数的原型对象时，这个过程被称之为原型继承。

标准答案更正确的解释

什么是原型链？

当对象查找一个属性的时候，如果没有在本身找到，那么就会查找本身的原型，如果原型还没有找到，那么会持续查找原型的原型，直到找到 Object.prototype 的原型时，此时原型为 null，查找进行。这种通过 通过原型链接的逐级向上的查找链被称为原型链

什么是原型继承？

一个对象能够应用另外一个对象的属性或者办法，就称之为继承。具体是通过将这个对象的原型设置为另外一个对象，这样依据原型链的规定，如果查找一个对象属性且在本身不存在时，就会查找另外一个对象，相当于一个对象能够应用另外一个对象的属性和办法了。

参考链接

  • zhuanlan.zhihu.com/p/35790971

问：说下对 JS 的理解吧

是基于原型的动静语言，次要独特个性有 this、原型和原型链。

JS 严格意义上来说分为：语言规范局部（ECMAScript）+ 宿主环境局部

语言规范局部

2015 年公布 ES6，引入诸多新个性使得可能编写大型项目变成可能，规范自 2015 之后以年号代号，每年一更

宿主环境局部

  • 在浏览器宿主环境包含 DOM + BOM 等
  • 在 Node，宿主环境包含一些文件、数据库、网络、与操作系统的交互等

问：数组可能调用的函数有那些？

  • push
  • pop
  • splice
  • slice
  • shift
  • unshift
  • sort
  • find
  • findIndex
  • map/filter/reduce 等函数式编程办法
  • 还有一些原型链上的办法：toString/valudOf

问：如何判断数组类型

Array.isArray

问：函数中的 arguments 是数组吗？类数组转数组的办法理解一下？

是类数组，是属于鸭子类型的领域，长得像数组，

  • … 运算符
  • Array.from
  • Array.prototype.slice.apply(arguments)

问：用过 TypeScript 吗？它的作用是什么？

为 JS 增加类型反对，以及提供最新版的 ES 语法的反对，是的利于团队合作和排错，开发大型项目

问：PWA 应用过吗？serviceWorker 的应用原理是啥？

渐进式网络应用（PWA）是谷歌在 2015 年底提出的概念。基本上算是 web 应用程序，但在外观和感觉上与 原生 app相似。反对 PWA 的网站能够提供脱机工作、推送告诉和设施硬件拜访等性能。

Service Worker是浏览器在后盾独立于网页运行的脚本，它关上了通向不须要网页或用户交互的性能的大门。当初，它们已包含如推送告诉和后盾同步等性能。未来，Service Worker将会反对如定期同步或天文围栏等其余性能。本教程探讨的外围性能是拦挡和解决网络申请，包含通过程序来治理缓存中的响应。

参考链接

  • juejin.im/post/5e26aa…

问：ES6 之前应用 prototype 实现继承

Object.create() 会创立一个“新”对象，而后将此对象外部的 [[Prototype]] 关联到你指定的对象（Foo.prototype）。Object.create(null) 创立一个空 [[Prototype]] 链接的对象，这个对象无奈进行委托。

function Foo(name) {this.name = name;}

Foo.prototype.myName = function () {return this.name;}

// 继承属性，通过借用结构函数调用
function Bar(name, label) {Foo.call(this, name);
  this.label = label;
}

// 继承办法，创立备份
Bar.prototype = Object.create(Foo.prototype);

// 必须设置回正确的构造函数，要不然在会产生判断类型出错
Bar.prototype.constructor = Bar;

 // 必须在上一步之后
Bar.prototype.myLabel = function () {return this.label;}

var a = new Bar("a", "obj a");

a.myName(); // "a"
a.myLabel(); // "obj a"
复制代码

问: 如果一个构造函数，bind 了一个对象，用这个构造函数创立出的实例会继承这个对象的属性吗？为什么？

不会继承，因为依据 this 绑定四大规定，new 绑定的优先级高于 bind 显示绑定，通过 new 进行结构函数调用时，会创立一个新对象，这个新对象会代替 bind 的对象绑定，作为此函数的 this，并且在此函数没有返回对象的状况下，返回这个新建的对象

(3)箭头函数和一般函数有啥区别？箭头函数能当构造函数吗？

  • 一般函数通过 function 关键字定义，this 无奈联合词法作用域应用，在运行时绑定，只取决于函数的调用形式，在哪里被调用，调用地位。（取决于调用者，和是否独立运行）

  • 箭头函数应用被称为“胖箭头”的操作 => 定义，箭头函数不利用一般函数 this 绑定的四种规定，而是依据外层（函数或全局）的作用域来决定 this，且箭头函数的绑定无奈被批改（new 也不行）。

    • 箭头函数罕用于回调函数中，包含事件处理器或定时器
    • 箭头函数和 var self = this，都试图取代传统的 this 运行机制，将 this 的绑定拉回到词法作用域
    • 没有原型、没有 this、没有 super，没有 arguments，没有 new.target

    • 不能通过 new 关键字调用

      • 一个函数外部有两个办法：[[Call]] 和 [[Construct]]，在通过 new 进行函数调用时，会执行 [[construct]] 办法，创立一个实例对象，而后再执行这个函数体，将函数的 this 绑定在这个实例对象上
      • 当间接调用时，执行 [[Call]] 办法，间接执行函数体
      • 箭头函数没有 [[Construct]] 办法，不能被用作结构函数调用，当应用 new 进行函数调用时会报错。
function foo() {return (a) => {console.log(this.a);
  }
}

var obj1 = {a: 2}

var obj2 = {a: 3}

var bar = foo.call(obj1);
bar.call(obj2);
复制代码

参考资料

  • segmentfault.com/a/119000001…

问：晓得 ES6 的 Class 嘛？Static 关键字有理解嘛

为这个类的函数对象间接增加办法，而不是加在这个函数对象的原型对象上

（3）问：事件循环机制（Event Loop）

事件循环机制从整体上通知了咱们 JavaScript 代码的执行程序 Event Loop即事件循环，是指浏览器或 Node 的一种解决 javaScript 单线程运行时不会阻塞的一种机制，也就是咱们常常应用 异步 的原理。

先执行宏工作队列，而后执行微工作队列，而后开始下一轮事件循环，持续先执行宏工作队列，再执行微工作队列。

  • 宏工作：script/setTimeout/setInterval/setImmediate/ I/O / UI Rendering
  • 微工作：process.nextTick()/Promise  

上诉的 setTimeout 和 setInterval 等都是工作源，真正进入工作队列的是他们散发的工作。

优先级

  • setTimeout = setInterval 一个队列
  • setTimeout > setImmediate 
  • process.nextTick > Promise
for (const macroTask of macroTaskQueue) {handleMacroTask();    
  for (const microTask of microTaskQueue) {handleMicroTask(microTask);  
  }
}
复制代码

参考链接

  • juejin.im/post/59e85e…

（2）手写题：数组扁平化

function flatten(arr) {let result = [];

  for (let i = 0; i < arr.length; i++) {if (Array.isArray(arr[i])) {result = result.concat(flatten(arr[i]));
    } else {result = result.concat(arr[i]);
    }
  }

  return result;
}

const a = [1, [2, [3, 4]]];
console.log(flatten(a));

复制代码

手写题：实现柯里化

事后设置一些参数

柯里化是什么：是指这样一个函数，它接管函数 A，并且能返回一个新的函数，这个新的函数可能处理函数 A 的残余参数

function createCurry(func, args) {
  var argity = func.length;
  var args = args || [];
  
  return function () {var _args = [].slice.apply(arguments);
    args.push(..._args);
    
    if (args.length < argity) {return createCurry.call(this, func, args);
    }
    
    return func.apply(this, args);
  }
}
复制代码

手写题：数组去重

Array.from(new Set([1, 1, 2, 2]))
复制代码

问：let 闭包

let 会产生临时性死区，在以后的执行上下文中，会进行变量晋升，然而未被初始化，所以在执行上下文执行阶段，执行代码如果还没有执行到变量赋值，就援用此变量就会报错，此变量未初始化。

问：变量晋升

函数在运行的时候，会首先创立执行上下文，而后将执行上下文入栈，而后当此执行上下文处于栈顶时，开始运行执行上下文。

在创立执行上下文的过程中会做三件事：创立变量对象，创立作用域链，确定 this 指向，其中创立变量对象的过程中，首先会为 arguments 创立一个属性，值为 arguments，而后会扫码 function 函数申明，创立一个同名属性，值为函数的援用，接着会扫码 var 变量申明，创立一个同名属性，值为 undefined，这就是变量晋升 问：** 如何对待 PWA App、原生 App 以及 Flutter 和 React Native 这种前端驱动的开发模式？

instance 如何应用

右边能够是任意值，左边只能是函数

'hello tuture' instanceof String // false
退出移动版