JS 的上下文调用模式

上下文调用模式也叫方法借用模式，分为apply与call

call方法可以调用一个函数，并且可以指定这个函数的this指向

所有的函数都可以使用call进行调用
参数1：指定函数的this，如果不传，则this指向window
其余参数：和函数的参数列表一模一样。
 call方法也可以和()一样，进行函数调用，call方法的第一个参数可以指定函数内部的this指向。

     fn.call(thisArg, arg1, arg2, arg2);

- 借用对象的方法

伪数组与数组

1. 伪数组其实就是一个对象，但是跟数组一样，伪数组也会有length属性，也有0,1,2,3等属性。
2. 伪数组并没有数组的方法，不能使用push/pop等方法
3. 伪数组可以跟数组一样进行遍历，通过下标操作。
4. 常见的伪数组：arguments、document.getElementsByTagName的返回值、jQuery对象

var arrF = {
  0:"嘻嘻",
  1:"哈哈",
  2:"呵呵",
  length:3
}
//这就模仿了数组，就是伪数组可以和数组一样进行遍历

- 伪数组借用数组的方法

Array.prototype.push.call(arrF, "哼");
Array.prototype.join.call(arrF, "哈");

- 将伪数组转换成真数组

var arr = Array.prototype.slice.call(arrLike);

apply方法

apply()方法的作用和 call()方法类似，只有一个区别，就是apply()方法接受的是一个包含多个参数的数组。而call()方法接受的是若干个参数的列表

call和apply的使用场景：

如果参数比较少，使用call会更加简洁
如果参数存放在数组中，使用apply会更方便

    如下例

    1. 求数组的最大值和最小值
   var arr = [12, 23, 34, 45, 56, 67, 78, 89, 90];
    var result = Math.max.apply(null, arr); //apply可以直接传入一个数组
    var res = Math.max.call(null, 12, 23, 34, 45, 56, 67, 78, 89, 90);//注意参数
    console.log(Math.__proto__);  //MAth的构造函数就是Object
    console.dir(Math);
    console.dir(arr);
    console.log(result);


    2. 封装一个函数，能够打印出来所有的参数。
       // 函数调用的时候，实参个数不一定，所以形式参数不能确定
    function getConsole() {
      console.log.apply(null, arguments);
    }
    getConsole("xixi", "haha", "hehe", "heihei");

bind方法

bind()方法创建一个新的函数, 可以绑定新的函数的this指向

//返回值：新的函数
//参数：新函数的this指向，当绑定了新函数的this指向后，无论使用何种调用模式，this都不会改变。
var newFn = fn.bind(window);

JS 的上下文调用模式

猜你喜欢