函数的属性和方法之call、apply 及bind

一、前言

　　ECMAScript中的函数是对象，因此函数也有属性和方法。每个函数都包含两个属性：length和prototype。每个函数也包含两个非继承来的方法：apply()和call(),还有一些继承而来的方法，比如valueOf()等。

二、函数属性：length、prototype

2.1、length

函数希望接收的命名参数的个数，如：

function sum(a,b){
   return a+b;
}
sum.length ; //2

function add(){

}
add.length; //0

2.2、prototype

　　它是保存所有实例方法的真正所在。比如toString()和valueOf()等方法都是保存在prototype名下，只不过是通过各自的对象的实例访问而已。在创建自定义引用类型和以及实现继承的时候，这个属性尤为重要。且这个属性是不可枚举的所以for in 访问不到，这个暂且不讲这个属性。

三、函数的方法： apply() 和call()

　　每个函数都包含这两个非继承而来的方法，都是Function.prototype的方法。用途都是在特定的作用域中调用函数。　　

都是用来改变函数的运行时的上下文对象（执行上下文），或者说是改变函数内部的this指向。

3.1、两者区别：

apply()方法接收两个参数，一个是在其中运行函数的作用域，一个是参数数组，（这个参数数组可以是Array的实例，也可以是类数组arguments；）

call()方法和apply()的作用相同，区别仅在于接收的参数的方式不一样，使用call时候参数必须逐个列举出来传给函数。

function sum(num1, num2){
　　return num1 + num2;
}

function callsum1(num1, num2){
     return sum.apply(this,arguments);   //return sum.apply(this, [sum1,sum2]);
}

function callsum2(num1, num2){
　　return sum.call(this,num1, num2);
}

当参数明确的时候，建议使用call，但传入的参数不明确的时候，或者是数组的时候，建议使用apply。

3.2、apply()和call()真正强大的地方：

扩充函数赖以运行的作用域，这就使得对象不需要和方法有任何耦合的关系。看如下demo.

var animal = {
    words:'......',
    speak:function(say){
        console.log(say + ' ' + this.words);
    }
}

var dog ={
  words: 'wang'
}
//dog没有say这个方法，但是可以通过call来调用aniaml的say方法。

animal.speak.call(dog, 'speak'); //dog就是call()这个方法的上下文，this指向了dog这个对象。

3.3、原生实现

Function.prototype.myCall = function (content) {
  console.log(typeof this);

  context = context || window;
  context.fn = this;
  const args = [...arguments].silce(1);
  const result = context.fn(...args);
  delete context.fn;

  return result;
}

　　

3.4、说明：

非严格条件下，call和apply的第一个参数为null、undefined、空 ，函数内的this指向windown（浏览器 ） 或global。
严格模式下，null是null，undefined和空 为undefined

　

四、bind()

　　ECMAScript 5 中定义了这个方法，这个方法会创建一个函数的实例，其中this值会被绑定到传给bind()函数的值。

因为在IE9以下不支持原生的bind函数，但是对apply是支持的，所以可以利用apply自定义bind函数，如下：

Function.prototype.myBind = function () {
  const _this = this; //保存调用bind的原函数
  const context = [].shift.call(arguments);//保存需要绑定的this上下文，就是第一个参数
  const args = [].slice.call(arguments);//剩余参数转为数组

  return function () {
    //我们将 bind 的其余参数和调用bind后返回的函数在执行的过程中接收的参数进行拼接，
    //作为一个数组传入apply的第二个参数中去。
    _this.apply(context, [].concat.call(args, [].slice.call(arguments)]);
  }
}

　　

在bind()中创建了一个闭包，闭包中使用apply()调用传入的函数，并给apply传递context和arguments参数（arguments对象是内部函数的，不是bind函数的），

当调用返回函数的时候，它会在给定的环境中执行被传入的函数，并给出所有的参数。这也是函数绑定的常用方法。

看看vue源码中是怎么自定义的bind的，感慨~~~ 一个优秀的框架真的要考虑很多啊：

五、bind vs call、apply

bind返回的是对应的函数，不会立即调用，而call、apply都是立即调用的。

下面的只是一个简单的例子，用来说明bind的用处，特别注意的是，定时器中的this如果不在执行函数中bind(this),则里面的this就会指向window,而不是当前创建的对象中。可以这么理解，setTimeout是window的，那么在执行函数的this也会指向Windows，除非bind(this)前置把里面函数的执行上下文改成当前对象。

var slider={
	LWIDTH:0,
	DURATION: 1000,
	WAIT:3000, //自动轮播之间的等待时间
	timer:null,    //保存一次性定时器序号
	canAuto:true,
	LHeight:60,
	init:function(){
		this.updateView();
		$(".slider").hover(
			function(){this.canAuto=false;}.bind(this),
			function(){this.canAuto=true;}.bind(this)
		)
		this.autoMove();//判断之后，调用自动执行函数
	},
	autoMove:function(){
		this.timer=setTimeout(
			function(){
				if(this.canAuto){
					this.move(1);
				}else{
					this.autoMove();
				}
			}.bind(this),
		);
	}
}

　　

六、应用场景

是不是经常遇到这样的用法？

Array.prototype.slice.call ( arguments);

或者是：
[].prototype.slice.apply（arguments）;

或者是：

function   isArray(obj){ 
    return Object.prototype.toString.call(obj) === '[object Array]' ;

}

或者是：

function(){XXXXXXx}.bind (this)；

jQuey中不也有bind方法么？

$('.XXX').bind('click',function(){});

6.1、利用apply传参数机制，在某些本来需要写成遍历数组变量的任务中使用内建的函数

定义一个 log 方法，让它可以代理 console.log 方法

function log(){
  console.log.apply(console, arguments);
};
log(1);    //1
log(1,2);    //1 2

6.2、Math.max/Math.min来找出一个数组中的最大/最小值。

var numbers = [2, 8, 4, 3, 1];
var max = Math.max.apply(null, numbers); //等价于：Math,max(2, 8, 4, 3, 1);
var min = Math.min.apply(null, numbers);  //同上

//es6中可以用数组的扩展运算符替代apply
Math.max(...numbers)

6.3、方便实现继承

function Animal(words){
    this.words = words;
    this.speak = function(){
       console.log(this.words);
    }
}    

function Dog(words){
    Anaimal.call(this, words);//或者Anmal.apply(this,, arguments)

}

var dog  = new Dog('wang');//这样实例的dog对象就有了Animal的speak方法了。

dog.speak();