為什么需要bind

var name = "The Window"; var object = {name: "My Object",getNameFunc: function () {return function () {return this.name;}} };alert(object.getNameFunc()()); //"The Window"

object.getNameFunc()返回一個(gè)匿名函數(shù),在全局環(huán)境調(diào)用該函數(shù)，this指向的全局對(duì)象

解決這一問(wèn)題，可以像下面這樣，將匿名函數(shù)外部作用域中this對(duì)象保存在閉包能夠訪問(wèn)到的變量中

var name = "The Window"; var object = {name: "My Object",getNameFunc: function () {var that = this;return function () {return that.name;}} };alert(object.getNameFunc()()); //"My Object"

上述解決方法需要修改對(duì)象的方法，如果不能修改原對(duì)象的方法，該如何做呢？

這時(shí)，我們可以像下面這樣，使用apply或call方法指定函數(shù)的作用域

var name = "The Window"; var object = {name: "My Object",getNameFunc: function () {return function () {return this.name;}} }; var func=object.getNameFunc(); alert(func.apply(object)); //"My Object"

通過(guò)apply、call，已經(jīng)可以輸出預(yù)期的My Object

但是，每次調(diào)用時(shí)都需要以func.apply(object)的形式調(diào)用，這不是很怪么

理想的調(diào)用方式，當(dāng)然是在通過(guò)某種處理后，之后可以以func()形式調(diào)用，像下面這樣

var name = "The Window"; var object = {name: "My Object",getNameFunc: function () {return function () {return this.name;}} }; var func=object.getNameFunc(); func=func.bind(object); alert(func()); //"My Object"

ECMAScript 5中的bind

?ECMAScript 5定了了bind方法，這個(gè)方法會(huì)創(chuàng)建一個(gè)函數(shù)實(shí)例，其this值會(huì)被綁定到傳給bind函數(shù)的值，上面代碼給出了bind函數(shù)的使用方式，再給一個(gè)簡(jiǎn)單示例。

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

雖然大部分瀏覽器中已經(jīng)可以使用ECMAScript 5定義的這個(gè)方法，但在少數(shù)不支持的瀏覽器中你還是會(huì)遇到兼容性問(wèn)題，這是如何處理呢？

通過(guò)上面apply、call方法使用示例 ，可以像下面這樣提供一個(gè)解決方案

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

Prototype.js中的bind

// The .bind method from Prototype.js Function.prototype.bind = function(){ var fn = this, args = Array.prototype.slice.call(arguments), object = args.shift(); return function(){ return fn.apply(object, args.concat(Array.prototype.slice.call(arguments))); }; };

?上述代碼中，

args=Array.prototype.slice.call(arguments)將調(diào)用bind函數(shù)時(shí)參數(shù)集合arguments轉(zhuǎn)換為數(shù)組array

object=args.shift()將args數(shù)組第一個(gè)元素取出作為當(dāng)前對(duì)象

匿名函數(shù)中，調(diào)用args.concat(Array.prototype.slice.call(arguments))是為了將調(diào)用匿名函數(shù)時(shí)傳入的參數(shù)與調(diào)用bind時(shí)參數(shù)合并成一個(gè)參數(shù)數(shù)組

以一個(gè)調(diào)用示例來(lái)看上述過(guò)程

var obj = { x: 'prop x' };
//args = Array.prototype.slice.call(arguments)后args = [obj, 12, 23 ]
//object=args.shift()后，args =[12, 23] ，object =obj

var boundExample = example.bind(obj, 12, 23); boundExample(36, 49); // arguments => 36, 49 ,調(diào)用args.concat(Array.prototype.slice.call(arguments))后，arguments that our example() function receives => [12, 23, 36, 49]

Firefox中的bind

if (!Function.prototype.bind) {Function.prototype.bind = function (oThis) {if (typeof this !== "function") {// closest thing possible to the ECMAScript 5 internal IsCallable functionthrow 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 () {return fToBind.apply(this instanceof fNOP && oThis? this: oThis || window,aArgs.concat(Array.prototype.slice.call(arguments)));};fNOP.prototype = this.prototype;fBound.prototype = new fNOP();return fBound;}; }

Firefox為bind提供了一個(gè)兼容實(shí)現(xiàn)，主要代碼與prototype.js中實(shí)現(xiàn)類似，不再逐句解釋了

?

轉(zhuǎn)載于:https://www.cnblogs.com/GongQi/p/4041460.html

總結(jié)

以上是生活随笔為你收集整理的《Javascript高级程序设计》读书笔记之bind函数详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。