call()\apply()\bind()备忘录

这几个玩意儿几乎看一次忘一次，每次用都要重新看一遍，还是理解的不够。本文对不做深入解释，只根据自己的理解对函数定义进行语义化说明。

1.call()

fun.call(context,arg1,arg2),其中arg1，arg2等可无

example:

<input type="text" id="el" value="input text">

function func(){
    alert(this.value);
}

var value = "global";
var ele = document.getElementById("el");

func(); // global
func.call(ele); //input text,这里将func上下文从this（window）替换为ele

 

2.apply()

func.apply(context,[arg1,arg2]),其中[]内容可无，作用与call()一致,传参方式不一致而已。

example:

func.call(ele,arg1,grg2);
func.apply(ele,[arg1,arg2]);

 3.bind()这是ECMAScript 5中的一个方法：bind()。这个方法会创建一个函数的实例，其this 值会被绑定到传给bind()函数的值。即bind()的实现思路如下：

Function.prototype.bind = function(obj) {
    var self= this, 
    return function() {
        return self.apply(obj, arguments);
    };
}

实际的具体实现过程中，应考虑arguments中除去obj，以及没有arguments的情况等。在《javascript权威指南》中对于bind有详尽的代码可以参阅。

example：

window.color = "red";
var o = { color: "blue" };
function sayColor(){
    alert(this.color);
}
var objectSayColor = sayColor.bind(o);
objectSayColor(); //blue

支持bind()方法的浏览器有：IE9+、Firefox 4+、Safari 5.1+、Opera 12+和Chrome。

 

题外话：《javascript高级程序设计》这本书的确比较适合初学者，但是的确有些东西讲的不清楚，比如闭包，比如立即执行，比如变量的提升，所以与《javascript权威指南》搭配着看再好不过。