js arguments call apply bind array.from array.of 简单实用

一个进程中的回退—查漏补缺
这段代码看的不太明确？没事，最后回头再看

function doSomething(){
    console.log(arguments);
    // var arg = [].slice.call(arguments);
    // console.log(arg);
    //与下面同义，将类数组对象转为数组
    var args = Array.prototype.slice.call(arguments);
    console.log(args);
    args.push("hj");
    console.log(args);
    return args;
}
doSomething(1,2,3)

1、Array.from 与 Array.of
Array.from将类数组转为数组，可接受三个参数：

• input: 你想要转换的类似数组对象和可遍历对象
• map: 类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回 的数组
• context: 绑定map中用到的this

Array.of(v1, v2, v3)将一系列值转为数组
参数的类型和数量都不重要，随便都能接受

2、arguments
arguments 是传递给函数的参数的类数组对象（只有length属性和索引元素）

function func1(a, b, c) {
  console.log(arguments[0]);
  // expected output: 1

  console.log(arguments[1]);
  // expected output: 2

  console.log(arguments[2]);
  // expected output: 3
}

func1(1, 2, 3);

3、function.call
方法重用，能够编写在不同对象上使用的方法 通过 call()，能够使用属于另一个对象的方法

函数是对象方法
在 JavaScript 中，函数是对象的方法
如果一个函数不是 JavaScript 对象的方法，那么它就是全局对象的方法（函数）
（换种说法：基本数据类型是没有函数的，函数可以认为是对象，因为函数是对象的方法）

var person = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}
var person1 = {
    firstName:"Bill",
    lastName: "Gates",
}
var person2 = {
    firstName:"Steve",
    lastName: "Jobs",
}
person.fullName.call(person1);  // 将返回 "Bill Gates"

通过call，让person1使用了属于person的fullName方法

看到这里就可以看懂上述代码了

---

接下来为apply，call，bind区别和用法（可以只看总结）
apply，call 最主要的作用：改变this的指向
它们都可以改变函数执行时的上下文，也就是让一个对象使用另一个对象的方法，并立刻执行
区别：参数写法不同
funtion.call

Function.call(obj,[param1[,param2[,…[,paramN]]]])

function func (a,b,c) {}

func.call(obj, 1,2,3)
// func 接收到的参数实际上是 1,2,3

func.call(obj, [1,2,3])
// func 接收到的参数实际上是 [1,2,3],undefined,undefined

• 必须是函数 Function调用 call
• call 的第一个参数，是使用function的对象。 Function 的调用者，将会指向这个对象。如果不传，则默认为全局对象 window。
• 第二个参数开始，可以接收任意个参数。每个参数会映射到相应位置的 Function 的参数上。但是如果将所有的参数作为数组传入，它们会作为一个整体映射到 Function 对应的第一个参数上，之后参数都为空。

Function.apply

Function.apply(obj[,argArray])

func.apply(obj, [1,2,3])
// func 接收到的参数实际上是 1,2,3

func.apply(obj, {
    0: 1,
    1: 2,
    2: 3,
    length: 3
})
// func 接收到的参数实际上是 1,2,3

• 必须是函数 Function调用apply ，并且只接收两个参数，第一个参数的规则与 call 一致。
• 第二个参数，必须是数组或者类数组对象（只有角标和length属性），它们会被转换成类数组对象，传入 Function 中，并且会被映射到 Function 对应的参数上。这也是 call 和 apply 之间，很重要的一个区别

总结：
相同：都可以让一个对象使用另一个对象的方法并立刻执行
不同：参数写法不同。call要求更高，参数一对一传递。apply更厉害一些，会让参数自动对应起来

使用场景
call
1、对象继承 2、借用方法（如让类数组使用数组的方法）

let domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));
//getElementsByTagName("*")会返回所有元素的列表

apply
1、Math.max-用它来获取数组中最大的一项

let max = Math.max.apply(null, array);

2、实现两个数组合并

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

Array.prototype.push.apply(arr1, arr2);
console.log(arr1); // [1, 2, 3, 4, 5, 6]

bind的使用
bind() 方法创建一个新的函数，在调用时设置 this 关键字为提供的值。并在调用新函数时，将给定参数列表作为原函数的参数序列的前若干项。

Function.bind(thisArg[, arg1[, arg2[, ...]]])

function add (a, b) {
    return a + b;
}

function sub (a, b) {
    return a - b;
}
//让sub使用add方法
add.bind(sub, 5, 3); // 这时，并不会返回 8，因为bind返回函数
add.bind(sub, 5, 3)(); // 调用后，返回 8

bind 方法 与 apply 和 call 比较类似，也能改变函数体内的 this 指向。不同的是，bind 方法的返回值是函数，并且需要稍后调用，才会执行。而 apply 和 call 则是立即调用。（也就是说bind需要多加个括号才能执行，而call和apply不用加）
如果 bind 的第一个参数是 null 或者 undefined，this 就指向全局对象 window。

再总结：call,apply,bind
相同：都是让一个对象可以使用另一个对象的方法
不同：bind需要加括号才能执行因为返回值为函数而call,apply不用
参数写法：bind和call类似需一对一，apply可自己对应