##

阅读数:6537

最近自学JavaScript,学到bind方法这块儿有些地方不太明白,自己就查了些资料,结合自己的理解写了这篇文章以备后面回顾用。。。其实应该还是搬砖为主吧。

什么是this对象

先来说说什么是this对象吧,每个函数在调用的时候都会自动获取两个特殊变量:this和arguments对象。this值具体是指哪个对象是和该函数的执行环境相关的。如果是作为对象的方法,那么this就是对象实例本身;如果是一个全局函数,那么this就是window对象。用一句话来概括,this就是调用这个方法的对象。

保持this上下文

有时候,我们需要保持this的上下文,也就是在一个执行环境中想要访问到另一个执行环境的this值。在什么时候需要这么做呢?比如说将一个对象的方法赋值给了一个全局变量,然后在全局变量中调用这个方法,那么this值就不再是原来的对象而是window对象了,然而可能我们仍需要在全局环境中按照对象的方法来调用。又比如说一个方法中包含了闭包,闭包是无法访问到其外部函数的this对象的,因为this对象是在调用方法的时候自动生成,内部函数在搜索这两个变量的时候只会搜索到其自身的活动对象,而不会沿着作用域链往外搜索,所以闭包访问不到外部函数的this值。如果要想访问,就应该想办法把this值传递下去。 
通常可以通过这样的方式保持this上下文:在外部函数中将this缓存到一个变量中,通常变量名称使用self, _this 或者 context,那么闭包就可以通过这个可访问的变量来获取外部函数的this值,this上下文得以保持。比如下面的代码:

var myObj = {

    specialFunction: function () {},
getAsyncData: function (cb) {
cb();
}, render: function () {
var that = this;
this.getAsyncData(function () {
that.specialFunction();
});
}
};
myObj.render();

这里有一个对象myObj,它有一个render实例方法,在这个方法内部又调用了它的另一个实例方法getAsyncData,而这个方法有一个新的函数作为参数,这个函数相当于是一个闭包,是不能获取到外部函数中的this值的,为了在这个闭包中也能访问实例方法,需要获取到外部环境的this值,这里把this(this为调用render方法的对象,即实例对象myObj)缓存到了变量that中。

此外还可通过bind方法,这就是本文所要讲述的重点。

bind方法

bind方法生成了一个新的函数,称为绑定函数,传入bind方法的第一个参数作为这个绑定函数的this对象,传入bind的第二个参数连同后面调用绑定函数时传入的参数按照先后顺序(传入bind的在前)构成绑定函数的参数。 
现在我们把上面的例子修改一下:

render: function () {
this.getAsyncData(function () { this.specialFunction(); }.bind(this)); }

.bind()创建了一个函数,当这个函数在被调用的时候,它的 this 关键词会被设置成被传入的值(这里指调用bind()时传入的参数) 
再看一个bind的使用例子:

var foo = {
x: 3
}
var bar = function(){
console.log(this.x);
}
bar();
// undefined var boundFunc = bar.bind(foo); boundFunc();
//

将bar方法和foo对象绑定后,bar中的this对象被替换为了foo,并生成了一个新的函数boundFunc,因此在全局环境中调用boundFunc时,也可以访问到foo对象的属性。 
还可以了解一下Function.prototype.bind()内部是什么样的:

Function.prototype.bind = function (scope) {
var fn = this;//this是调用bind方法的对象(别的方法对象)
return function () {
return fn.apply(scope);//把fn环境中的this替换为scope
};
}

可看出,bind方法返回了一个新的函数,这个方法返回了原方法(调用bind的方法)通过apply修改作用域(传入的参数scope)后的执行结果。如果调用这个新函数则会立即执行fn.apply(scope),并返回执行后的结果。

fn.bind()

与call、apply的区别

call、apply是修改函数的作用域,并且立即执行,而bind是返回了一个新的函数,不是立即执行,即call and apply call a function while bind creates a function。bind在回调函数中常用到。

参考资料: 
理解 JavaScript 中的 Function.prototype.bind 
js中bind、call、apply函数的用法 
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

