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
javascript日期转换 时间戳转日期格式
Nov 05 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
Jan 24 Javascript
Jquery给基本控件的取值、赋值示例
May 23 Javascript
js触发select onchange事件的小技巧
Aug 05 Javascript
jQuery的观察者模式详解
Dec 22 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
Jan 13 Javascript
javascript实现页面滚屏效果
Jan 17 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
js实现鼠标拖动功能
Mar 20 Javascript
使用React手写一个对话框或模态框的方法示例
Apr 25 Javascript
vue实现点击按钮切换背景颜色的示例代码
Jun 23 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微信开发自定义菜单
2016/08/27 PHP
浅谈PHP5.6 与 PHP7.0 区别
2019/10/09 PHP
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
JavaScript基础重点(必看)
2016/07/09 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
利用types增强vscode中js代码提示功能详解
2017/07/07 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
详解Vue单元测试case写法
2018/05/24 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
Python解惑之True和False详解
2017/04/24 Python
python 通过xml获取测试节点和属性的实例
2018/03/31 Python
Python实现读取机器硬件信息的方法示例
2018/06/09 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
使用Python轻松完成垃圾分类(基于图像识别)
2019/07/09 Python
python matplotlib库绘制散点图例题解析
2019/08/10 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
python使用scapy模块实现ping扫描的过程详解
2021/01/21 Python
HTML5的video标签的浏览器兼容性增强方案分享
2016/05/19 HTML / CSS
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
美国农场鲜花速递:The Bouqs
2018/07/13 全球购物
日本AOKI官方商城:AOKI西装
2020/06/11 全球购物
Java面试题:为什么要用Java
2012/05/11 面试题
采购主管岗位职责
2014/02/01 职场文书
最经典的商业地产项目广告词
2014/03/13 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
个人收入证明模板
2014/09/18 职场文书
2014年幼儿园园长工作总结
2014/12/17 职场文书
公司借条范本
2015/05/25 职场文书
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript