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设置css属性的代码
Dec 28 Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
Jun 20 Javascript
简单介绍JavaScript的变量和数据类型
Jun 03 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
Jan 21 Javascript
解决layui中的form表单与button的点击事件冲突问题
Aug 15 Javascript
vue mounted 调用两次的完美解决办法
Oct 29 Javascript
JS中min函数实例讲解
Feb 18 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
Sep 18 Javascript
详解如何在Canvas中添加事件的方法
Apr 17 Javascript
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
AudioContext 实现音频可视化(web技术分享)
Feb 24 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中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
为PHP5.4开启Zend OPCode缓存
2014/12/26 PHP
php获取字符串中各个字符出现次数的方法
2015/02/23 PHP
php curl请求信息和返回信息设置代码实例
2015/04/27 PHP
PHP邮件群发机实现代码
2016/02/16 PHP
php中的抽象方法和抽象类
2017/02/14 PHP
node.js入门实例helloworld详解
2015/12/23 Javascript
JavaScript实现移动端滑动选择日期功能
2016/06/21 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
微信小程序收货地址API兼容低版本解决方法
2019/05/18 Javascript
[03:30]完美盛典趣味短片 CSGO2019年度名场面
2019/12/07 DOTA
[51:53]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第二场 1月24日
2021/03/11 DOTA
完美解决Python2操作中文名文件乱码的问题
2017/01/04 Python
Python登录并获取CSDN博客所有文章列表代码实例
2017/12/28 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
iPython pylab模式启动方式
2020/04/24 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
Numpy中ndim、shape、dtype、astype的用法详解
2020/06/14 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
英国豪华针织品牌John Smedley的在线销售商:The Outlet by John Smedley
2018/04/08 全球购物
北美Newegg打造的全球尖货海购平台:tt海购
2018/09/28 全球购物
信息专业本科生个人的自我评价
2013/10/28 职场文书
行政助理岗位职责
2013/11/10 职场文书
采购部部门职责
2013/12/15 职场文书
村优秀党员事迹材料
2014/01/15 职场文书
办公室文员岗位职责范本
2014/06/12 职场文书
环境监测与治理技术专业求职信
2014/07/06 职场文书
验房委托书
2014/08/30 职场文书
师德师风自查材料
2014/10/14 职场文书
退学证明范本3篇
2014/10/29 职场文书
2014年酒店前台工作总结
2014/11/14 职场文书
旷工检讨书1000字
2015/01/01 职场文书
幼儿园春季开学通知
2015/07/16 职场文书
新娘婚礼致辞
2015/07/27 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书