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计算器实现了连续计算功能
Jul 21 Javascript
bootstrap fileinput 上传插件的基础使用
Feb 17 Javascript
Vue.js事件处理器与表单控件绑定详解
Mar 20 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
Jun 04 Javascript
vue.js 上传图片实例代码
Jun 22 Javascript
Javascript es7中比较实用的两个方法示例
Jul 21 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
Dec 25 Javascript
JS点击动态添加标签、删除指定标签的代码
Apr 18 Javascript
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
mpvue微信小程序多列选择器用法之省份城市选择的实现
Mar 07 Javascript
vue+element加入签名效果(移动端可用)
Jun 17 Javascript
vue-cli4项目开启eslint保存时自动格式问题
Jul 13 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实现统计二进制中1的个数算法示例
2018/01/23 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
XP折叠菜单&仿QQ2006菜单
2006/12/16 Javascript
用 Javascript 验证表单(form)中的单选(radio)值
2009/09/08 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
jquery map方法使用示例
2014/04/23 Javascript
Yii2使用Bootbox插件实现自定义弹窗
2015/04/02 Javascript
jQuery.extend 函数及用法详细
2015/09/06 Javascript
详解WordPress开发中get_current_screen()函数的使用
2016/01/11 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
分享自己用JS做的扫雷小游戏
2016/02/17 Javascript
javascript事件冒泡简单示例
2016/06/20 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
2016/11/29 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
2017/03/07 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
微信小程序实现批量倒计时功能
2020/11/01 Javascript
关于layui时间回显问题的解决方法
2019/09/24 Javascript
javascript头像上传代码实例
2019/09/28 Javascript
如何在Vue.JS中使用图标组件
2020/08/04 Javascript
Python 获得13位unix时间戳的方法
2017/10/20 Python
解决Python中定时任务线程无法自动退出的问题
2019/02/18 Python
Python函数式编程实例详解
2020/01/17 Python
如何在Windows中安装多个python解释器
2020/06/16 Python
python中remove函数的踩坑记录
2021/01/04 Python
药剂学专业应届生自荐信
2013/09/29 职场文书
汽车专业人才自我鉴定范文
2013/12/29 职场文书
给分销商的致歉信
2014/01/14 职场文书
公司门卫的岗位职责
2014/02/19 职场文书
新年抽奖获奖感言
2014/03/02 职场文书
秋冬农业生产标语
2014/10/09 职场文书
2014年工人工作总结
2014/11/25 职场文书
MySQL命令行操作时的编码问题详解
2021/04/14 MySQL
一文了解MYSQL三大范式和表约束
2022/04/03 MySQL
Java由浅入深通关抽象类与接口(下篇)
2022/04/26 Java/Android