前端面试个人知识点盲区复习

本文章所以知识点都来自于https://yuchengkai.cn/docs/frontend/#typeof

JS基本类型

• js有七大内置类型分别是：object number string symbol boolean null undefined
• NAN 属于number，且 NAN 不等于本身
• typeof 对于基本类型除了 null 都显示其类型

typeof 1 // 'number'
typeof '1' // 'string'
typeof undefined // undefined'
typeof true // 'boolean'
typeof Symbol() // 'symbol'
typeof variable //  variable 没有生命，但是还是会显示'undefined'

• typeof 对于对象，除了函数都会显示object

typeof [] // 'object'
typeof {} // 'object'
typeof console.log // 'function'
typeof null // 'object'

关于typeof null // 'object'，为什么会出现这种情况呢？因为在 JS 的最初版本中，使用的是 32 位系统，为了性能考虑使用低位存储了变量的类型信息，000 开头代表是对象，然而 null 表示为全零，所以将它错误的判断为 object 。虽然现在的内部类型判断代码已经改变了，但是对于这个 Bug 却是一直流传下来。如果我们想获得一个变量的正确类型，可以通过 Object.prototype.toString.call(xx)这样我们就可以获得类似 [object Type] 的字符串。

• 转Boolean

  • undefined null false NAN '' 0 -0 转化成boolean值得时候为false其他都为true

• 对象转基本类型

  • 对象转基本类型的时候，首先会调用valueOf 然后再调用 toString

  null == undefined // true
  

  双等号转化优先级: string => boolean => number

---

原型

Q：简单介绍原型和原型链
A：js的对象都有它的原型对象，通过构造函数构造出来的对象，其原型就是该构造函数的protoType属性。访问对象的属性或方法时若不存在，则会从对象的原型上寻找，若在原型上也找不到，则会继续造原型对象的原型上找，以此类推。

new运算符优先级

new Foo.getName()
new Foo().getName()
相当于
new (Foo.getName());
(new Foo()).getName();
前者是先计算Foo.getName
后者是先使用new Foo 产生了一个示例，然后再调用原型链上的getName方法

instanceof

instanceof 有两个操作函数 cat instanceof Animal cat是某个实例对象， Animal是某个构造函数
instanceof实际上就是判断对象的原型是否绑定在该构造函数的prototype属性上

this

• 取决于当前调用的对象。如果当前没有调用对象，那么在非严格模式下，调用该方法的this是windows。在严格模式下会报错。
• 其次，call、apply、bind等方法改变的this就是你在调用时传入的this
• new 运算符产生的示例，this 指向示例本身。

执行上下文

• 变量提升： 声明的代码移动到顶部。执行上下文时，会有两个阶段：
  • 第一个阶段是创建的阶段，js解释器会找到需要提升的变量和函数，并且给他们提前再内存中开辟好空间，函数的话会将整个函数存入内存中，变量只声明并且赋值为undefined。
  • 第二个阶段是代码执行阶段，可以直接提前使用
  • 提升的过程中，相同函数会覆盖上一个函数，并且函数优先于变量提升，也就是同名的变量和函数名，以函数名为准。
• 非匿名立即执行函数

var foo = 1
(function foo() {
    foo = 10
    console.log(foo)
}()) // -> ƒ foo() { foo = 10 ; console.log(foo) }

因为当 JS 解释器在遇到非匿名的立即执行函数时，会创建一个辅助的特定对象，然后将函数名称作为这个对象的属性，因此函数内部才可以访问到 foo，但是这个值又是只读的，所以对它的赋值并不生效，所以打印的结果还是这个函数，并且外部的值也没有发生更改。

闭包

• 什么是闭包？假设函数A返回了一个函数B，函数B用到了函数A里面的变量。那么函数B就是一个闭包。

function A() {
  let a = 1
  function B() {
    console.log(a)
  }
  return B
}

• 运行时，函数A作为声明，会进入到调用栈，执行结束后，理应函数A里面的内容会弹出调用栈。因此函数B里面的a应该是无法访问到的。但是，由于闭包的特性，闭包里面的变量会被存放在堆里面。所以，在a被访问的场景下，仍然能取到正确的值。

深浅拷贝

• 为什么要拷贝？

const a = {
  age: 1
}
const b = a;
b.age = 2;
console.log(a.age) // 2

因为js的对象都是引用值，如果直接去用对象a去初始化一个变量b，那么相当于直接把a的引用值赋值给了变量b，因此，a和b是完全等价的。在需要改变b而不改变a的前提下，我们需要用到深浅拷贝。

• 浅拷贝的方式:

const a = {
  age: 1,
  name: 'gatsby',
  sex: 1
}
// 方式一：用Object.assign()
const b = Object.assign({}, a);
// 方式二： 扩展运算符 '...'
const c = {...a}

• 深拷贝的方式：
• 在对象有多层嵌套的时候。用浅拷贝的方式无法达到我们想要的效果，比如对象内部还有对象。那么用浅拷贝，这个内部对象复制的还是引用值。比如下文的jobs

方法一：JSON.parse(JSON.stringify(obj))

let a = {
    age: 1,
    jobs: {
        first: 'FE'
    }
}
const b = JSON.parse(JSON.stringify(a));

• 大部分情况下使用上述方法是效率最快的最有效的。但是存在以下bug
• 会忽略 undefined
• 会忽略 symbol
• 不能序列化函数
• 不能解决循环引用的对象

方法二：使用lodash函数进行深拷贝

防抖和节流

在业务开发中常常遇到类似这种问题：在滚动事件中需要做个复杂计算或者实现一个按钮的防二次点击操作。

这些需求都可以通过函数防抖动来实现。尤其是第一个需求，如果在频繁的事件回调中做复杂计算，很有可能导致> > 页面卡顿，不如将多次计算合并为一次计算，只在一个精确点做操作。

• 防抖和节流的作用都是防止函数多次调用。
• 区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于wait，防抖的情况下只会调用一次，而节流的 情况会每隔一定时间（参数wait）调用函数。

转自：防抖和节流