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 相关文章推荐
在VS2008中使用jQuery智能感应的方法
Dec 30 Javascript
JS代码优化技巧之通俗版(减少js体积)
Dec 23 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
Nov 26 Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
Oct 27 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 Javascript
用js写的一个路由(简单实例)
Sep 24 Javascript
js 判断登录界面的账号密码是否为空
Feb 08 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
Apr 13 Javascript
layer.open回调获取弹出层参数的实现方法
Sep 10 Javascript
CountUp.js数字滚动插件使用方法详解
Oct 17 Javascript
js实现直播点击飘心效果
Aug 19 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
Win2003服务器安全加固设置--进一步提高服务器安全性
2007/05/23 PHP
php数组函数序列之array_intersect() 返回两个或多个数组的交集数组
2011/11/10 PHP
php事务处理实例详解
2014/07/11 PHP
PHP类与对象后期静态绑定操作实例详解
2018/12/20 PHP
PHP7数组的底层实现示例
2019/08/25 PHP
php和html的区别点详细总结
2019/09/24 PHP
javascript 用函数实现继承详解
2016/05/28 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
Vue实现动态显示textarea剩余字数
2017/05/22 Javascript
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
2019/04/23 jQuery
详解vue更改头像功能实现
2019/04/28 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
2019/08/20 Javascript
Vue element-ui父组件控制子组件的表单校验操作
2020/07/17 Javascript
vue实现折线图 可按时间查询
2020/08/21 Javascript
在Vue中使用Echarts实例图的方法实例
2020/10/10 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
2020/11/19 Vue.js
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
Python操作mongodb的9个步骤
2018/06/04 Python
Python学习笔记之自定义函数用法详解
2019/06/08 Python
python flask框架实现传数据到js的方法分析
2019/06/11 Python
Python语法分析之字符串格式化
2019/06/13 Python
Kali Linux安装ipython2 和 ipython3的方法
2019/07/11 Python
Python实现链表反转的方法分析【迭代法与递归法】
2020/02/22 Python
python爬虫可以爬什么
2020/06/16 Python
利用scikitlearn画ROC曲线实例
2020/07/02 Python
Python 实现3种回归模型(Linear Regression,Lasso,Ridge)的示例
2020/10/15 Python
香港连卡佛百货官网:Lane Crawford
2019/09/04 全球购物
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
学期自我鉴定
2013/11/04 职场文书
生产部管理制度
2014/01/31 职场文书
学习教师法的心得体会
2014/09/03 职场文书
2015年保育员个人工作总结
2015/05/13 职场文书
新闻稿标题
2015/07/18 职场文书
运动员入场词
2015/07/18 职场文书