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 相关文章推荐
vs2003 js文件编码问题的解决方法
Mar 20 Javascript
Perl Substr()函数及函数的应用
Dec 16 Javascript
Bootstrap路径导航与分页学习使用
Feb 08 Javascript
jquery 仿锚点跳转到页面指定位置的实例
Feb 14 Javascript
JS实现图片放大缩小的方法
Feb 15 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
Feb 22 Javascript
Vue入门之数据绑定(小结)
Jan 08 Javascript
实例讲解JavaScript截取字符串
Nov 30 Javascript
微信小程序新手教程之页面打开数量限制
Mar 03 Javascript
微信小程序复选框实现多选一功能过程解析
Feb 14 Javascript
微信小程序实现多选框功能的实例代码
Jun 24 Javascript
如何用JavaScript实现一个数组惰性求值库
May 05 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实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
Php output buffering缓存及程序缓存深入解析
2013/07/15 PHP
javascript 打印页面代码
2009/03/24 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
jquery中获取select选中值的代码
2011/06/27 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
2014/08/11 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
深入理解jQuery.data() 的实现方式
2016/11/30 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
2017/02/28 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
浅谈关于.vue文件中style的scoped属性
2017/08/19 Javascript
完美解决axios跨域请求出错的问题
2018/02/05 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
详解三种方式解决vue中v-html元素中标签样式
2018/11/22 Javascript
基于JS实现简单滑块拼图游戏
2019/10/12 Javascript
JS实现页面数据懒加载
2020/02/13 Javascript
vue2.0实现列表数据增加和删除
2020/06/17 Javascript
带你使用webpack快速构建web项目的方法
2020/11/12 Javascript
python 正则表达式 概述及常用字符
2009/05/04 Python
Python线程的两种编程方式
2015/04/14 Python
redis之django-redis的简单缓存使用
2018/06/07 Python
python实现的Iou与Giou代码
2020/01/18 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
Python HTMLTestRunner如何下载生成报告
2020/09/04 Python
工程现场管理求职自荐信
2013/10/02 职场文书
广告创意求职信
2014/03/17 职场文书
竞选副班长演讲稿
2014/04/24 职场文书
毕业生就业推荐表自我评价
2015/03/02 职场文书
对公司的意见和建议
2015/06/04 职场文书
小学运动会加油词
2015/07/18 职场文书
高中班主任心得体会
2016/01/07 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书
2019年教师节活动策划方案
2019/09/09 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书
JavaScript实现队列结构过程
2021/12/06 Javascript
使用pd.merge表连接出现多余行的问题解决
2022/06/16 Python