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 相关文章推荐
jquery 快速回到页首的方法
Dec 05 Javascript
jQuery制作效果超棒的手风琴折叠菜单
Apr 03 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
Apr 28 Javascript
Jquery获取第一个子元素简单实例
Jun 02 Javascript
手机端js和html5刮刮卡效果
Sep 29 Javascript
在js代码拼接dom对象到页面上的模板总结
Oct 21 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
Nov 14 Javascript
JS实现的贪吃蛇游戏案例详解
May 01 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 Javascript
vue中的mescroll搜索运用及各种填坑处理
Oct 30 Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 Javascript
小程序跨页面交互的作用与方法详解
Jan 07 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输出一个等腰三角形的方法
2015/05/12 PHP
解读PHP中上传文件的处理问题
2016/05/29 PHP
PHP观察者模式原理与简单实现方法示例
2017/08/25 PHP
laravel unique验证、确认密码confirmed验证以及密码修改验证的方法
2019/10/16 PHP
为指定元素增加样式的js代码
2009/12/09 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
2011/10/23 Javascript
Javascript引用指针使用介绍
2012/11/07 Javascript
javascript延时加载之defer测试
2012/12/28 Javascript
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
jsPDF生成pdf后在网页展示实例
2014/01/16 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
浅谈AngularJS中ng-class的使用方法
2016/11/11 Javascript
Java设计中的Builder模式的介绍
2018/03/22 Javascript
vue 项目 iOS WKWebView 加载
2019/04/17 Javascript
详解小程序云开发数据库
2019/05/20 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
2019/09/10 jQuery
vue更改数组中的值实例代码详解
2020/02/07 Javascript
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
pycharm远程调试openstack代码
2017/11/21 Python
Python中的Numpy矩阵操作
2018/08/12 Python
对python3 Serial 串口助手的接收读取数据方法详解
2019/06/12 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
python3中TQDM库安装及使用详解
2020/11/18 Python
纯css3实现思维导图样式示例
2018/11/01 HTML / CSS
金牌葡萄酒俱乐部:Gold Medal Wine Club
2017/11/02 全球购物
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
集团公司总经理岗位职责
2013/12/20 职场文书
微观物理专业自荐信
2014/01/26 职场文书
晚归检讨书
2014/02/19 职场文书
2014年两会学习心得体会
2014/03/17 职场文书
预备党员公开承诺书
2014/05/28 职场文书
行政执法队伍作风整顿剖析材料
2014/10/11 职场文书
旷工检讨书1000字
2015/01/01 职场文书
目标责任书格式范文
2015/05/11 职场文书
运动会通讯稿600字
2015/07/20 职场文书
javascript数组includes、reduce的基本使用
2021/07/02 Javascript