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 相关文章推荐
Add Formatted Data to a Spreadsheet
Jun 12 Javascript
JavaScript 学习笔记(七)字符串的连接
Dec 31 Javascript
javascript ready和load事件的区别示例介绍
Aug 30 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
Jan 16 Javascript
jQuery CSS()方法改变现有的CSS样式表
Sep 09 Javascript
使用VS开发 Node.js指南
Jan 06 Javascript
jQuery原型属性和原型方法详解
Jul 07 Javascript
浅谈javascript函数式编程
Sep 06 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
Feb 16 Javascript
详解如何在React组件“外”使用父组件的Props
Jan 12 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
May 23 Javascript
React配置子路由的实现
Jun 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中集成PayPal标准支付的实现方法分享
2012/02/06 PHP
PHP常用的文件操作函数经典收藏
2013/04/02 PHP
smarty模板局部缓存方法使用示例
2014/06/17 PHP
PHP exif扩展方法开启详解
2014/07/28 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
Javascript实现返回上一页面并刷新的小例子
2013/12/11 Javascript
微信小程序 本地存储及登录页面处理实例详解
2017/01/11 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
React Native使用Modal自定义分享界面的示例代码
2017/10/31 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
浅谈bootstrap layer.open中end的使用方法
2019/09/12 Javascript
Vue.js实现立体计算器
2020/02/22 Javascript
[01:14]3.19DOTA2发布会 三代刀塔人第二代
2014/03/25 DOTA
[41:08]2014 DOTA2国际邀请赛中国区预选赛 HGT VS NE
2014/05/22 DOTA
[15:35]教你分分钟做大人:天怒法师
2014/10/30 DOTA
Python实现将DOC文档转换为PDF的方法
2015/07/25 Python
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
Python上传package到Pypi(代码简单)
2016/02/06 Python
Python贪吃蛇游戏编写代码
2020/10/26 Python
pandas 使用apply同时处理两列数据的方法
2018/04/20 Python
Python 类的特殊成员解析
2018/06/20 Python
Python中 map()函数的用法详解
2018/07/10 Python
pycham查看程序执行的时间方法
2018/11/29 Python
python将pandas datarame保存为txt文件的实例
2019/02/12 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
Python基于stuck实现scoket文件传输
2020/04/02 Python
Anaconda配置pytorch-gpu虚拟环境的图文教程
2020/04/16 Python
基于python实现计算两组数据P值
2020/07/10 Python
加拿大消费电子和手机购物网站:The Source
2017/01/28 全球购物
电子商务专业个人的自我评价
2013/12/19 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
汽车4S店前台接待岗位职责
2015/04/03 职场文书
学校体育节班级口号
2015/12/25 职场文书
教你快速开启Apache SkyWalking的自监控
2021/04/25 Servers
SpringBoot整合Redis入门之缓存数据的方法
2021/11/17 Redis