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数组前面插入元素的方法
Apr 06 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
Jul 18 Javascript
JS简单编号生成器实现方法(附demo源码下载)
Apr 05 Javascript
微信小程序 图片宽度自适应的实现
Apr 06 Javascript
微信小程序实战之上拉(分页加载)效果(2)
Apr 17 Javascript
vue2.0结合Element-ui实战案例
Mar 06 Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 Javascript
node爬取新型冠状病毒的疫情实时动态
Feb 06 Javascript
js实现带有动画的返回顶部
Aug 09 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 Javascript
JavaScript实现前端网页版倒计时
Mar 24 Javascript
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
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 已经成熟
2006/12/04 PHP
UCenter 批量添加用户的php代码
2012/07/17 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
2011/09/10 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
2012/02/16 Javascript
浅析js中取绝对值的2种方法
2013/07/09 Javascript
js实现点小图看大图效果的思路及示例代码
2013/10/28 Javascript
nodejs npm package.json中文文档
2014/09/04 NodeJs
jQuery实现的仿select功能代码
2015/08/19 Javascript
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
Yarn的安装与使用详细介绍
2016/10/25 Javascript
Angular路由简单学习
2016/12/26 Javascript
Swiper自定义分页器使用详解
2017/12/28 Javascript
Angularjs中date过滤器失效的问题及解决方法
2018/07/06 Javascript
用Python进行一些简单的自然语言处理的教程
2015/03/31 Python
python矩阵/字典实现最短路径算法
2019/01/17 Python
Django利用cookie保存用户登录信息的简单实现方法
2019/05/27 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
pytorch中的卷积和池化计算方式详解
2020/01/03 Python
Python while循环使用else语句代码实例
2020/02/07 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
什么是Rollback Segment
2013/04/22 面试题
资料员的岗位职责
2013/11/20 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
师德演讲稿范文
2014/05/06 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
2014城乡环境综合治理工作总结
2014/12/19 职场文书
英文道歉信
2015/01/20 职场文书
施工安全员岗位职责
2015/04/11 职场文书
4S店销售内勤岗位职责
2015/04/13 职场文书
2016预备党员培训心得体会
2016/01/08 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