Javascript Function.prototype.bind详细分析

  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值被忽略，同事调用的参数被提供给模拟函数。

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

# Function.prototype.bind分析  # Function.prototype.bind详解  # Function.prototype.bind  # 详细介绍  # Android系统进程间通信Binder机制在应用程序框架层的Java接口源代码分析  # jquery中live()方法和bind()方法区别分析  # C#中DataBindings用法实例分析  # jQuery中trigger()与bind()用法分析  # Android4.1中BinderService用法实例分析  # JQuery中Bind()事件用法分析  # javascript中call  # apply  # bind的用法对比分析  # PHP PDOStatement:bindParam插入数据错误问题分析  # jQuery中的.bind()、.live()和.delegate()之间区别分析  # js apply/call/caller/callee/bind使用方法与区别分析  # JS类库Bindows1.3中的内存释放方式分析  # 绑定  # 是在  # 创建一个  # 在这里  # 第一个  # 也能  # 提供给  # 解决这个问题  # 就像  # 你可以  # 是有  # 设为  # 会在  # 这个问题  # 而不  # 希望能  # 第二个  # 并将  # 如果没有  # 然后再 

相关文章： 建站VPS选购需注意哪些关键参数？  新网站制作渠道有哪些,跪求一个无线渠道比较强的小说网站，我要发表小说？  外贸公司网站制作哪家好,maersk船公司官网？  如何在宝塔面板中修改默认建站目录？  建站主机是什么？如何选择适合的建站主机？  html制作网站的步骤有哪些,iapp如何添加网页？  公司网站设计制作厂家,怎么创建自己的一个网站？  如何用5美元大硬盘VPS安全高效搭建个人网站？  微信h5制作网站有哪些,免费微信H5页面制作工具？  郑州企业网站制作公司,郑州招聘网站有哪些？  青岛网站建设如何选择本地服务器？  建站主机空间推荐 高性价比配置与快速部署方案解析  如何通过二级域名建站提升品牌影响力？  如何访问已购建站主机并解决登录问题？  如何正确下载安装西数主机建站助手？  如何用IIS7快速搭建并优化网站站点？  如何快速完成中国万网建站详细流程？  上海网站制作网站建设公司,建筑电工证网上查询系统入口？  个人摄影网站制作流程,摄影爱好者都去什么网站？  建站之星好吗？新手能否轻松上手建站？  网站专业制作公司,网站编辑是做什么的？好做吗？工作前景如何？  如何快速生成ASP一键建站模板并优化安全性？  javascript基本数据类型及类型检测常用方法小结  C++中引用和指针有什么区别？（代码说明）  建站10G流量真的够用吗？如何应对访问高峰？  建站之星如何快速生成多端适配网站？  建站之星如何一键生成手机站？  如何快速生成可下载的建站源码工具？  高端企业智能建站程序：SEO优化与响应式模板定制开发  如何在搬瓦工VPS快速搭建网站？  如何零成本快速生成个人自助网站？  如何通过智能用户系统一键生成高效建站方案？  免费制作统计图的网站有哪些,如何看待现如今年轻人买房难的情况？  广德云建站网站建设方案与建站流程优化指南  C++如何将C风格字符串（char*）转换为std::string？（代码示例）  在线制作视频的网站有哪些,电脑如何制作视频短片？  如何制作一个表白网站视频,关于勇敢表白的小标题？  临沂网站制作企业,临沂第三中学官方网站？  如何在万网开始建站？分步指南解析  香港服务器网站生成指南：免费资源整合与高速稳定配置方案  如何通过VPS搭建网站快速盈利？  制作企业网站建设方案,怎样建设一个公司网站？  如何破解联通资金短缺导致的基站建设难题？  免费的流程图制作网站有哪些,2025年教师初级职称申报网上流程？  一键网站制作软件,义乌购一件代发流程？  如何通过万网虚拟主机快速搭建网站？  深入理解Android中的xmlns:tools属性  模具网站制作流程,如何找模具客户？  如何快速上传建站程序避免常见错误？  如何基于云服务器快速搭建网站及云盘系统？