Javascript Function.prototype.bind详细分析


Posted in Javascript onDecember 29, 2016

  Function.prototype.bind分析

bind()方法会创建一个新的函数,成为绑定函数。当调用这个绑定函数时,绑定函数会以创建它时传入的第一个参数作为this,传入bind()方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调取原函数。

       实际使用中我们经常会碰到这样的问题:

var name = "pig";
function Person(name){
  this.name = name;
  this.getName = function(){
    setTimeout(function(){
      console.log("Hello,my name is "+this.name);
    },100);
  }
}
var weiqi = new Person("卫旗");
weiqi.getName();  
//Hello,my name is pig

       这个时候输出this.name是pig,原因是this的指向是在运行函数时确定的,而不是在定义函数时确定的,再因为setTimeout是在全局环境下只想,所以this就指向了window。

       以前解决这个问题的办法通常是缓存this,例如:

var name = "pig";
function Person(name){
  this.name = name;
  this.getName = function(){
    //在这里缓存一个this
    var self = this;
    setTimeout(function(){
      //在这里是有缓存this的self
      console.log("Hello,my name is "+self.name);
    },100);
  }
}
var weiqi = new Person("卫旗");
weiqi.getName();
//Hello,my name is 卫旗

       这样就解决了这个问题,非常方便,因为它使得setTimeout函数中可以访问Person的上下文。

       现在有一个更好的解决办法,可以使用bind()函数,上面的例子可以被更新为:

var name = "pig";
function Person(name){
  this.name = name;
  this.getName = function(){
    setTimeout(function(){
      console.log("Hello,my name is "+this.name);
    }.bind(this),100);
    //注意上面这一行,添加了bind(this)
  }
}
var weiqi = new Person("卫旗");
weiqi.getName();
//Hello,my name is 卫旗

       bind()最简单的用法是创建一个函数,使得这个函数无论怎么样调用都拥有同样的this值。JavaScript新手经常犯的一个错误就是将一个方法从一个对象中拿出来,然后再调用,希望方法中的this是原来的对象(比如在回调函数中传入这个方法)。如果不做特殊处理的话,一般会丢失原来的对象。从原来的函数和原来的对象创建一个绑定函数,则可以很漂亮的解决这个问题:

//定义全局变量x
var x = "window";
//在module内部定义x
var module = {
  x:"module",
  getX:function(){
    console.log(this.x);
  }
}
module.getX(); 
//返回module,因为在module内部调用getX()

var getX = module.getX;
getX();
//返回window,因为这个getX()是在全局作用域中调用的

//绑定getX()并将this值设为module
var boundGetX = getX.bind(module);
boundGetX();
//返回module,绑定以后this值始终为module

浏览器支持情况:

Browser Version support
Chrome 7
FireFox(Gecko) 4.0(2)
Internet Explorer 9
Opera 11.60
Safari 5.14

       很不幸,Function.prototype.bind在IE8及以下版本中不被支持,所以如果没有一个备选方案的话,可能会在运行时出现问题。bind函数在ECMA-262第五版才被加入。它可能不无法在所有浏览器上运行。你可以在脚本部分加入如下代码,让不支持的浏览器也能使用bind()功能。

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 || window,
                aArgs.concat(Array.prototype.slice.call(arguments)));
    };

  fNOP.prototype = this.prototype;
  fBound.prototype = new fNOP();

  return fBound;
 };
}

语法

fun.bind(thisArg[, arg1[, arg2[, …]]])

参数

       thisArg,当绑定函数被调用时,该参数会作为原函数运行时的this指向,当使用new操作符调用绑定函数时,该参数无效。

       arg1, arg2, …,当绑定函数被调用时,这些参数加上绑定函数本身的参数会按照顺序作为原函数运行时的参数。

描述

       bind()函数会创建一个新的函数(一个绑定的函数)有同样的函数体(在ECMAScript 5 规范内置Call属性),当该函数(绑定函数的原函数)被调用时this值绑定到bind()的第一个参数,该参数不能被重写。绑定函数被调用时,bind()也接受预设的参数提供给原函数。一个绑定函数也能使用new操作符创建对象:这种行为就像把原函数当成构造器。提供的this值被忽略,同事调用的参数被提供给模拟函数。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
表单提交验证类
Jul 14 Javascript
JavaScript验证电子邮箱的函数
Aug 22 Javascript
JavaScript中的对象的extensible属性介绍
Dec 30 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
Jun 12 Javascript
javascript实现移动端上的触屏拖拽功能
Mar 04 Javascript
Angular2内置指令NgFor和NgIf详解
Aug 03 Javascript
jQuery中绑定事件bind() on() live() one()的异同
Feb 23 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 Javascript
jQuery列表检索功能实现代码
Jul 17 jQuery
浅析node Async异步处理模块用例分析及常用方法介绍
Nov 17 Javascript
解决vue点击控制单个样式的问题
Sep 05 Javascript
JS apply用法总结和使用场景实例分析
Mar 14 Javascript
jQuery自定义插件详解及实例代码
Dec 29 #Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 #Javascript
JavaScript获取短信验证码(周期性)
Dec 29 #Javascript
JavaScript实现同一个页面打开多张图片
Dec 29 #Javascript
Javascript 对cookie操作详解及实例
Dec 29 #Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 #Javascript
javascript显示系统当前时间代码
Dec 29 #Javascript
You might like
世界上第一台立体声收音机
2021/03/01 无线电
关于PHP堆栈与列队的学习
2013/06/21 PHP
PHP版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
Js中sort()方法的用法
2006/11/04 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
2017/01/18 Javascript
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
微信小程序开发问题之wx.previewImage
2018/12/25 Javascript
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
vue-property-decorator用法详解
2019/12/12 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
从零学Python之入门(二)基本数据类型
2014/05/25 Python
Python 正则表达式(转义问题)
2014/12/15 Python
Python使用Scrapy爬取妹子图
2015/05/28 Python
python开发中module模块用法实例分析
2015/11/12 Python
Python使用openpyxl读写excel文件的方法
2017/06/30 Python
windows下python和pip安装教程
2018/05/25 Python
python广度优先搜索得到两点间最短路径
2019/01/17 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
Python爬虫如何破解JS加密的Cookie
2020/11/19 Python
CSS3属性box-shadow使用详细教程
2012/01/21 HTML / CSS
Kenneth Cole官网:纽约时尚优雅品牌
2016/11/14 全球购物
JBL英国官网:JBL UK
2018/07/04 全球购物
《池塘边的叫声》教学反思
2014/04/12 职场文书
农村文化活动总结
2014/08/28 职场文书
2014年销售人员工作总结
2014/11/27 职场文书
学生考试舞弊检讨书
2015/01/01 职场文书
商务宴请邀请函范文
2015/02/02 职场文书
办公室岗位职责
2015/02/04 职场文书
2015年测量员工作总结
2015/05/23 职场文书
2019年亲子运动会口号
2019/10/11 职场文书