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开发包大全整理
Dec 22 Javascript
Extjs 几个方法的讨论
Jan 28 Javascript
JavaScript prototype对象的属性说明
Mar 13 Javascript
Javascript中3个需要注意的运算符
Apr 02 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
Nov 18 Javascript
JavaScript中创建对象的模式汇总
Apr 19 Javascript
JavaScript:Date类型全面解析
May 19 Javascript
深入理解node exports和module.exports区别
Jun 01 Javascript
jQuery实现字符串全部替换的方法
Dec 12 Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
Vue编程式跳转的实例代码详解
Jul 10 Javascript
Vue3新特性之在Composition API中使用CSS Modules
Jul 13 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
帝国cms常用标签汇总
2015/07/06 PHP
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
js去除重复字符串两种实现方法
2013/01/09 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
简单的JavaScript互斥锁分享
2014/02/02 Javascript
JavaScript实现网页对象拖放功能的方法
2015/04/15 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
JS正则表达式修饰符global(/g)用法分析
2016/12/27 Javascript
React组件的三种写法总结
2017/01/12 Javascript
JS触摸事件、手势事件详解
2017/05/04 Javascript
node内置调试方法总结
2018/02/22 Javascript
微信小程序之分享页面如何返回首页的示例
2018/03/28 Javascript
浅谈Vue render函数在ElementUi中的应用
2018/09/06 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
2018/11/15 Javascript
vue生命周期的探索
2019/04/03 Javascript
跟老齐学Python之编写类之二方法
2014/10/11 Python
Python 详解基本语法_函数_返回值
2017/01/22 Python
如何在python中使用selenium的示例
2017/12/26 Python
一道python走迷宫算法题
2018/01/22 Python
Python使用add_subplot与subplot画子图操作示例
2018/06/01 Python
python十进制和二进制的转换方法(含浮点数)
2018/07/07 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
Python阶乘求和的代码详解
2020/02/14 Python
Python 批量读取文件中指定字符的实现
2020/03/06 Python
使用python创建Excel工作簿及工作表过程图解
2020/05/27 Python
python实现学生信息管理系统(精简版)
2020/11/27 Python
python 高阶函数简单介绍
2021/02/19 Python
HTML5 Canvas自定义圆角矩形与虚线示例代码
2013/08/02 HTML / CSS
酒店工作职员求职简历的自我评价
2013/10/23 职场文书
学习保证书范文
2014/04/30 职场文书
学校安全教育月活动总结
2014/07/07 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
学生检讨书范文
2014/10/30 职场文书
大学生个人简历自我评价
2015/03/11 职场文书
结婚司仪主持词
2015/06/29 职场文书
读书笔记怎么写
2015/07/01 职场文书