美文网首页
JavaScript容易混淆的地方

JavaScript容易混淆的地方

作者: moyahuang | 来源:发表于2020-03-17 22:56 被阅读0次

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

相关文章

  • JavaScript容易混淆的地方

    JavaScript容易混淆的地方 ▶splice vs. slice vs. split ? splice 删除...

  • bind的使用场景

    bind的使用场景 文章JavaScript容易混淆的地方提到了bind最简单的应用是用于绑定方法的运行时作用域。...

  • JavaScript中的for...in 、for...of、f

    初学javaScript的时候,我们总是容易混淆对于数组和对象的遍历方法。js中循环语句有forEach,for ...

  • prototype和__proto__

    1、背景 JavaScript的原型是一个很让人头疼的事情,一来prototype容易与__proto__混淆,二...

  • 学习JS的思维技巧

    学习 JavaScript , 或者其他编程技术的时候,常常会遇到同样的挑战: 有些概念容易混淆,特别是当你学习过...

  • 傻傻分不清的javascript运行机制

    学习到javascript的运行机制时,有几个概念经常出现在各种文章中且容易混淆。Execution Contex...

  • 原形,原形链关系

    对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与proto混淆,二来它...

  • 三张图搞懂JavaScript的原型对象与原型链

    对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与proto混淆,二来它...

  • js运算符

    目录: 实战部分 拓展介绍 比较容易弄混淆的地方新手 经常容易 &和&&,|和|| 分不清楚 一、实战介绍 || ...

  • JavaScript的this详解

    作为一只自学javascript的菜鸟,this关键字是比较容易让我混淆的。 按照惯例,发下在学习this关键字中...

网友评论

      本文标题:JavaScript容易混淆的地方

      本文链接:https://www.haomeiwen.com/subject/qwcfyhtx.html