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

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

智能推荐

使用nginx解决浏览器跨域问题_nginx不停的xhr-程序员宅基地

文章浏览阅读1k次。通过使用ajax方法跨域请求是浏览器所不允许的，浏览器出于安全考虑是禁止的。警告信息如下：不过jQuery对跨域问题也有解决方案，使用jsonp的方式解决，方法如下：$.ajax({ async:false, url: 'http://www.mysite.com/demo.do', // 跨域URL ty..._nginx不停的xhr

在 Oracle 中配置 extproc 以访问 ST_Geometry-程序员宅基地

文章浏览阅读2k次。关于在 Oracle 中配置 extproc 以访问 ST_Geometry，也就是我们所说的使用空间SQL 的方法，官方文档链接如下。http://desktop.arcgis.com/zh-cn/arcmap/latest/manage-data/gdbs-in-oracle/configure-oracle-extproc.htm其实简单总结一下，主要就分为以下几个步骤。..._extproc

Linux C++ gbk转为utf-8_linux c++ gbk->utf8-程序员宅基地

文章浏览阅读1.5w次。linux下没有上面的两个函数，需要使用函数 mbstowcs和wcstombsmbstowcs将多字节编码转换为宽字节编码wcstombs将宽字节编码转换为多字节编码这两个函数，转换过程中受到系统编码类型的影响，需要通过设置来设定转换前和转换后的编码类型。通过函数setlocale进行系统编码的设置。linux下输入命名locale -a查看系统支持的编码_linux c++ gbk->utf8

IMP-00009: 导出文件异常结束-程序员宅基地

文章浏览阅读750次。今天准备从生产库向测试库进行数据导入，结果在imp导入的时候遇到“ IMP-00009:导出文件异常结束” 错误，google一下，发现可能有如下原因导致imp的数据太大，没有写buffer和commit两个数据库字符集不同从低版本exp的dmp文件，向高版本imp导出的dmp文件出错传输dmp文件时，文件损坏解决办法：imp时指定..._imp-00009导出文件异常结束

python程序员需要深入掌握的技能_Python用数据说明程序员需要掌握的技能-程序员宅基地

文章浏览阅读143次。当下是一个大数据的时代，各个行业都离不开数据的支持。因此，网络爬虫就应运而生。网络爬虫当下最为火热的是Python，Python开发爬虫相对简单，而且功能库相当完善，力压众多开发语言。本次教程我们爬取前程无忧的招聘信息来分析Python程序员需要掌握那些编程技术。首先在谷歌浏览器打开前程无忧的首页，按F12打开浏览器的开发者工具。浏览器开发者工具是用于捕捉网站的请求信息，通过分析请求信息可以了解请..._初级python程序员能力要求

Spring @Service生成bean名称的规则（当类的名字是以两个或以上的大写字母开头的话，bean的名字会与类名保持一致）_@service beanname-程序员宅基地

文章浏览阅读7.6k次，点赞2次，收藏6次。@Service标注的bean，类名：ABDemoService查看源码后发现，原来是经过一个特殊处理：当类的名字是以两个或以上的大写字母开头的话，bean的名字会与类名保持一致public class AnnotationBeanNameGenerator implements BeanNameGenerator { private static final String C..._@service beanname

随便推点

二叉树的各种创建方法_二叉树的建立-程序员宅基地

文章浏览阅读6.9w次，点赞73次，收藏463次。1.前序创建#include<stdio.h>#include<string.h>#include<stdlib.h>#include<malloc.h>#include<iostream>#include<stack>#include<queue>using namespace std;typed_二叉树的建立

解决asp.net导出excel时中文文件名乱码_asp.net utf8 导出中文字符乱码-程序员宅基地

文章浏览阅读7.1k次。在Asp.net上使用Excel导出功能，如果文件名出现中文，便会以乱码视之。解决方法： fileName = HttpUtility.UrlEncode(fileName, System.Text.Encoding.UTF8);_asp.net utf8 导出中文字符乱码

笔记-编译原理-实验一-词法分析器设计_对pl/0作以下修改扩充。增加单词-程序员宅基地

文章浏览阅读2.1k次，点赞4次，收藏23次。第一次实验词法分析实验报告设计思想词法分析的主要任务是根据文法的词汇表以及对应约定的编码进行一定的识别，找出文件中所有的合法的单词，并给出一定的信息作为最后的结果，用于后续语法分析程序的使用；本实验针对 PL/0 语言的文法、词汇表编写一个词法分析程序，对于每个单词根据词汇表输出： (单词种类, 单词的值) 二元对。词汇表：种别编码单词符号助记符0beginb..._对pl/0作以下修改扩充。增加单词

android adb shell 权限,android adb shell权限被拒绝-程序员宅基地

文章浏览阅读773次。我在使用adb.exe时遇到了麻烦.我想使用与bash相同的adb.exe shell提示符,所以我决定更改默认的bash二进制文件(当然二进制文件是交叉编译的,一切都很完美)更改bash二进制文件遵循以下顺序> adb remount> adb push bash / system / bin /> adb shell> cd / system / bin> chm..._adb shell mv 权限

投影仪-相机标定_相机-投影仪标定-程序员宅基地

文章浏览阅读6.8k次，点赞12次，收藏125次。1. 单目相机标定引言相机标定已经研究多年，标定的算法可以分为基于摄影测量的标定和自标定。其中，应用最为广泛的还是张正友标定法。这是一种简单灵活、高鲁棒性、低成本的相机标定算法。仅需要一台相机和一块平面标定板构建相机标定系统，在标定过程中，相机拍摄多个角度下（至少两个角度，推荐10~20个角度）的标定板图像（相机和标定板都可以移动），即可对相机的内外参数进行标定。下面介绍张氏标定法（以下也这么称呼）的原理。原理相机模型和单应矩阵相机标定，就是对相机的内外参数进行计算的过程，从而得到物体到图像的投影_相机-投影仪标定

Wayland架构、渲染、硬件支持-程序员宅基地

文章浏览阅读2.2k次。文章目录Wayland 架构Wayland 渲染Wayland的硬件支持简述：　翻译一篇关于和 wayland 有关的技术文章, 其英文标题为Wayland Architecture .Wayland 架构若是想要更好的理解 Wayland 架构及其与 X (X11 or X Window System) 结构；一种很好的方法是将事件从输入设备就开始跟踪, 查看期间所有的屏幕上出现的变化。这就是我们现在对 X 的理解。内核是从一个输入设备中获取一个事件，并通过 evdev 输入_wayland