bind研究(一)转载的更多相关文章

  1. Fiddler实战深入研究(二)[转载]

    Fiddler实战深入研究(二) 阅读目录 Fiddler不能捕获chrome的session的设置 理解数据包统计 请求重定向(AutoResponder) Composer选项卡 Filters选 ...

  2. Spring Security3十五日研究(转载)

    前言 南朝<述异记>中记载,晋王质上山砍柴,见二童子下棋,未看完,斧柄已烂,下山回村,闻同代人都去世了,自已还未变老.    因此发出“山中方一日,世上几千年” 的慨叹.原文寥寥几笔,读来 ...

  3. Android浮窗权限研究(转载)

    这篇博客主要介绍的是 Android 主流各种机型和各种版本的悬浮窗权限适配,但是由于碎片化的问题,所以在适配方面也无法做到完全的主流机型适配,这个需要大家的一起努力,这个博客的名字永远都是一个将来时 ...

  4. Winamp栈溢出漏洞研究【转载】

    课程简介 Winamp是一款非常经典的音乐播放软件,它于上世纪九十年代后期问世.与现在音乐播放软件行业百家争鸣的情况不同,当时可以说Winamp就是听音乐的唯一选择了,相信那个时代的电脑玩家是深有体会 ...

  5. HTML5中的Range对象的研究(转载)

    一:Range对象的概念 Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改页面上的任何区域,可以通过如下创建一个空的Range对象,如下: var  range = docu ...

  6. 闲扯游戏编程之html5篇--山寨版《flappy bird》源码

    新年新气象,最近事情不多,继续闲暇学习记点随笔,欢迎拍砖.之前的〈简单游戏学编程语言python篇〉写的比较幼稚和粗糙,且告一段落.开启新的一篇关于javascript+html5的从零开始的学习.仍 ...

  7. [原]使用node-mapnik生成openstreetmap-carto风格的瓦片

    上回说到如何在CentOS上部署node-mapnik,本想着接下来学习如何使用node-mapnik生成openstreetmap的瓦片图,没想到在接下来的近40天的时间里忙成了狗!好不容易等到元旦 ...

  8. 使用VisualVM分析性能

    性能分析神器VisualVM VisualVM 是一款免费的,集成了多个 JDK 命令行工具的可视化工具,它能为您提供强大的分析能力,对 Java 应用程序做性能分析和调优.这些功能包括生成和分析海量 ...

  9. 性能分析神器VisualVM

    VisualVM 是一款免费的,集成了多个 JDK 命令行工具的可视化工具,它能为您提供强大的分析能力,对 Java 应用程序做性能分析和调优.这些功能包括生成和分析海量数据.跟踪内存泄漏.监控垃圾回 ...

随机推荐

  1. mysql decimal(10,2)对应java类型

    下面我给出MYSQL类型与JAVA类型对应表,希望能够帮到您: 类型名称 显示长度 数据库类型 JAVA类型 JDBC类型索引(int) VARCHAR L+N VARCHAR java.lang.S ...

  2. StackExchange.Redis使用以及封装

    来源:http://www.cnblogs.com/qtqq/p/5951201.html Redis安装:http://www.runoob.com/redis/redis-install.html ...

  3. POJ3662或洛谷1948 Telephone Lines

    二分答案+单源最短路 POJ原题链接 洛谷原题链接 显然可以二分答案,检验\(mid\)可以使用最短路来解决. 将大于\(mid\)的边看成长度为\(1\)的边,说明要使用免费升级服务,否则长度为\( ...

  4. 网卡驱动如何设置组播MAC地址

    参考资料: https://blog.csdn.net/abccheng/article/details/50465268 将网卡加入到组播组中.

  5. .NET TCP协议之TcpClient与TcpListener交互

    问题:手机某项功能服务需要采用TCP协议与第三方交互通信.需先在公司内部测试此功能. 原因:第三方没有任何消息返回,也没有客服提供服务. 解决方法:公司内部做一个TCP协议服务器端,根据外网ip+端口 ...

  6. STL基础3:map

    #include <iostream> #include <map> #include <string> using namespace std; #define ...

  7. velocity 框架

    Java模板引擎 Velocity是一个基于java的模板引擎(template engine).它允许任何人仅仅使用简单的模板语言(template language)来引用由java代码定义的对象 ...

  8. js 实现获取当前日期/时间/星期

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. [cmd]如何设置 Windows 默认命令行窗口大小和缓冲区大小

    Windows 命令行 cmd 窗口系统默认的大小(80*40)对于现在的屏幕配置已经跟不上时代了,我们总是要把它改大些,而且缓冲区大小也想改得大大的.单纯的为当前的 Windows 命令行窗口修改显 ...

  10. 棋盘问题(NOIP1997)

    题目链接:棋盘问题 这道题水不水呢?还是很水的,为什么?因为数据太小了.直接算就行了. #include<bits/stdc++.h> using namespace std; int m ...