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是只读属性
