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 相关文章推荐
怎么选择Javascript框架(Javascript Framework)
Nov 22 Javascript
jQuery中nextAll()方法用法实例
Jan 07 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
Mar 21 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
Mar 23 Javascript
prototype框架中美元符号$用法分析
Jan 22 Javascript
AngularJS入门教程之AngularJS模型
Apr 18 Javascript
js判断数组key是否存在(不用循环)的简单实例
Aug 03 Javascript
详解用node-images 打造简易图片服务器
May 08 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
使用vue-cli3+typescript的项目模板创建工程的教程
Feb 28 Javascript
OpenLayers加载缩放控件使用方法详解
Sep 25 Javascript
JavaScript组合继承详解
Nov 07 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中iconv函数转码时截断字符问题的解决方法
2015/01/21 PHP
php数组随机排序实现方法
2015/06/13 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
Laravel timestamps 设置为unix时间戳的方法
2019/10/11 PHP
ajax 文件上传应用简单实现
2009/03/03 Javascript
JSQL 基于客户端的成绩统计实现方法
2010/05/05 Javascript
Js,alert出现乱码问题的解决方法
2013/06/19 Javascript
JavaScript 命名空间 使用介绍
2013/08/29 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
JQuery右键菜单插件ContextMenu使用指南
2014/12/19 Javascript
JavaScript中reduce()方法的使用详解
2015/06/09 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
巧用数组制作图片切换js代码
2016/11/29 Javascript
Node层模拟实现multipart表单的文件上传示例
2018/01/02 Javascript
利用angular、react和vue实现相同的面试题组件
2018/02/19 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
JavaScript中import用法总结
2019/01/20 Javascript
vue中监听返回键问题
2019/08/28 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
vue动态设置路由权限的主要思路
2021/01/13 Vue.js
Python中类的继承代码实例
2014/10/28 Python
Python中最大最小赋值小技巧(分享)
2017/12/23 Python
Python使用Windows API创建窗口示例【基于win32gui模块】
2018/05/09 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
为奢侈时尚带来了慈善元素:Olivela
2018/09/29 全球购物
领导证婚人证婚词
2014/01/13 职场文书
先进个人获奖感言
2014/01/24 职场文书
迟到检讨书5000字
2014/01/31 职场文书
学习党代会心得体会
2014/09/05 职场文书
2015年女生节活动总结
2015/02/27 职场文书
学习经验交流会策划书
2015/11/02 职场文书
社区结对共建协议书
2016/03/23 职场文书
QT与javascript交互数据的实现
2021/05/26 Javascript
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis
MYSQL常用函数介绍
2022/05/05 MySQL