call bind apply

1. call()

• this

var obj = {};

var f = function () {
  return this;
};

f() === window // true
f.call(obj) === obj // true

call方法的参数，应该是一个对象。
如果参数为空、null和undefined，正常模式下默认传入全局对象（window），严格模式下为undefined。
call方法可以改变this的指向，指定this指向对象obj。

var f = function () {
  return this;
};

f.call(5)    //Number {[[PrimitiveValue]]: 5}

若call方法的参数是一个原始值，那么这个原始值会转成对应的对象

• arguments

function add(a, b) {
  console.log(arguments[0]);
  console.log(arguments[1]);
}

add.call(this, 1, 2) // 1，2，第一个参数传给this，后面的都存入arguments对象

arguments是伪数组

2. apply()

apply方法的第一个参数用法和call一样，不同的是第二个参数必须是一个数组

function f(x, y){
  console.log(x + y);
}
f.apply(null, [1, 1]) // 2

所以利用这一点
（1）找出数组最大元素
JavaScript 不提供找出数组最大元素的函数。结合使用apply方法和Math.max方法，就可以返回数组的最大元素。

var a = [10, 2, 4, 15, 9];
Math.max.apply(null, a) // 15

(2)将数组的空元素变为undefined
通过apply方法，利用Array构造函数将数组的空元素变成undefined。

Array.apply(null, ['a', ,'b'])  
// [ 'a', undefined, 'b' ]

数组的forEach方法会跳过空元素，但是不会跳过undefined。

3. bind()

bind可以绑定this值

var d = new Date();
d.getTime() // 1481869925657

var print = d.getTime;
print() // Uncaught TypeError: this is not a Date object

这样会报错，可以像下面这样,将getTime内部的this绑定为d对象

var print = d.getTime.bind(d);
print() // 1481869925657

下面这样也是，将inc方法内部的this绑定到counter

var counter = {
   count: 0,
   inc: function () {
     this.count++;
   }
};

var func = counter.inc.bind(counter);
func();
counter.count // 1

还可以绑定其他对象

var counter = {
   count: 0,
   inc: function () {
      this.count++;
   }
};

var obj = {
   count: 100
};
var func = counter.inc.bind(obj);
func();
obj.count // 101

bind还可以绑定原函数的参数

var add = function (x, y) {
   return x * this.m + y * this.n;
}

var obj = {
  m: 2,
  n: 2
};

var newAdd = add.bind(obj, 5);  //5相当于绑定了add函数里的x
newAdd(5) // 20，这个5相当于add函数里y

若bind第一个对象为null，等于将this绑定到全局对象（window）

---

call和apply的用途

(javascript设计模式与开发实践)

1.改变this的指向

call和apply最常见的用途就是改变函数内部的this指向，我们来看个例子：

var obj1 = {
    name: 'sven'
}
var obj2 = {
    name: 'anne'
}

window.name = 'window';

var getName = function () {
    alert(this.name);
}
getName(); //输出： window
getName.call(obj1) //输出： sven
getName.call(obj2) //输出： anne

当执行getName.call(obj)这句代码时，getName函数体内的this指向obj1对象，所以此处的

var getName = function () {
    alert(this.name);
}

实际相当于

var getName = function () {
    alert(obj1.name);
}

在实际开发中，经常遇到this指向被不经意改变的场景，比如有一个div节点，div节点的onclick事件中的this本来指向这个div的：

document.getElementById('div1').onclick = function () {
    alert(this.id); //输出:div1
}

假如该事件函数中有一个内部函数func,在事件内部调用func函数时，func函数体内部的this就指向了window,而不是我们预期的div,见如下代码

document.getElementById('div1').onclick = function () {
    alert(this.id); //输出：undefined
    var func = function () {
        alert(this.id); //输出：undefined
    }
}
这时我们用call来修正func函数里面的this, 使其依然指向div
:
document.getElementById('div1').onclick = function () {
    var func = function () {
        alert(this.id); //输出: div1
    }
    func.call(this)
};

也可以修改内部document.getElementById()函数的内部"丢失"的this,代码如下：

document.getElementById = (function (func) {
    return function () {
        return func.apply(document, arguments);
    }
})(document.getElementById);
var getId = document.getElementById;
var div1 = getId('div1')
alert(div.id);//输出：div1

2.Function.prototype.bind

大部分高级浏览器都实现内置的Function.prototype.bind，用来指定函数内部this的指向，即使没有原生的Function.prototype.bind实现，
我们也可以模拟一个，代码如下：

Function.prototype.bind = function (context) {
    var self = this;//保存原函数   function(){ alert this.name }
    return function () {  //返回一个函数
        return self.apply(context, arguments); //当执行新的函数时，会把之前传入的context当做新函数体内的this
    }
}
var obj = {
    name: 'sven'
}

var func=function () {
    alert(this.name);
}.bind(obj);
func();

在Function.protoype.bind的内部实现中，我们先把func函数的引用保存起来，然后返回一个新的函数，当我们在将来执行func函数时，实际上先执行的是刚刚返回的新函数。在新函数的内部，self.apply(context,arguments)这句代码才是执行原来的func函数体内的this

这是一个简化版的Function.prototype.bind,一般我们会往func函数加入一些参数

Function.prototype.bind = function () {
    var self = this;//保存原函数   function(){ alert this.name }
    context=[].shift.call(arguments)
    args=[].slice.call(arguments)
    return function () {  //返回一个函数
        return self.apply(context, [].concat.call(args,[].slice.call(arguments))); //当执行新的函数时，会把之前传入的context当做新函数体内的this
    }
}
var obj = {
    name: 'sven'
}

var func=function (a,b,c,d) {
    alert(this.name);
    alert([a,b,c,d])
}.bind(obj,1,2);
func(3,4);

3.借用其他对象的方法

借用方法的第一种场景是"借用构造函数",通过这种技术，可以实现一些类似继承的效果

    var A = function (name) {
        this.name=name;
    }
    var B=function () {
        A.apply(this,arguments);
    }
    B.prototype.getName=function () {
        return this.name
    }
    var b=new B('sven');
    console.log(b.getName()); //输出:'sven'

借用方法的第二种运用场景跟我们的关系密切相关
函数的参数列表arguments是一个类数组对象，虽然有下标，但是不能使用数组的方法，所以我们常常会借用Array.prototype对象上的方法

(function () {
    Array.prototype.push.call(arguments,3)
    console.log(arguments); //输出[1,2,3]
})(1,2);

    var a={}
    Array.prototype.push.call(a,'first');
alert(a.length); //输出：1
alert(a[0]) //first

借用对象满足的条件

• 对象本身可以存取属性
• 对象的length属性可读写

    var a=1;    
    Array.prototype.push.call(a,'first')
    alert(a.length); //输出：undefined
    alert(a[0]) //undefined

number类型的数据就不可能使用Array.prottype.push

var func=function () {
    
};
Array.prototype.push.call(func,'first')
alert(func.length); //报错

函数的length是只读属性