前端总结

痛定思痛。 2022-04-23 14:44 177阅读 0赞

# JS基础知识 #

（一）JS中原始类型  
(1)原始值有六种：boolean,null,undefined,number,string,symbol  
(2)原始类型存储的都是值，没有函数可以调用，能够函数调用是因为进行了强制类型转换，转换成对象类型  
(3)number类型为浮点型类型 eg:0.1+0.2!=0.3 string类型是不可变 string类型调用任何方法，不会改变其值  
（二）JS对象类型  
**原始类型和对象类型的区别？**

*  原始类型存储值，对象类型存储地址（指针）

（1）函数参数是对象的情况？  
函数传参是传递对象指针的副本  
（2）typeof vs instanceof  
**typeof是否能正确判断类型？instanceof正确判断对象的原理？**

*  typeof对原始类型除了null都可以判断出类型 对象类型除了function 其他全显示object typeof是一个一元运算符
 *  function本质上也是一个对象，但是function对象与普通对象相比，其内部有一个\[\[Call\]\]方法，用来表示这个对象是可调用的，typeof操作  
    符在判断Object时，如果内部实现了\[\[Call\]\]方法,就返回function。
 *  instanceof是一个双目运算符 内部实现机制是通过原型链来判断 Symbol.hasInstance能自定义instanceof行为的东西

（三）类型转换  
（1）转Boolean

除了undefined null false NaN '' 0 -0 其他所有值都转为true 包括所有对象

（2）对象转原始类型

对象在转换类型的时候，会调用内置的 [[ToPrimitive]] 函数 该方法在转原始类型时调用优先级最高。

let a = {
         valueOf() {
        return 0
      },
      toString() {
        return '1'
      },
      [Symbol.toPrimitive]() {
        return 2
      }
    }
    1 + a // => 3

(3)四则运算符  
加法运算符的特点：

*  运算中其中一方为字符串，那么就会把另一方也转换为字符串（优先转化成字符串）
 *  如果一方不是字符串或者数字，那么会将它转换为数字或者字符串（布尔值转化为数字 其他优先字符串）

**除了加法运算符，其他运算符只要其中一方是数字，那么另一方就会被转为数字**  
比较运算符

*  如果是对象，就通过toPrimitive转换为对象
 *  如果是字符串，就通过unicode字符索引来比较

（四）this  
**如何正确判断this?箭头函数的this是什么?**  
this指向哪里的优先级规则：new>bind>obj.foo()>foo() 箭头函数一旦被绑定，就不会再被任何方式所改变

![clipboard.png][]

（五）== vs ===  
**== vs === 有什么区别？**  
==:如果类型不同，会进行类型转换  
判断一方是boolean会转化成number 再进行比较 可能会继续类型转换  
判断一方是object且另一方为string、number、symbol会把object转为原始类型再进行判断  
（六）闭包  
**什么是闭包？**内部函数可以访问外部函数的变量  
**循环中使用闭包解决‘var’定义函数的问题**

for (var i = 1; i <= 5; i++) {
      setTimeout(function timer() {
        console.log(i)
      }, i * 1000)
    }

setTimeout是个异步函数，会把循环全部执行完毕，i 就是6  
解决办法一

for (var i = 1; i <= 5; i++) {
      (function(j) {
        setTimeout(function timer() {
          console.log(j)
        }, j * 1000)
      })(i)
    }

使用了立即执行函数将 i 传入函数内部，这个时候值就被固定在了参数 j 上面不会改变，当下次执行 timer 这个闭包的时候，就可以使用外部函数的变量 j（执行上下文 作用域链 优先寻找最近的）

解决办法二

for (var i = 1; i <= 5; i++) {
      setTimeout(
        function timer(j) {
          console.log(j)
        },
        i * 1000,
        i
      )
    }

使用 setTimeout 的第三个参数，这个参数会被当成 timer 函数的参数传入  
解决办法三

for (let i = 1; i <= 5; i++) {
      setTimeout(function timer() {
        console.log(i)
      }, i * 1000)
    }

使用 let 定义 i 了来解决问题了  
（七）深浅拷贝  
**什么是浅拷贝？如何实现浅拷贝？什么是深拷贝？如何实现深拷贝？**  
Object.assign浅拷贝 只会拷贝所有的属性值到新的对象中，如果属性值是对象，拷贝的是地址  
通过展开运算符...同样实现浅拷贝  
**浅拷贝只解决第一层的问题**  
深拷贝：通过JSON.parse(JSON.stringify(object))  
局限性：会忽略undefined,symbol,不能序列化函数，不能解决循环引用的对象  
lodash实现深拷贝  
（八）原型  
**如何理解原型？如何理解原型链？**

[clipboard.png]: /images/20220307/e442141995b74a00802679cd4a67e0a9.png