这是我参与8月更文挑战的第一天，活动详情查看：8月更文挑战

前端八股文回顾，持续更新。秋招自取。。。
不多说废话，直接开始。。。

正文

js的数据类型

• 一、js的原始类型有哪些？ 一共有7种

String、Nndefined、Number、Boolean、Symbol、Null、BigInt

• 二、下面的情况是合法的吗？—— console.log('1'.toString())

是合法的。虽然’1’是原始类型，但这里进行了隐式转换，’1’自动被读成字符串对象了

• 三、对象类型和原始类型的不同之处？

原始类型存储的是值，存在栈当中。
对象类型存储的是地址（指针），地址是存在栈中，而值是存储堆当中的。

• 四、函数参数是对象会发生什么？

会造成数据污染，函数传参如果是对象，传的是对象的引用地址，如果函数内对对象进行修改，函数外该对象也会发生改变
测试demo如下：

function test(person){
    person.age = 20
    person = {
        name:'袁总',
        age:30
    }
    return person
}
const p1 = {
    name:'胡总',
    age:25
}
const p2 = test(p1) //函数传参传的是对象的引用地址
console.log(p1) //{胡总，20}
console.log(p2) //{袁总，30}
复制代码

js的类型判断

• typeof可以正确判断数据类型？

不能，typeof只能正确判断除null之外的原始类型和Function

• typeof null //object ?

因为在 JS 的最初版本中，使用的是 32 位系统，为了性能考虑使用低位存储了变量的类型信息，000 开头代表是对象，然而 null 表示为全零，所以将它错误的判断为 object 。虽然现在的内部类型判断代码已经改变了，但是对于这个 Bug 却是一直流传下来。

• typeof 和 instanceof 的区别？

1. typeof只能正确判断除null之外的原始类型和Function
2. instanceof可以准确的判断具备原型的对象

• instanceof进行类型判断的原理是什么？

实例对象的隐式原型 = 构造函数的显式原型

• instanceof实现原理

-> 手写instanceof

 function myInstanceof(obj, type) {
    let a = obj.__proto__,
    b = type.prototype

    while (a !== null) { //这里就是第一层没找到，顺着原型链往上找
        if (a === b) return true
        a = a.__proto__
    }
    return false
}
复制代码

• js类型判断的所有方法 —— 从使用上、实现类型判断的原理上、性能上分析区别

五种方法：typeof、instanceof、Object.prototype.toString.call()、constructor、Array.isArray

1. typeof

• 在使用上，typeof可以判断除null以外的原始类型和function

2. instanceof

• 在使用上，一般用来判断对象类型，所有的对象类型 instanceof object === true
• 在实现原理上，实质：obj.proto = type.prototype。根据这一实质，对象顺着原型链往上找，直到找到类型的显式原型

3. Object.prototype.toString.call()

• 在使用上，Object的原型方法，其他对象通过call/apply调用 -> [Object xxx]
• 可以用于判断所有的数据类型

4. constructor

• 实现类型判断的原理是：通过构造函数new出来的对象都有一个constructor属性，指向它的构造函数 如：new Number(1).constructor === Number
• 对undefine和null无效
• 除了对字符串、数组、window、document可以直接进行判断。对其他的数据类型，必须要是被new出来的实例对象才能使用该方法判断类型

5. Array.isArray()

• 用于判断对象是不是数组
• 如果没有该方法可以通过方法3来实现

区别和优劣：

1. 在使用上的区别
   • typeof能够判断除null之外的原始类型和function
   • Object.prototype.toString.call()可以用于判断所有的数据类型，常用于判断浏览器内置对象
   • instanceof只能用来判断引用类型，不可判断原始类型，且所有的引用类型 instanceof Object 都为true
   • constructor对undefined、null无效
   • Array.isArray()只能用于判断对象是否为数组
2. 在实现原理上的区别
3. 当判断数组对象时，Array.isArray优于instanceof,因为前者可以判断来着iframe的数组
4. constructor不稳定，主要体现在自定义对象上，如果对象的prototype被重写，原来的constructor引用就会丢失，constructor会默认为Object
5. 在性能上，3和5性能一样差，instanceof较好，construcor性能最好(不一定的)

js的类型转换

• js中的类型转换只有三种情况
  • 转为布尔值
  • 转为数字
  • 转为字符串

• 对象转原始值 —— 调用内置的[[ToPrimitive]] eg：{} -> true 怎么转的

  1. 如果已经是原始类型，那就不需要转换
  2. 如果不是，就调用x.valueOf()，如果转换为基础类型，就返回转换的值
  3. 如果2还不能成功转换为基础类型，就调用x.toString(),如果转换为基础类型，就返回转换的值
  4. 如果都没有转换成原始类型，就会报错

• 四则运算

1. 运算过程中，只要有一方是字符串,所有方都会转换为字符串再进行字符串拼接 例：1 + ‘1’ // ’11’
2. 只要有一方不是字符串或者数字，那么会将它们先转换为数字或字符串 例：true + true //2
3. 除加法运算之外的四则运算，只要其中一方是数字，那么另一方就会被转为数字

4 + [1,2,3]
1. [1,2,3].valueOf()
2. [1,2,3].toString() //"1,2,3"
3. 4 + "1,2,3"
4. "41,2,3"


'a' + + 'b'
1. 'a' + (+ 'b')
2. 'a' + NaN
3. 'a' + 'NaN'
4. 'aNaN'

复制代码

this的指向问题

1. 非箭头函数：谁调用我，我的this就指向谁;独立调用的情况,this指向window
2. 箭头函数：this指向的是该函数的词法作用域(函数定义的位置)

结语

前端八股文自然不止这些，本文只是部分，但每个点都较详细，后面会持续更新！