JavaScript容易混淆的地方

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