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系列(7) S.O.L.I.D五大原则之开闭原则OCP
Jan 15 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
May 20 Javascript
用javascript关闭本窗口不弹出询问框的方法
Sep 12 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
Apr 14 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
May 05 Javascript
详解jQuery停止动画——stop()方法的使用
Dec 14 Javascript
vuejs父子组件通信的问题
Jan 11 Javascript
javaScript日期工具类DateUtils详解
Dec 08 Javascript
element-ui 本地化使用教程详解
Oct 28 Javascript
flexible.js实现移动端rem适配方案
Apr 07 Javascript
Vue 的双向绑定原理与用法揭秘
May 06 Javascript
JavaScript事件委托实现原理及优点进行
Aug 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程序中的常见漏洞进行攻击(上)
2006/10/09 PHP
PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
PHP基础之运算符的使用方法
2013/04/28 PHP
使用GDB调试PHP代码,解决PHP代码死循环问题
2015/03/02 PHP
学习php设计模式 php实现访问者模式(Visitor)
2015/12/07 PHP
PHP数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
javascript 常用方法总结
2009/06/03 Javascript
Jquery实现Div上下移动示例
2014/04/23 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
jQuery 判断是否包含在数组中Array[]的方法
2016/08/03 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
2018/01/31 Javascript
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
原生js实现淘宝放大镜效果
2020/10/28 Javascript
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
Python字符遍历的艺术
2008/09/06 Python
python 输出一个两行字符的变量
2009/02/05 Python
Python实现遍历目录的方法【测试可用】
2017/03/22 Python
TensorFlow打印tensor值的实现方法
2018/07/27 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
初中生个人学习的自我评价
2013/12/04 职场文书
项目副经理岗位职责
2013/12/30 职场文书
单位人事专员介绍信
2014/01/11 职场文书
2015年爱牙日活动总结
2015/03/23 职场文书
开天辟地观后感
2015/06/09 职场文书
大学迎新生欢迎词
2015/09/29 职场文书
纪律委员竞选稿
2015/11/19 职场文书
小学生一年级(书信作文)
2019/08/13 职场文书
五年级作文之劳动作文
2019/11/12 职场文书
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android