JavaScript中的prototype.bind()方法介绍


Posted in Javascript onApril 04, 2014

以前,你可能会直接设置self=this或者that=this等等,这样做当然也能起作用,但是使用Function.prototype.bind()会更好,看上去也更专业。
下面举个简单的例子:

var myObj = {
    specialFunction: function () {
    },
    anotherSpecialFunction: function () {
    },
    getAsyncData: function (cb) {
        cb();
    },
    render: function () {
        var that = this;
        this.getAsyncData(function () {
            that.specialFunction();
            that.anotherSpecialFunction();
        });
    }
};
myObj.render();

在这个例子中,为了保持myObj上下文,设置了一个变量that=this,这样是可行的,但是没有使用Function.prototype.bind()看着更整洁:
render: function () {
    this.getAsyncData(function () {
        this.specialFunction();
        this.anotherSpecialFunction();
    }.bind(this));
}

在调用.bind()时,它会简单的创建一个新的函数,然后把this传给这个函数。实现.bind()的代码大概是这样的:

Function.prototype.bind = function (scope) {
    var fn = this;
    return function () {
        return fn.apply(scope);
    };
}

 

下面在看一个简单的使用Function.prototype.bind()的例子:

var foo = {
    x: 3
};var bar = function(){
    console.log(this.x);
};
bar(); // undefined
var boundFunc = bar.bind(foo);
boundFunc(); // 3

 

是不是很好用呢!不过遗憾的是IE8及以下的IE浏览器并不支持Function.prototype.bind()。支持的浏览器有Chrome 7+,Firefox 4.0+,IE 9+,Opera 11.60+,Safari 5.1.4+。虽然IE 8/7/6等浏览器不支持,但是Mozilla开发组为老版本的IE浏览器写了一个功能类似的函数,代码如下:

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;
  };
}
Javascript 相关文章推荐
通过隐藏option实现select的联动效果
Nov 10 Javascript
JQuery插件Style定制化方法的分析与比较
May 03 Javascript
JavaScript的事件绑定(方便不支持js的时候)
Oct 01 Javascript
jquery自动将form表单封装成json的具体实现
Mar 17 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
Dec 13 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
Feb 19 Javascript
你真的了解BOM中的history对象吗
Feb 13 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 Javascript
JS实现留言板功能[楼层效果展示]
Dec 27 Javascript
利用JS实现一个同Excel表现的智能填充算法
Aug 13 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
Aug 01 Javascript
Vue中fragment.js使用方法小结
Feb 17 Javascript
jQuery使用ajaxSubmit()提交表单示例
Apr 04 #Javascript
深入理解javascript的执行顺序
Apr 04 #Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 #Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
Apr 04 #Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
Apr 04 #Javascript
javascript中的循环语句for语句深入理解
Apr 04 #Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
Apr 04 #Javascript
You might like
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
javascript 面向对象思想 附源码
2009/07/07 Javascript
js或css实现滚动广告的几种方案
2010/01/28 Javascript
jquery获取input的value问题说明
2010/08/19 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
2015/12/12 Javascript
JavaScript构造函数详解
2015/12/27 Javascript
jQuery新窗口打开外链接
2016/07/21 Javascript
node的process以及child_process模块学习笔记
2018/03/06 Javascript
vue+webpack实现异步加载三种用法示例详解
2018/04/24 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
2018/05/04 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
2019/05/09 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
2020/09/01 Javascript
前端性能优化建议
2020/09/17 Javascript
在antd Table中插入可编辑的单元格实例
2020/10/28 Javascript
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
python设置环境变量的原因和方法
2019/06/24 Python
Pycharm中出现ImportError:DLL load failed:找不到指定模块的解决方法
2019/09/17 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
python中get和post有什么区别
2020/06/19 Python
Python错误的处理方法
2020/06/23 Python
python 如何实现遗传算法
2020/09/22 Python
python+selenium自动化实战携带cookies模拟登陆微博
2021/01/19 Python
详解CSS3中border-image的使用
2015/07/18 HTML / CSS
应届生.NET方向面试题
2015/05/23 面试题
AURALog面试题软件测试方面
2013/10/22 面试题
一年级语文教学反思
2014/02/13 职场文书
2014年底工作总结
2014/12/15 职场文书
车间统计员岗位职责
2015/04/14 职场文书
民事起诉状范文
2015/05/19 职场文书
毕业生政审意见范文
2015/06/04 职场文书
死亡诗社观后感
2015/06/05 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书
mysql优化
2021/04/06 MySQL
PHP对接阿里云虚拟号的实现(号码隐私保护)
2021/04/06 PHP