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 相关文章推荐
IE中jscript/javascript的条件编译
Sep 07 Javascript
jquery getScript动态加载JS方法改进详解
Nov 15 Javascript
cument.execCommand()用法深入理解
Dec 04 Javascript
Ext JS动态加载JavaScript创建窗体的方法
Jun 23 Javascript
CSS+jQuery实现简单的折叠菜单
Dec 20 Javascript
jQuery实现文字自动横移
Jan 08 Javascript
微信小程序 PHP生成带参数二维码
Feb 21 Javascript
vue的Virtual Dom实现snabbdom解密
May 03 Javascript
js字符串处理之绝妙的代码
Apr 05 Javascript
ES6的解构赋值实例详解
May 06 Javascript
详解vue beforeEach 死循环问题解决方法
Feb 25 Javascript
vue.js实现双击放大预览功能
Jun 23 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中通过curl检测页面是否被百度收录
2013/09/27 PHP
PHP实现将多个文件压缩成zip格式并下载到本地的方法示例
2018/05/23 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
javascript 处理事件绑定的一些兼容写法
2009/12/24 Javascript
jquery+css+ul模拟列表菜单具体实现思路
2013/04/15 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
JS版元素周期表实现方法
2015/08/05 Javascript
JS基础随笔(菜鸟必看篇)
2016/07/13 Javascript
JS实现数字格式千分位相互转换方法
2016/08/01 Javascript
如何使用angularJs
2017/05/08 Javascript
AngularJS自定义指令之复制指令实现方法
2017/05/18 Javascript
jQuery基于Ajax实现读取XML数据功能示例
2018/05/31 jQuery
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
2018/08/20 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
2018/09/30 Javascript
微信小程序实现日历效果
2018/12/28 Javascript
了解前端理论:rscss和rsjs
2019/05/23 Javascript
vue动态绘制四分之三圆环图效果
2019/09/03 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
2019/09/24 Javascript
vue实现计步器功能
2019/11/01 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
Python人脸识别初探
2017/12/21 Python
matplotlib 纵坐标轴显示数据值的实例
2018/05/25 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
python实现求两个字符串的最长公共子串方法
2018/07/20 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
python如何获取当前文件夹下所有文件名详解
2019/01/25 Python
护理专科毕业自荐信范文
2014/04/21 职场文书
法制宣传月活动总结
2014/04/29 职场文书
项目经理任命书内容
2014/06/06 职场文书
师德先进个人事迹材料
2014/12/19 职场文书
个人典型事迹材料
2014/12/30 职场文书
保险公司增员口号
2015/12/25 职场文书
电频谱管理的原则是什么
2022/02/18 无线电
python小型的音频操作库mp3Play
2022/04/24 Python