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 相关文章推荐
JavaScript类型转换方法及需要注意的问题小结(挺全面)
Nov 11 Javascript
jQuery.extend()的实现方式详解及实例
Jun 29 Javascript
JavaScript实现弹出子窗口并传值给父窗口
Dec 18 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
js简单的点击返回顶部效果实现方法
Apr 10 Javascript
由ReactJS的Hello world说开来
Jul 02 Javascript
深入理解js promise chain
May 05 Javascript
JS实现的手机端精简幻灯片效果
Sep 05 Javascript
js+css3实现旋转效果
Jan 20 Javascript
JavaScript数组方法的错误使用例子
Sep 13 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
Jun 10 Javascript
微信小程序实现滚动Tab选项卡
Nov 16 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定时计划任务的实现方法详解
2013/06/06 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
支付宝支付开发――当面付条码支付和扫码支付实例
2016/11/04 PHP
php取出数组单个值的方法
2018/03/12 PHP
微信推送功能实现方式图文详解
2019/07/12 PHP
Javascript 陷阱 window全局对象
2008/11/26 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
2014/05/14 Javascript
跟我学Nodejs(三)--- Node.js模块
2014/05/25 NodeJs
js获取当前时间显示在页面上并每秒刷新
2014/12/24 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
原生JS中slice()方法和splice()区别
2017/03/06 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
angularJs中ng-model-options设置数据同步的方法
2018/09/30 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
使用react context 实现vue插槽slot功能
2019/07/18 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
python获取指定目录下所有文件名列表的方法
2015/05/20 Python
python实现统计代码行数的方法
2015/05/22 Python
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
利用python-pypcap抓取带VLAN标签的数据包方法
2019/07/23 Python
详解Django-channels 实现WebSocket实例
2019/08/22 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
请问如下代码执行后a和b的值分别是什么
2016/05/05 面试题
商务专员岗位职责
2013/11/23 职场文书
工商管理自荐书
2014/07/06 职场文书
2015年老干部工作总结
2015/04/23 职场文书
2015年审计人员工作总结
2015/05/26 职场文书
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL
MySQL提升大量数据查询效率的优化神器
2022/07/07 MySQL