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 相关文章推荐
使用js在页面中绘制表格核心代码
Sep 16 Javascript
javascript实现的DES加密示例
Oct 30 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
Feb 21 Javascript
js使用for循环查询数组中是否存在某个值
Aug 12 Javascript
JavaScript截取、切割字符串的技巧
Jan 07 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
Oct 27 Javascript
从零学习node.js之详解异步控制工具async(八)
Feb 27 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
Oct 12 Javascript
微信小程序可滑动月日历组件使用详解
Oct 21 Javascript
js验证密码强度解析
Mar 18 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
Jan 18 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日期时间函数的高级应用技巧
2009/05/16 PHP
PHP用身份证号获取星座和生肖的方法
2013/11/07 PHP
PHP eval函数使用介绍
2013/12/08 PHP
php使用PDO方法详解
2014/12/27 PHP
php分页查询的简单实现代码
2017/03/14 PHP
nodejs win7下安装方法
2012/05/24 NodeJs
js解析与序列化json数据(三)json的解析探讨
2013/02/01 Javascript
让浏览器DOM元素最后加载的js方法
2014/07/29 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
2016/01/27 Javascript
js流动式效果显示当前系统时间
2016/05/16 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
2016/06/03 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python封装shell命令实例分析
2015/05/05 Python
windows上安装Anaconda和python的教程详解
2017/03/28 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
高效使用Python字典的清单
2018/04/04 Python
Anaconda2下实现Python2.7和Python3.5的共存方法
2018/06/11 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
Django权限控制的使用
2021/01/07 Python
Python使用tkinter实现小时钟效果
2021/02/22 Python
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
html5使用canvas画三角形
2014/12/15 HTML / CSS
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
医务人员竞聘职务自我评价分享
2013/11/08 职场文书
车间班长岗位职责
2013/11/30 职场文书
春季运动会广播稿大全
2014/02/19 职场文书
市场推广策划方案
2014/06/02 职场文书
汽车转让协议书范本
2014/12/07 职场文书
社区法制宣传月活动总结
2015/05/07 职场文书
老人与海读书笔记
2015/06/26 职场文书
运动会200米广播稿
2015/08/19 职场文书
导游词之潮音寺
2019/09/26 职场文书