这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了理解 javascript 中的 Function.prototype.bind 的方法, 具有一定参考价值,有兴趣的可以了解一下。
在初学 Javascript 时,我们也许不需要担心函数绑定的问题,但是当我们需要在另一个函数中保持上下文对象 this 时,就会遇到相应的问题了,我见过很多人处理这种问题都是先将 this 赋值给一个变量(比如 self、_this、that 等),尤其是 var that = this 是我见的最多的,这样当你改变环境之后就可以使用它。这些都是可以的,但是还有一种更好的、更专有的方法,那就是使用 Function.prototype.bind,下面进行详尽的讲解。
第一部分:需要解决的问题
首先看下面的代码
- var myObj = {
- specialFunction: function () {
- },
- anotherSpecialFunction: function () {
- },
- getAsyncData: function (cb) {
- cb();
- },
- render: function () {
- this.getAsyncData(function () {
- this.specialFunction();
- this.anotherSpecialFunction();
- });
- }
- };
- myObj.render();
这里我希望创建一个对象,包含了前面两个普通的方法;第三个方法可以传递一个函数,传入的这个函数立即执行;最后一个方法会调用 myObj 对象的 getAsyncData 方法,这里使用了 this,然后在 getAsyncData 方法中传入了一个函数,这个函数继续调用这个对象的前两个方法,仍使用了 this,这时很多人实际上就可以看出问题所在了,将上述代码输入控制台,得到下面的结果:
- TypeError: this.specialFunction is not a
- function
第二部分:问题剖析
在对象中 render 方法中的 this 的确是指向 myObj 对象的,所以我们可以通过 this.getAsyncData 来调用这个对象中的函数,但是当我们给其传递函数作为参数时,这里的 this 就指向了全局环境 window 了,因为全局环境中没有对象中的前两个方法,所以才会报错。
第三部分:解决问题的几种方式
所以我们需要做的就是正确调用对象中的前两个方法 ,很多人使用的方法便是首先在对象的环境中获取 this 赋值给另一个变量,这时就可以在后面的环境中调用了,如下所示:
- render: function () {
- var that = this;
- this.getAsyncData(function () {
- that.specialFunction();
- that.anotherSpecialFunction();
- });
- }
虽然这种方法是可行的,但是使用 Function.prototype.bind() 会使代码更清晰、易懂,如下所示:
- render: function () {
- this.getAsyncData(function () {
- this.specialFunction();
- this.anotherSpecialFunction();
- }.bind(this));
- }
这里我们就成功地把 this 绑定到了环境中。
下面是另外一个简单的例子:
- var foo = {
- x: 3
- }
- var bar = function(){
- console.log(this.x);
- }
- bar(); // undefined
- var boundFunc = bar.bind(foo);
- boundFunc(); // 3
下面的例子也是常见的:
- this.x = 9; // this refers to global "window" object here in the browser
- var module = {
- x: 81,
- getX: function() {
- return this.x;
- }
- };
- module.getX(); // 81
- var retrieveX = module.getX;
- retrieveX();
- // returns 9 - The function gets invoked at the global scope
- // Create a new function with 'this' bound to module
- // New programmers might confuse the
- // global var x with module's property x
- var boundGetX = retrieveX.bind(module);
- boundGetX(); // 81
第四部分:浏览器支持
但是这个方法在 IE8 及以下是不被支持的,所以我们可以使用 MDN 提供的方法来使得 IE 低版本支持. 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 () {
- return fToBind.apply(this instanceof fNOP && oThis
- ? this
- : oThis,
- aArgs.concat(Array.prototype.slice.call(arguments)));
- };
- fNOP.prototype = this.prototype;
- fBound.prototype = new fNOP();
- return fBound;
- };
- }
来源: http://www.phperz.com/article/17/0522/328088.html