Javascript通过bind()掌控this_javascript .bind(this)-程序员宅基地

技术标签： JavaScript

今天看到公司大神的一段代码：

[javascript]view plain copy
 function ReplaceProcessor() {  
    this._dom = {  
      btnReplace : $('#ro_btnReplace'),  
      btnComplete: $('#ro_btnComplete')  
    };  
    // Bind events  
    this._dom.btnReplace.on('click', this._onReplace.bind(this));  
    this._dom.btnComplete.on('click', this._onComplete.bind(this));  
  }  
     
  ReplaceProcessor.prototype._onReplace = function(){  
   // code  
   this._dom.btnComplete.html("OK");  
  }  

    这里面最后两行代码是向DOM节点上绑定事件，"this._onReplace.bind(this)"明显就是绑定的执行函数，在不知道具体作用的情况下猜测一下bind()的作用可能和call或者apply类似，用来改变function执行时的上下文环境，不知道理解的对不对所以找资料来印证一下。
    先上官网的解释，不管我们个人的解释是多么的接地气，官方API到底还是比较靠谱的：
bind方法会创建一个新函数,称为绑定函数.当调用这个绑定函数时,绑定函数会以创建它时传入bind方法的第一个参数作为this,传入bind方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数.
    这个解释多读几次还是很靠谱的，不是很难懂。从功能描述上看和call以及apply还是有区别的，应用的场景不太一样，bind主要是为了改变函数内部的this指向，这个是在ECMA5以后加入的，所以IE8一下的浏览器不支持，当然有兼容的办法，不过坦白说首先对于IE8以下实在无爱，其次那种情况下估计你也没什么心情用bind了吧。。。

[javascript]view plain copy
 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;  
   };}  

    东西就是这么个东西，最主要的还是应用的场景，什么情况下使用。本文一开始代码中使用.bind(this)的效果就相当于将事件绑定的callback抽出来写，但是同时还维持了函数中的this指向。本来事件绑定的处理函数一般是一个匿名函数，这里相当于单独抽出来从而使结构更清晰的同时，this指向的是ReplaceProcessor的实例。
    这里列举三部分的代码来说明bind能为我们做些什么，同时它的好处在哪里。
    （一）事件处理函数
    所谓的事件处理函数其实就是绑定事件后的那个callback，这里如果用上bind你的代码应该会简洁优雅一些，我在开篇列出的那段代码里就是这样做的。

[javascript]view plain copy
 var logger = {  
     x: 0,         
     updateCount: function(){  
         this.x++;  
         console.log(this.x);  
     }  
 }  

// 下面两段代码的实现是一样的

[javascript]view plain copy
 document.querySelector('button').addEventListener('click', function(){  
     logger.updateCount();  
 });  

document.querySelector('button').addEventListener('click', logger.updateCount.bind(logger));
    如何，这就是我之前说的，本来通常情况下处理函数都要用一层匿名函数包裹一下，才能维持处理函数本身的this.这里直接通过.bind(logger)人为的将其执行时的this指向logger对象。
.bind()创建了一个函数，当这个函数在被调用的时候，它的 this 关键词会被设置成被传入的值（这里指调用bind()时传入的参数）。
    （二）setTimeout

[javascript]view plain copy
 function LateBloomer() {  
   this.petalCount = Math.ceil( Math.random() * 12 ) + 1;  
 }  
    
 // declare bloom after a delay of 1 second  
 LateBloomer.prototype.bloom = function() {  
   window.setTimeout( this.declare.bind( this ), 1000 );  
 };  
    
 LateBloomer.prototype.declare = function() {  
   console.log('I am a beautiful flower with ' + this.petalCount + ' petals!');  
 };  

看一下这里this.dclare.bind(this)，相当于将LateBloomer的实例对象传递到declare中，是不是setTimeout简洁了很多，同时不会破坏其他执行函数的结构。
（三）请完整阅读下面的代码

   //设立一个简单地对象作为“上下文”
var context = { foo: "bar" };

//一个在this上下文中指向foo变量的函数
function returnFoo () {
   return this.foo;
}

// 变量在作用域中不存在，因此显示undefined
returnFoo(); // => undefined

// 如果我们把它绑定在context上下文中
var bound = returnFoo.bind(context);

// 现在的作用域中有这个变量了
bound(); // => "bar"

//
// 这就是Function.prototype.bind的作用.
//由于returnFoo也是函数，因此它继承了function的原型
//
// 如果你觉得享受，接着往下读，下面更精彩
//

// 有许多方法将函数绑定在一个上下文中
// Call和Apply让你能在上下文中调用函数
returnFoo.call(context); // => bar
returnFoo.apply(context); // => bar

// 将函数添加到对象中
context.returnFoo = returnFoo;
context.returnFoo(); // => bar

