JavaScript容易混淆的地方
2020-03-17 本文已影响0人
moyahuang
JavaScript容易混淆的地方
▶splice vs. slice vs. split 🍕
splice 删除或增加 (split分离+ice加料)
slice 拷贝部分（a slice of pizza)
split 切段返回数组
Array: splice/slice
splice用于增加或删除元素
- 参数含义：splice(起点序号，删除个数，有则增无则减)
- 起点序号可以为负，-i表示倒数第i个
- 返回值为被删除的元素数组，若删除个数为0则返回空数组
- splice比较特殊，会改变调用方法的对象(destructive object)！
slice用于拷贝部分
- 参数：slice(start, end) 拷贝范围不包括end，若不指定，则默认拷贝到数组最后
- 起点序号可以为负
- 不会改变原对象
String: slice/split
String的slice方法与数组类似，不再赘述。
split和join是两个相对的功能，前者用来切分对象，后者用来组合对象。
- 参数split/join('某字符')
- 不会改变原对象
▶call vs. apply vs. bind
call和apply是所有Function对象都会继承的方法，用于将对象和方法解耦合。
FunctionObj.call(thisArg, a, b, ...);
FunctionObj.apply(thisArg,[a,b,...])
- call和apply第一个参数都为运行时作用域（executing scope)，常常可以看到this用作第一个参数，而this具体指什么又是另外一个问题了
- call和apply唯一的区别在于，方法的参数列表在前者中是逐个传入（记忆：打电话要排队），而后者参数列表以数组方式传入
🌰来看一个栗子
function sum(a, b){
var s=a+b;
console.log(this.index+":"+s);
}
var counter={index:"ada"};
sum.call(counter, 1, 2);//ada:3
sum.apply(counter,[1,2]);//ada:3
bind和call, apply的区别在于，bind不会调用函数（从名字可以看出来），而是返回一个新函数（相当于把别的方法内容偷过来）。这个函数可以将参数thisArg预先绑定为运行时作用域，而不会受到函数调用方式的影响。
- bind的参数与call类似，bind(thisArg, a, b, ...)（记忆：捆绑电话是一家）
- 若不指定thisArg，则函数的运行时环境为其实际运行时环境
- 新函数如果和new使用，thisArg会被忽略
想要“激活”函数，就是在后面添加一对圆括号啦。
注意：偷来的方法的参数“绑定”时传入后无法被修改，这个特性可以用于预设一些参数，详情看下方延伸阅读。
🌰来看一个栗子
var a={
index:1,
func1: function(name){
console.log(this.index+":"+name);
}
}
var unboundedFunc=a.func1;//别的对象的方法也可以偷
unboundedFunc("hello");//undefined:hello（严格模式下）
var boundedFunc=unboundedFunc.bind(a,"hell");
boundedFunc("moya");//1:hell
延伸阅读：bind的使用场景
参考文档
https://medium.com/@jeanpan/javascript-splice-slice-split-745b1c1c05d2
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
