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 相关文章推荐
Iframe 自动适应页面的高度示例代码
Feb 26 Javascript
js选择并转移导航菜单示例代码
Aug 19 Javascript
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
Jul 01 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
Nov 21 Javascript
javascript实现右下角广告框效果
Feb 01 Javascript
新手vue构建单页面应用实例代码
Sep 18 Javascript
axios发送post请求springMVC接收不到参数的解决方法
Mar 05 Javascript
基于three.js实现的3D粒子动效实例代码
Apr 09 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
Jun 26 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
Nov 05 Javascript
原生js实现无缝轮播图效果
Jan 28 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面向对象全攻略 (五) 封装性
2009/09/30 PHP
PHP中删除变量时unset()和null的区别分析
2011/01/27 PHP
使用PHPMailer实现邮件发送代码分享
2014/10/23 PHP
ThinkPHP实现带验证码的文件上传功能实例
2014/11/01 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
2012/12/26 Javascript
jquery中radio checked问题
2015/03/16 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
浅谈javascript中的加减时间
2016/07/12 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
2016/10/24 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
ReactNative踩坑之配置调试端口的解决方法
2017/07/28 Javascript
在Vue中使用echarts的方法
2018/02/05 Javascript
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
详解原生JS动态添加和删除类
2019/03/26 Javascript
Vue项目打包部署到iis服务器的配置方法
2019/10/14 Javascript
python使用wxpython开发简单记事本的方法
2015/05/20 Python
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
40个你可能不知道的Python技巧附代码
2020/01/29 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
利用Python pandas对Excel进行合并的方法示例
2020/11/04 Python
HTML5实现直播间评论滚动效果的代码
2020/05/27 HTML / CSS
倩碧美国官网:Clinique美国
2016/07/20 全球购物
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
美国第一大药店连锁机构:Walgreens(沃尔格林)
2019/10/10 全球购物
.NET初级开发工程师面试题
2014/04/18 面试题
《最后的姿势》教学反思
2014/02/27 职场文书
《第一次抱母亲》教学反思
2014/04/16 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
超市商业计划书
2014/05/04 职场文书
质量负责人任命书
2014/06/06 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
中华魂放飞梦想演讲稿
2014/08/26 职场文书
金融保险专业求职信
2014/09/03 职场文书
Centos系统通过Docker安装并搭建MongoDB数据库
2022/04/12 MongoDB