//
// 现在我们来玩一点诡异的东西
//

// Array.prototype 中有一个叫做slice的方法
// 对一个数组调用slice，可以返回一个从start index到end index的数组
[1,2,3].slice(0,1); // => [1]

// 因此我们把Array.slice赋值给一个本地变量slice
var slice = Array.prototype.slice;

//现在的slice是"自由的"，由于Array.prototype中的slice一般指定了上下文
//或者默认为this,此时slice将不起作用
slice(0, 1); // => TypeError: can't convert undefined to object
slice([1,2,3], 0, 1); // => TypeError: ...

// 但是如果我们使用call或者apply，slice又将在一个上下文中执行
slice.call([1,2,3], 0, 1); // => [1]

// Apply和Call差不多，知识参数要放在一个数组中
slice.apply([1,2,3], [0,1]); // => [1]

// 使用call没错了，那么能不呢使用bind呢？
// 没错，我们来把"call"绑定在slice上
slice = Function.prototype.call.bind(Array.prototype.slice);

// 现在slice可以把第一个参数作为上下文了
slice([1,2,3], 0, 1); // => [1]

//
// 很酷，对吧。现在再来完成一件事
//

// 现在我们对bind本身做一件刚才对silce做的事
var bind = Function.prototype.call.bind(Function.prototype.bind);

// 在这里总结一下，好好想想
// 发生了什么事? 我们改变了call，
// 返回一个接收一个函数和一个上下文作为ic桉树的函数
//并且返回了一个完全绑定的函数

// 回到最初的例子
var context = { foo: "bar" };
function returnFoo () {
   return this.foo;
}

// 现在来使用神奇的"bind"函数
var amazing = bind(returnFoo, context);
amazing(); // => bar
    最后第三部分的代码来自一段译文:https://variadic.me/posts/2013-10-22-bind-call-and-apply-in-javascript.html,代码很好所以忍不住拿来用,十分感谢.
    补充一段代码,关于Ajax的回调中,如何保持this:

$.ajax({
       url: url,
       type: 'post',
       dataType: 'json',
       data: {'info': info}
     })
     .done((function(data) {
       if(data.status){
         // 这里this指向的是外层bind进来的this
         this._data.process_type = info.process_type;
       }else{
         uUnique.noticeBox.showWarning(data.message);
       }
     }).bind(this));

本文链接：https://blog.csdn.net/liuxuefeng521/article/details/79166542

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

分布式光纤传感器的全球与中国市场2022-2028年：技术、参与者、趋势、市场规模及占有率研究报告_预计2026年中国分布式传感器市场规模有多大-程序员宅基地

文章浏览阅读3.2k次。本文研究全球与中国市场分布式光纤传感器的发展现状及未来发展趋势，分别从生产和消费的角度分析分布式光纤传感器的主要生产地区、主要消费地区以及主要的生产商。重点分析全球与中国市场的主要厂商产品特点、产品规格、不同规格产品的价格、产量、产值及全球和中国市场主要生产商的市场份额。主要生产商包括：FISO TechnologiesBrugg KabelSensor HighwayOmnisensAFL GlobalQinetiQ GroupLockheed MartinOSENSA Innovati_预计2026年中国分布式传感器市场规模有多大

07_08 常用组合逻辑电路结构——为IC设计的延时估计铺垫_基4布斯算法代码-程序员宅基地

文章浏览阅读1.1k次，点赞2次，收藏12次。常用组合逻辑电路结构——为IC设计的延时估计铺垫学习目的：估计模块间的delay，确保写的代码的timing 综合能给到多少HZ，以满足需求！_基4布斯算法代码

OpenAI Manager助手（基于SpringBoot和Vue）_chatgpt网页版-程序员宅基地

文章浏览阅读3.3k次，点赞3次，收藏5次。OpenAI Manager助手（基于SpringBoot和Vue）_chatgpt网页版

关于美国计算机奥赛USACO，你想知道的都在这_usaco可以多次提交吗-程序员宅基地

文章浏览阅读2.2k次。USACO自1992年举办，到目前为止已经举办了27届，目的是为了帮助美国信息学国家队选拔IOI的队员，目前逐渐发展为全球热门的线上赛事，成为美国大学申请条件下，含金量相当高的官方竞赛。USACO的比赛成绩可以助力计算机专业留学，越来越多的学生进入了康奈尔，麻省理工，普林斯顿，哈佛和耶鲁等大学，这些同学的共同点是他们都参加了美国计算机科学竞赛（USACO)，并且取得过非常好的成绩。适合参赛人群USACO适合国内在读学生有意向申请美国大学的或者想锻炼自己编程能力的同学，高三学生也可以参加12月的第_usaco可以多次提交吗

MySQL存储过程和自定义函数_mysql自定义函数和存储过程-程序员宅基地

