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 相关文章推荐
jQuery 扩展对input的一些操作方法
Oct 30 Javascript
HTML颜色选择器实现代码
Nov 23 Javascript
网页防止tab键的使用快速解决方法
Nov 07 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
Dec 25 Javascript
ExtJS4给Combobox设置列表中的默认值示例
May 02 Javascript
Jquery Ajax方法传值到action的方法
May 11 Javascript
JavaScript中的getTime()方法使用详解
Jun 10 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
Oct 16 Javascript
JS基于对象的链表实现与使用方法示例
Jan 31 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
Jul 13 Javascript
javascript的惯性运动实现代码实例
Sep 07 Javascript
通过实例了解Javascript柯里化流程
Mar 03 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+Apache+Mysql环境搭建教程
2016/08/01 PHP
利用php-cli和任务计划实现订单同步功能的方法
2017/05/03 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
PHP递归实现汉诺塔问题的方法示例
2017/11/25 PHP
jQuery处理xml格式的返回数据(实例解析)
2013/11/28 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
2016/05/18 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
angular2 ng build部署后base文件路径问题详细解答
2017/07/15 Javascript
微信小程序支付功能 php后台对接完整代码分享
2018/06/12 Javascript
Vue多组件仓库开发与发布详解
2019/02/28 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
详解vue 路由跳转四种方式 (带参数)
2019/04/28 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
2020/05/31 Javascript
深入了解JS之作用域和闭包
2020/06/16 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
Python Web框架Flask中使用百度云存储BCS实例
2015/02/08 Python
Python线程详解
2015/06/24 Python
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
python使用Tesseract库识别验证
2018/03/21 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
Python多继承以及MRO顺序的使用
2019/11/11 Python
Pytorch中的自动求梯度机制和Variable类实例
2020/02/29 Python
千禧酒店及度假村官方网站:Millennium Hotels and Resorts
2019/05/10 全球购物
mysql_pconnect()和mysql_connect()有什么区别
2012/05/25 面试题
上课迟到检讨书
2014/01/19 职场文书
日语专业个人求职信范文
2014/02/02 职场文书
毕业证代领委托书
2014/09/26 职场文书
慰问信范文
2015/02/14 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
2015年女职工工作总结
2015/05/15 职场文书
单位提档介绍信
2015/10/22 职场文书
MySQL之DML语言
2021/04/05 MySQL
python中pandas对多列进行分组统计的实现
2021/06/18 Python
Python实现制作销售数据可视化看板详解
2021/11/27 Python