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 相关文章推荐
JS创建优美的页面滑动块效果 - Glider.js
Sep 27 Javascript
javascript 函数调用规则
Aug 26 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
Jul 04 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
Aug 23 Javascript
Javascript判断图片尺寸大小实例分析
Jun 16 Javascript
Javascript毫秒数用法实例
Feb 05 Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 Javascript
js 动态生成json对象、时时更新json对象的方法
Dec 02 Javascript
简述vue中的config配置
Jan 23 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
Aug 13 Javascript
vue-cli脚手架的安装教程图解
Sep 02 Javascript
React 实现车牌键盘的示例代码
Dec 20 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
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
CodeIgniter读写分离实现方法详解
2016/01/20 PHP
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
有道JavaScript监听浏览器的问题
2010/06/23 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
nodejs 后缀名判断限制代码
2011/03/31 NodeJs
JS.getTextContent(element,preformatted)使用介绍
2013/09/21 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
jQuery实现移动 和 渐变特效的点击事件
2015/02/26 Javascript
JS制作简单的三级联动
2015/03/18 Javascript
AngularJs IE Compatibility 兼容老版本IE
2016/09/01 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
2016/09/19 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
2016/10/21 Javascript
原生js仿淘宝网商品放大镜效果
2017/02/28 Javascript
详细分析JS函数去抖和节流
2017/12/05 Javascript
基于layui数据表格以及传数据的方式
2018/08/19 Javascript
node.js实现微信开发之获取用户授权
2019/03/18 Javascript
vue输入框使用模糊搜索功能的实现代码
2020/05/26 Javascript
python使用xlrd与xlwt对excel的读写和格式设定
2017/01/21 Python
python下setuptools的安装详解及No module named setuptools的解决方法
2017/07/06 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
Python使用指定字符长度切分数据示例
2019/12/05 Python
python删除某个目录文件夹的方法
2020/05/26 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
Rakuten Kobo台湾:电子书、eReaders和Reading应用程式
2017/11/24 全球购物
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
小学生综合素质评语
2014/04/23 职场文书
国际商贸专业自荐信
2014/06/09 职场文书
2014年教师个人工作总结
2014/11/10 职场文书
2014年科技工作总结
2014/11/26 职场文书
环卫工人慰问信
2015/02/15 职场文书
投诉信范文
2015/07/02 职场文书
2016年小学圣诞节活动总结
2016/03/31 职场文书
Python 文字识别
2022/05/11 Python