文章浏览阅读394次。1.1 存储程序1.2 创建存储过程1.3 创建自定义函数1.3.1 示例1.4 自定义函数和存储过程的区别1.5 变量的使用1.6 定义条件和处理程序1.6.1 定义条件1.6.1.1 示例1.6.2 定义处理程序1.6.2.1 示例1.7 光标的使用1.7.1 声明光标1.7.2 打开光标1.7.3 使用光标1.7.4 关闭光标1.8 流程控制的使用1.8.1 IF语句1.8.2 CASE语句1.8.3 LOOP语句1.8.4 LEAVE语句1.8.5 ITERATE语句1.8.6 REPEAT语句。_mysql自定义函数和存储过程

半导体基础知识与PN结_本征半导体电流为0-程序员宅基地

文章浏览阅读188次。半导体二极管——集成电路最小组成单元。_本征半导体电流为0

随便推点

【Unity3d Shader】水面和岩浆效果_unity 岩浆shader-程序员宅基地

文章浏览阅读2.8k次，点赞3次，收藏18次。游戏水面特效实现方式太多。咱们这边介绍的是一最简单的UV动画（无顶点位移），整个mesh由4个顶点构成。实现了水面效果（左图），不动代码稍微修改下参数和贴图可以实现岩浆效果（右图）。有要思路是1，uv按时间去做正弦波移动2，在1的基础上加个凹凸图混合uv3，在1、2的基础上加个水流方向4，加上对雾效的支持，如没必要请自行删除雾效代码(把包含fog的几行代码删除)S..._unity 岩浆shader

广义线性模型——Logistic回归模型（1）_广义线性回归模型-程序员宅基地

文章浏览阅读5k次。广义线性模型是线性模型的扩展，它通过连接函数建立响应变量的数学期望值与线性组合的预测变量之间的关系。广义线性模型拟合的形式为：其中g(μY)是条件均值的函数（称为连接函数）。另外，你可放松Y为正态分布的假设，改为Y 服从指数分布族中的一种分布即可。设定好连接函数和概率分布后，便可以通过最大似然估计的多次迭代推导出各参数值。在大部分情况下，线性模型就可以通过一系列连续型或类别型预测变量来预测正态分布的响应变量的工作。但是，有时候我们要进行非正态因变量的分析，例如：（1）类别型.._广义线性回归模型

HTML+CSS大作业环境网页设计与实现(垃圾分类) web前端开发技术 web课程设计网页规划与设计_垃圾分类网页设计目标怎么写-程序员宅基地

文章浏览阅读69次。环境保护、保护地球、校园环保、垃圾分类、绿色家园、等网站的设计与制作。总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频视频 Flash的应用、ul li、下拉导航栏、鼠标划过效果等知识点，网页的风格主题也很全面：如爱好、风景、校园、美食、动漫、游戏、咖啡、音乐、家乡、电影、名人、商城以及个人主页等主题，学生、新手可参考下方页面的布局和设计和HTML源码（有用点赞△）一套A+的网_垃圾分类网页设计目标怎么写

C# .Net 发布后,把dll全部放在一个文件夹中,让软件目录更整洁_.net dll 全局目录-程序员宅基地

文章浏览阅读614次，点赞7次，收藏11次。之前找到一个修改 exe 中 DLL地址的方法, 不太好使,虽然能正确启动, 但无法改变 exe 的工作目录,这就影响了.Net 中很多获取 exe 执行目录来拼接的地址 ( 相对路径 ),比如 wwwroot 和代码中相对目录还有一些复制到目录的普通文件等等,它们的地址都会指向原来 exe 的目录, 而不是自定义的 “lib” 目录,根本原因就是没有修改 exe 的工作目录这次来搞一个启动程序,把 .net 的所有东西都放在一个文件夹,在文件夹同级的目录制作一个 exe._.net dll 全局目录

BRIEF特征点描述算法_breif description calculation 特征点-程序员宅基地

文章浏览阅读1.5k次。本文为转载，原博客地址：http://blog.csdn.net/hujingshuang/article/details/46910259简介 BRIEF是2010年的一篇名为《BRIEF:Binary Robust Independent Elementary Features》的文章中提出，BRIEF是对已检测到的特征点进行描述，它是一种二进制编码的描述子，摈弃了利用区域灰度..._breif description calculation 特征点

房屋租赁管理系统的设计和实现，SpringBoot计算机毕业设计论文_基于spring boot的房屋租赁系统论文-程序员宅基地

文章浏览阅读4.1k次，点赞21次，收藏79次。本文是《基于SpringBoot的房屋租赁管理系统》的配套原创说明文档，可以给应届毕业生提供格式撰写参考，也可以给开发类似系统的朋友们提供功能业务设计思路。_基于spring boot的房屋租赁系统论文