6.15-前端知识体系

最新推荐文章于 2022-07-30 17:50:59 发布

晚安不熬夜了

最新推荐文章于 2022-07-30 17:50:59 发布

阅读量148

点赞数 1

分类专栏：原型和原型链 type if语句（逻辑运算）文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/cjjaixuexi/article/details/117928984

版权

原型和原型链同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

type

1 篇文章 0 订阅

订阅专栏

if语句（逻辑运算）

1 篇文章 0 订阅

订阅专栏

前端知识体系

JS 基础

变量和数据类型

数据类型
- 基本数据类型
- 常见值类型
  - Undefined、String、Number、Boolean、Symbol
常见引用类型
- Null、Object、Array

typeof和深拷贝

typeof运算符
- 识别所有值类型
  识别函数
  判断是否是引用类型（不能再细分了）
- 1.识别值
效果图 $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9Ybr54DF-1623748143569)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210615165805575.png)]$
2.识别函数 $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U3SXPslZ-1623748143570)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210615165812680.png)]$
- 效果图 $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rkjAa9x2-1623748143571)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210615165817262.png)]$
- 3.判断是否是引用类型（不能再细分了） $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UsSyrcgq-1623748143572)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210615165826612.png)]$
效果图（只能判断为 object ，但无法识别到底是对象还是数组等） $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w0gZ2Nvg-1623748143572)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210615165834580.png)]$
深拷贝
- 值类型的赋值操作其实就是深拷贝：变量赋值时，拷贝的不是内存地址，而是将数据完整的在内存中复制了一份
  - $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rIb8j9Q0-1623748143573)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210615165849149.png)]$
    - 图示 $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DnswoMSN-1623748143573)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210615165852819.png)]$
- 引用类型(null、对象、数组)的赋值操作都不是深拷贝：拷贝的是内存地址，最终两个变量指向的是同一个地址
  - 举例（对象浅拷贝）
    - $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mHOrjOT0-1623748143574)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210615165900267.png)]$
      - 图示 $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HFWxxTB8-1623748143575)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210615165909117.png)]$
  - 对象深拷贝
    - $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hPtiGoQz-1623748143576)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210615165913709.png)]$
  - 数组深拷贝
    - $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qIvavFsI-1623748143576)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210615165918250.png)]$

变量计算-类型转换

字符串拼接
- $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mxYE7A9W-1623748143577)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210615165928495.png)]$
==(双等)
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zK6k2YhK-1623748143578)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210615165935023.png)]$
- 在比较当中，其实会发生类型转换，转换规则如下 $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZFyn0U2y-1623748143578)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210615165940203.png)]$

if语句

两个概念
- truly 变量：经过 !! 运算后结果为 true 的变量
  falsely 变量：经过 !! 运算后结果为 false 的变量
除下面为 falsely 变量外，其他都是 truly 变量
- if语句中，其实就是默认调用 !! 判断()中的变量是 truly 变量还是 falsely 变量 $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pOlAKhS5-1623748143580)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210615165951320.png)]$
逻辑运算
- 逻辑与
  - 与(&&):两个都为true才是true $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x9BmUOGG-1623748143581)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210615170012948.png)]$
- 逻辑或
  - 或(||):一个是true都为true $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r4Slzm64-1623748143581)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210615170018299.png)]$
- !：逻辑非
- &&和||都是短路运算符，意思就是如果第一个操作数决定了结果，那么永远不会对第二个操作数求值
- 逻辑运算符的操作数如果都是布尔值，则返回值是布尔值
- 如果不是布尔值，则返回值也不是布尔值，而是其中的一个操作数
  
  -逻辑与(&&):如果操作数1是truely变量，则返回值是操作数2
  
  如果操作数是falsely变量，则返回值是操作数1本身
  
  -逻辑或(||):如果操作数1是truely变量，则返回值是操作数1
  
  如果操作数1是falsely变量，则返回值是操作数2
  - 举例 $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aBjQXDn4-1623748143582)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210615170209623.png)]$
  - 举例2 $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iMf0qbto-1623748143582)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210615170215061.png)]$
    - 传参进去转换成truely，&&前面是true没有办法决定结果，所以返回值是操作数2callback()，函数调用执行
    - 不穿参数进去则返回undefined，只有形参没有实参，&&来说前面是false，后面不管是true还是false都返回false，所以返回值是undefined
  - 练习
    - 答案是：{ x: 101, y: 200 } $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LjKdcr4E-1623748143583)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210615170226169.png)]$
      - 图示 $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zdjROGej-1623748143583)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210615170229946.png)]$

原型和原型链

举例 $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CmwB9JkC-1623748143584)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210615170238705.png)]$
- $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xwjvsc4Z-1623748143585)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210615170243218.png)]$
对象.proto 获取的是对象的对象原型，也叫隐式原型
类.prototype 获取的是类的原型对象，也叫显式原型
对象的隐式原型与类的显式原型是同一个对象，内存地址一致 $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EEpfxVJ9-1623748143585)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210615170251224.png)]$
图示：每个 class 都有显示原型 prototype
每个实例都有隐式原型 proto_
实例的 proto 指向对应 class 的 prototype $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lNHFXt0T-1623748143585)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210615170301005.png)]$
看xialuo这个对象里有没有sayHi这个函数，然后发现并没有 $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6ULlZ67S-1623748143586)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210615170307020.png)]$
- 获取属性或方法时，首先再对象的自身属性中查找，如上面 name 就是对象的自身属性
  如果找不到，则自动取 proto 中查找，如上面的 sayHi 方法，在对象中并没有，所以去对象的隐式原型上查找，见上图 $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5mw8aDl5-1623748143586)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210615170325665.png)]$
  - 查找eat方法的的查找顺序 $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sVDO3iI7-1623748143587)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210615170610207.png)]$
  - toString方法的查找顺序
    - 图示：所有 class 都是从 Object 继承的，也就式说 Object 式是其他类的原型 $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KDfxExCf-1623748143589)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210615170618734.png)]$
理解 instanceof
看 instanceof 后面的类，是否存在于 xialuo 原型链中某个隐式原型中

jQuery

js页面 $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uSlVIeTw-1623748143590)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210615170624541.png)]$
html页面 $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6gDKJ56O-1623748143590)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210615170630762.png)]$