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 相关文章推荐
Extjs gridpanel 出现横向滚动条问题的解决方法
Jul 04 Javascript
JavaScript 32位整型无符号操作示例
Dec 08 Javascript
JavaScript实现快速排序的方法
Jul 31 Javascript
深入分析Javascript事件代理
Jan 30 Javascript
Jquery zTree 树控件异步加载操作
Feb 25 Javascript
浅析创建javascript对象的方法
May 13 Javascript
JavaScript数组操作函数汇总
Aug 05 Javascript
JS查找字符串中出现次数最多的字符
Sep 05 Javascript
ES6新特性之函数的扩展实例详解
Apr 01 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
Sep 04 Javascript
微信小程序列表中item左滑删除功能
Nov 07 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
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中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
golang实现php里的serialize()和unserialize()序列和反序列方法详解
2018/10/30 PHP
PHP错误提示It is not safe to rely on the system……的解决方法
2019/03/25 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
Three.js源码阅读笔记(光照部分)
2012/12/27 Javascript
javascript 函数及作用域总结介绍
2013/11/12 Javascript
jquery使整个div区域可以点击的方法
2015/06/24 Javascript
JavaScript中Function函数与Object对象的关系
2015/12/17 Javascript
实用jquery操作表单元素的简单代码
2016/07/04 Javascript
深入剖析JavaScript面向对象编程
2016/07/12 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
JavaScript中return用法示例
2016/11/29 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
jQuery 实现倒计时天,时,分,秒功能
2018/07/31 jQuery
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
2018/09/07 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
小程序实现横向滑动日历效果
2019/10/21 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
vue实现计算器功能
2020/02/22 Javascript
纯js+css实现在线时钟
2020/08/18 Javascript
python Django批量导入数据
2016/03/25 Python
python操作redis方法总结
2018/06/06 Python
Python正则表达式和re库知识点总结
2019/02/11 Python
Python 实现使用空值进行赋值 None
2020/03/12 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
丝芙兰意大利官方网站:Sephora.it
2019/12/13 全球购物
大学生翘课检讨书范文
2014/10/06 职场文书
神秘岛读书笔记
2015/07/01 职场文书
消防宣传标语大全
2015/08/03 职场文书
MySQL的索引你了解吗
2022/03/13 MySQL
Python 图片添加美颜效果
2022/04/28 Python