一、call() 方法
call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。语法格式 fun.call(thisArg[,arg1[, arg2[, ...]]])参数说明 1）thisArg 在 fun 函数运行时指定的 this 值。需要注意的是，指定的 this 值并不一定是该函数执行时真正的 this 值，如果这个函数在非严格模式下运行，则指定为 null 和 undefined 的 this 值会自动指向全局对象（浏览器中就是 window 对象），同时值为原始值（数字，字符串，布尔值）的 this 会指向该原始值的自动包装对象 2）arg1, arg2, … 指定的参数列表返回值 使用调用者提供的 this 值和参数调用该函数的返回值。若该方法没有返回值，则返回 undefined描述 1）call() 允许为不同的对象分配和调用属于一个对象的函数/方法 2）call() 提供新的 this 值给当前调用的函数/方法。你可以使用 call 来实现继承：写一个方法，然后让另外一个新的对象来继承它（而不是在新对象中再写一次这个方法）实例说明 1）使用 call 方法调用父构造函数 代码如下： function Product(name, price) { this.name = name; this.price = price; } function Food(name, price) { Product.call(this, name, price); this.category = 'food'; } function Toy(name, price) { Product.call(this, name, price); this.category = 'toy'; } var cheese = new Food('feta', 5); var fun = new Toy('robot', 40);2）使用 call 方法调用匿名函数 代码如下：
var animals = [ { species: 'Lion', name: 'King' }, { species: 'Whale', name: 'Fail' } ]; for (var i = 0; i < animals.length; i++) { (function(i) { this.print = function() { console.log('#' + i + ' ' + this.species + ': ' + this.name); } this.print(); }).call(animals[i], i); }3）使用 call 方法调用函数并且指定上下文的 “this” 代码如下：
function greet() { var reply = [this.animal, 'typically sleep between', this.sleepDuration].join(' '); console.log(reply); } var obj = { animal: 'cats', sleepDuration: '12 and 16 hours' }; greet.call(obj); // cats typically sleep between 12 and 16 hours4）使用 call 方法调用函数并且不指定第一个参数（argument） 代码如下：
var sData = 'Wisen'; function display() { console.log('sData value is %s ', this.sData); } display.call(); // sData value is Wisen5）在严格模式下，this 的值将会是 undefined 代码如下：
'use strict'; var sData = 'Wisen'; function display() { console.log('sData value is %s ', this.sData); } display.call(); // Cannot read the property of 'sData' of undefined二、apply()方法
apply() 方法调用一个具有给定this值的函数，以及作为一个数组（或类似数组对象）提供的参数。call()方法的作用和 apply() 方法类似，区别就是call()方法接受的是参数列表，而apply()方法接受的是一个参数数组。语法格式 fun.apply(thisArg[, argsArray])参数说明 1）thisArg 可选的，在 func 函数运行时使用的 this 值。请注意，this可能不是该方法看到的实际值：如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动替换为指向全局对象，原始值会被包装。 2）argsArray 可选的，一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 func 函数。如果该参数的值为 null 或 undefined，则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象。返回值 调用有指定this值和参数的函数的结果描述 1）在调用一个存在的函数时，你可以为其指定一个 this 对象。 this 指当前对象，也就是正在调用这个函数的对象。 使用 apply， 你可以只写一次这个方法然后在另一个对象中继承它，而不用在新对象中重复写该方法。 2）apply 与 call() 非常相似，不同之处在于提供参数的方式。apply 使用参数数组而不是一组参数列表。apply 可以使用数组字面量（array literal），或数组对象。 3）可以使用 arguments对象作为 argsArray 参数， arguments 是一个函数的局部变量。 它可以被用作被调用对象的所有未指定的参数。 这样，你在使用apply函数的时候就不需要知道被调用对象的所有参数。 你可以使用arguments来把所有的参数传递给被调用对象 ，被调用对象接下来就负责处理这些参数。 4）可以使用任何种类的类数组对象，就是说只要有一个 length 属性和(0…length-1)范围的整数属性，但是Chrome 14 以及 Internet Explorer 9 仍然不接受类数组对象。如果传入类数组对象，它们会抛出异常。实例说明 1）用 apply 将数组添加到另一个数组 代码如下： var array = ['a', 'b']; var elements = [0, 1, 2]; array.push.apply(array, elements); console.info(array); // ["a", "b", 0, 1, 2]2）使用apply和内置函数 代码如下：
/* 找出数组中最大/小的数字 */ var numbers = [5, 6, 2, 3, 7]; /* 应用(apply) Math.min/Math.max 内置函数完成 */ var max = Math.max.apply(null, numbers); /* 基本等同于 Math.max(numbers[0], ...) 或 Math.max(5, 6, ..) */ var min = Math.min.apply(null, numbers); /* 代码对比： 用简单循环完成 */ max = -Infinity, min = +Infinity; for (var i = 0; i < numbers.length; i++) { if (numbers[i] > max) max = numbers[i]; if (numbers[i] < min) min = numbers[i]; }3）使用apply来链接构造器 代码如下：
Function.prototype.construct = function (aArgs) { var oNew = Object.create(this.prototype); this.apply(oNew, aArgs); return oNew; };4）替换Object.create()方法 a. Using Object.proto 代码如下：
Function.prototype.construct = function (aArgs) { var oNew = {}; oNew.__proto__ = this.prototype; this.apply(oNew, aArgs); return oNew; };b. 使用闭包 代码如下：
Function.prototype.construct = function(aArgs) { var fConstructor = this, fNewConstr = function() { fConstructor.apply(this, aArgs); }; fNewConstr.prototype = fConstructor.prototype; return new fNewConstr(); };c. 使用 Function 构造器 代码如下：
Function.prototype.construct = function (aArgs) { var fNewConstr = new Function(""); fNewConstr.prototype = this.prototype; var oNew = new fNewConstr(); this.apply(oNew, aArgs); return oNew; };三、bind()方法
bind()方法创建一个新的函数，在调用时设置this关键字为提供的值。并在调用新函数时，将给定参数列表作为原函数的参数序列的前若干项。语法格式 fun.bind(thisArg[, arg1[, arg2[, ...]]])参数说明 1）thisArg 调用绑定函数时作为this参数传递给目标函数的值。 如果使用new运算符构造绑定函数，则忽略该值。当使用bind在setTimeout中创建一个函数（作为回调提供）时，作为thisArg传递的任何原始值都将转换为object。如果bind函数的参数列表为空，执行作用域的this将被视为新函数的thisArg。 2）arg1, arg2, … 当目标函数被调用时，预先添加到绑定函数的参数列表中的参数。返回值 返回一个原函数的拷贝，并拥有指定的this值和初始参数。描述 1）bind() 函数会创建一个新绑定函数（bound function，BF）。绑定函数是一个exotic function object（怪异函数对象，ECMAScript 2015中的术语），它包装了原函数对象，调用绑定函数通常会导致执行包装函数。 2）绑定函数的内部属性 a. [[BoundTargetFunction]] - 包装的函数对象 b. [[BoundThis]] - 在调用包装函数时始终作为this值传递的值 c. [[BoundArguments]] - 列表，在对包装函数做任何调用都会优先用列表元素填充参数列表 d. [[Call]] - 执行与此对象关联的代码，通过函数调用表达式调用，内部方法的参数是一个this值和一个包含通过调用表达式传递给函数的参数的列表 3）绑定函数也可以使用new运算符构造，它会表现为目标函数已经被构建完毕了似的，提供的this值会被忽略，但前置参数仍会提供给模拟函数。实例说明： 1）创建绑定函数 代码如下： this.x = 9; // 在浏览器中，this指向全局的 "window" 对象 var module = { x: 81, getX: function() { return this.x; } }; module.getX(); // 81 var retrieveX = module.getX; retrieveX(); // 返回9 - 因为函数是在全局作用域中调用的 // 创建一个新函数，把 'this' 绑定到 module 对象 // 新手可能会将全局变量 x 与 module 的属性 x 混淆 var boundGetX = retrieveX.bind(module); boundGetX(); // 812）偏函数 代码如下：
function list() { return Array.prototype.slice.call(arguments); } function addArguments(arg1, arg2) { return arg1 + arg2 } var list1 = list(1, 2, 3); // [1, 2, 3] var result1 = addArguments(1, 2); // 3 // 创建一个函数，它拥有预设参数列表。 var leadingThirtysevenList = list.bind(null, 37); // 创建一个函数，它拥有预设的第一个参数 var addThirtySeven = addArguments.bind(null, 37); var list2 = leadingThirtysevenList(); // [37] var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3] var result2 = addThirtySeven(5); // 37 + 5 = 42 var result3 = addThirtySeven(5, 10); // 37 + 5 = 42 ，第二个参数被忽略3）配合 setTimeout 代码如下：
function LateBloomer() { this.petalCount = Math.ceil(Math.random() * 12) + 1; } // 在 1 秒钟后声明 bloom LateBloomer.prototype.bloom = function() { window.setTimeout(this.declare.bind(this), 1000); }; LateBloomer.prototype.declare = function() { console.log('I am a beautiful flower with ' + this.petalCount + ' petals!'); }; var flower = new LateBloomer(); flower.bloom(); // 一秒钟后, 调用'declare'方法4）作为构造函数使用的绑定函数 代码如下：
function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function() { return this.x + ',' + this.y; }; var p = new Point(1, 2); p.toString(); // '1,2' var emptyObj = {}; var YAxisPoint = Point.bind(emptyObj, 0/*x*/); // 以下这行代码在 polyfill 不支持， // 在原生的bind方法运行没问题: //(译注：polyfill的bind方法如果加上把bind的第一个参数，即新绑定的this执行Object()来包装为对象，Object(null)则是{}，那么也可以支持) var YAxisPoint = Point.bind(null, 0/*x*/); var axisPoint = new YAxisPoint(5); axisPoint.toString(); // '0,5' axisPoint instanceof Point; // true axisPoint instanceof YAxisPoint; // true new Point(17, 42) instanceof YAxisPoint; // true5）快捷调用 代码如下：
var unboundSlice = Array.prototype.slice; var slice = Function.prototype.apply.bind(unboundSlice); // ... slice(arguments);6）在没有内置实现支持的环境中也可以部分地使用bind 代码如下：
if (!Function.prototype.bind) { Function.prototype.bind = function(oThis) { if (typeof this !== 'function') { // closest thing possible to the ECMAScript 5 // internal IsCallable function throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable'); } var aArgs = Array.prototype.slice.call(arguments, 1), fToBind = this, fNOP = function() {}, fBound = function() { // this instanceof fBound === true时,说明返回的fBound被当做new的构造函数调用 return fToBind.apply(this instanceof fBound ? this : oThis, // 获取调用时(fBound)的传参.bind 返回的函数入参往往是这么传递的 aArgs.concat(Array.prototype.slice.call(arguments))); }; // 维护原型关系 if (this.prototype) { // Function.prototype doesn't have a prototype property fNOP.prototype = this.prototype; } // 下行的代码使fBound.prototype是fNOP的实例,因此 // 返回的fBound若作为new的构造函数,new生成的新对象作为this传入fBound,新对象的__proto__就是fNOP的实例 fBound.prototype = new fNOP(); return fBound; }; }四、call()、apply()和bind() 方法的总结
call() 、apply()可以看作是某个对象的方法，通过调用方法的形式来间接调用函数，bind() 就是将某个函数绑定到某个对象上。call() 方法的第二个参数是允许传递参数列表，而apply()方法的第二个参数必须是数组，也可以是类数组对象，但是在传递给调用函数的时候，是以参数列表的形式进行传递的。call()和apply()方法会对目标函数自动执行，从而导致它无法在事件绑定函数中使用。事件绑定函数不需要我们手动执行，它是在事件被触发时由JS内部自动执行的，但是bind()方法可以在实现改变函数this的同时又不会自动执行目标函数， 举例： var obj6 = {name:"张三"}; // 张三 p1 p2 bind()不会立即执行，需要点击页面，然后控制台才会输出，可作为事件绑定函数 document.addEventListener("click",EventClick.bind(obj6,"p1","p2"),false); // 张三 p1 p2 call()方法会自动立即执行，一打开控制台之间输出 // document.addEventListener("click",EventClick.call(obj6,"p1","p2"),false); function EventClick(a,b){ console.log(this.name,a,b); }说明：在绑定事件监听函数以后，使用call()方法，在打开浏览器执行以后，控制台会自动输出值，绑定的事件监听函数失效了。但是在使用bind()方法，在打开浏览器执行以后，控制台不会自动输出值，当点击页面以后，事件监听函数生效，控制台才会输出值。
