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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容