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 相关文章推荐
图片完美缩放
Sep 07 Javascript
javascript各种复制代码收集
Sep 20 Javascript
JQuery 国际象棋棋盘 实现代码
Jun 26 Javascript
JavaScript Accessor实现说明
Dec 06 Javascript
详解javascript跨浏览器事件处理程序
Mar 27 Javascript
jquery遍历table的tr获取td的值实现方法
May 19 Javascript
javascript输出AscII码扩展集中的字符方法
Dec 26 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
JavaScript内置对象math,global功能与用法实例分析
Jun 10 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 Javascript
借助云开发实现小程序短信验证码的发送
Jan 06 Javascript
JS如何使用剪贴板操作Clipboard API
May 17 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入门源程序
2006/10/09 PHP
PHP 多维数组排序(usort,uasort)
2010/06/30 PHP
ThinkPHP 3.2 数据分页代码分享
2014/10/14 PHP
老生常谈php中传统验证与thinkphp框架(必看篇)
2017/06/10 PHP
PHP登录验证功能示例【用户名、密码、验证码、数据库、已登陆验证、自动登录和注销登录等】
2019/02/25 PHP
用Javascript读取中文COOKIE的解决办法
2007/02/15 Javascript
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
JavaScript经典效果集锦
2010/07/06 Javascript
jquery EasyUI的formatter格式化函数代码
2011/01/12 Javascript
js导出table到excel同时兼容FF和IE示例
2013/09/03 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
javascript制作的网页侧边弹出框思路及实现代码
2014/05/21 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
2014/09/28 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
JavaScript 是什么意思
2016/09/22 Javascript
canvas学习之API整理笔记(一)
2016/12/29 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
JS+HTML5 FileReader对象用法示例
2017/04/07 Javascript
详解webpack与SPA实践之开发环境搭建
2017/12/18 Javascript
详解webpack4升级指南以及从webpack3.x迁移
2018/06/12 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
详解Golang 与python中的字符串反转
2017/07/21 Python
关于python列表增加元素的三种操作方法
2018/08/22 Python
python根据list重命名文件夹里的所有文件实例
2018/10/25 Python
Python3转换html到pdf的不同解决方案
2019/03/11 Python
django 中QuerySet特性功能详解
2019/07/25 Python
Python高级特性 切片 迭代解析
2019/08/23 Python
浅谈pymysql查询语句中带有in时传递参数的问题
2020/06/05 Python
Python生成并下载文件后端代码实例
2020/08/31 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
中科前程Java笔试题
2016/11/20 面试题
教师节随笔
2015/08/15 职场文书