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 相关文章推荐
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
Feb 05 Javascript
更优雅的事件触发兼容
Oct 24 Javascript
dwz 如何去掉ajaxloading具体代码
May 22 Javascript
理解javascript中try...catch...finally
Dec 25 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
Feb 04 Javascript
jquery结合html实现中英文页面切换
Nov 29 Javascript
详解angular ui-grid之过滤器设置
Jun 07 Javascript
JS实现点击Radio动态更新table数据
Jul 18 Javascript
微信小程序实现登录遮罩效果
Nov 01 Javascript
JavaScript面向对象中接口实现方法详解
Jul 24 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
Dec 23 Javascript
vue实现井字棋游戏
Sep 29 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绘图之生成饼状图的方法
2015/01/24 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
javascript重复绑定事件造成的后果说明
2013/03/02 Javascript
javascript写的一个模拟阅读小说的程序
2014/04/04 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
2015/02/02 Javascript
js实现文字闪烁特效的方法
2015/12/17 Javascript
js style.display=block显示布局错乱问题的解决方法
2016/09/21 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
jQuery使用bind函数实现绑定多个事件的方法
2017/10/11 jQuery
基于javascript的拖拽类封装详解
2019/04/19 Javascript
vue 通过base64实现图片下载功能
2020/12/19 Vue.js
Pycharm远程调试openstack的方法
2017/11/21 Python
Python安装模块的常见问题及解决方法
2018/02/05 Python
Python操作MySQL模拟银行转账
2018/03/12 Python
Django 简单实现分页与搜索功能的示例代码
2019/11/07 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
Python PIL库图片灰化处理
2020/04/07 Python
Python下载网易云歌单歌曲的示例代码
2020/08/12 Python
详解基于Facecognition+Opencv快速搭建人脸识别及跟踪应用
2021/01/21 Python
python推导式的使用方法实例
2021/02/28 Python
音乐专业应届生教师求职信
2013/11/04 职场文书
酒店中秋节活动方案
2014/01/31 职场文书
《邮票齿孔的故事》教学反思
2014/02/22 职场文书
餐饮商业计划书范文
2014/04/29 职场文书
成立公司计划书
2014/05/07 职场文书
小学综合实践活动总结
2014/07/07 职场文书
教师工作决心书
2015/02/04 职场文书
初中毕业生感言
2015/07/31 职场文书
学校食堂管理制度
2015/08/04 职场文书
尊师重教主题班会
2015/08/14 职场文书
2016高一新生军训心得体会
2016/01/11 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书