[前端笔记017]JavaScript之arguments、call、apply、bind、this总结、解构赋值和JSON

资源

• 推荐zeal:离线文档查看器 https://zealdocs.org/
• 推荐w3c:线上文档 https://www.w3school.com.cn/
• 本笔记参考视频，李立超:BV1mG411h7aD
• 我的笔记：https://gitee.com/plusmile/stackedit-app-data.git

arguments

• arguments函数中除this外的又一隐含参数
• arguments是一个类数组对象，可以使用element，length等参数，可以像数组那样使用索引和for循环遍历，但不是数组对象，不能调用数组的方法。
• arguments用来存储函数的实参，无论是否定义形参，实参都会存在arguments对象中，可以通过该对象直接访问实参。
• 可以解决一些不确定参数的问题
• 但arguments不是数组，使用起来稍微麻烦点，所以可以使用可变参数代替。在形参的位置使用...可变参数名表示可变参数，可变参数名一般为args。
• 可变参数作用和arguments相同，可以接收任意数量的实参，并将它们存储在一个数组中返回，可以直接使用数组的方法。还有个优点，可以和普通的形参配合，把普通形参写在可变参数之前。
• 箭头函数无arguments

call和apply

• 除了函数()的调用方式，还有函数.call()和函数.apply()的方式调用。
• call和apply除了可以调用函数，还可以用来指定函数中的this，call和apply的第一个参数，将会成为函数的this
• call和apply传参时的区别，call调用函数时，函数的实参在第一个参数后列出来；apply调用函数时，函数的实参需要通过一个数组传递，apply(obj,[参数1,参数2])。

bind

• bind 是函数的方法，可以用来创建新的函数。
• bind可以为新函数绑定this，锁死this。
• bind可以为新函数绑定参数，可以把实参的值固定，调用新函数时实参会传给非绑定的参数。

this总结

• 所以有以下this总结：
  1. 以函数形式调用时fn()，this指向window对象；
  2. 以方法形式调用时obj.fn()，this指向的是调用方法的对象，obj；
  3. 构造函数中，this是新建的对象
  4. 箭头函数没有自己的this，他的this由他创建时的外层作用域决定，与他的调用方式无关，无法由call，apply，bind等更改
  5. call和apply调用函数函数时的第一个参数就是，函数的this
  6. 通过bind返回的函数，this由bind的第一个参数决定(无法修改)

解构赋值

• 数组的解构使用中括号 let [d,e,f,g]=arr，声明的同时，解构，分别赋值。超出的变量，默认赋值undefined。可以给变量赋默认值来避免undefined。变量不够时，可以使用…来获取多余的元素。
• 交换两个变量的可以使用解构赋值来快速完成，[a2,a1]=[a1,a2]
• 对象的解构使用大括号，接收的变量名，要与属性名对应，let {name,age}=obj，没有的属性赋值undefined；可以使用别名来绕开属性名必须对应的限制，let {name:a,age:b}=obj

对象的序列化

• 序列化指将对象转换为一个可以存储的格式，通常是字符串
• 对象转换为字符串后，可以在不同语言之间传递，写配置文件和作为交换格式。
• 使用工具类JSON（JavaScript object notation），进行序列化，成为JSON串
• 例： 对象转化为JSON字符串 const str=JSON.stringify(obj)
• JSON字符串 转化为 对象 const obj=JSON.parse(str)
• 手动编写JSON注意事项：1. 两种类型，JSON对象{}，JSON数组[]。2.字符串的属性名必须使用双引号引起来。3.可以使用的属性值：数字、字符串、布尔、空值、对象{}、数组[]；其他不能作为属性值。4.JS的最后一个属性后不要多写逗号.
• 先使用JSON.stringify转换为字符串，再使用JSON.parse转换位对象，完成深复制