bind研究(一)转载
##
最近自学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研究(一)转载的更多相关文章
- Fiddler实战深入研究(二)[转载]
Fiddler实战深入研究(二) 阅读目录 Fiddler不能捕获chrome的session的设置 理解数据包统计 请求重定向(AutoResponder) Composer选项卡 Filters选 ...
- Spring Security3十五日研究(转载)
前言 南朝<述异记>中记载,晋王质上山砍柴,见二童子下棋,未看完,斧柄已烂,下山回村,闻同代人都去世了,自已还未变老. 因此发出“山中方一日,世上几千年” 的慨叹.原文寥寥几笔,读来 ...
- Android浮窗权限研究(转载)
这篇博客主要介绍的是 Android 主流各种机型和各种版本的悬浮窗权限适配,但是由于碎片化的问题,所以在适配方面也无法做到完全的主流机型适配,这个需要大家的一起努力,这个博客的名字永远都是一个将来时 ...
- Winamp栈溢出漏洞研究【转载】
课程简介 Winamp是一款非常经典的音乐播放软件,它于上世纪九十年代后期问世.与现在音乐播放软件行业百家争鸣的情况不同,当时可以说Winamp就是听音乐的唯一选择了,相信那个时代的电脑玩家是深有体会 ...
- HTML5中的Range对象的研究(转载)
一:Range对象的概念 Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改页面上的任何区域,可以通过如下创建一个空的Range对象,如下: var range = docu ...
- 闲扯游戏编程之html5篇--山寨版《flappy bird》源码
新年新气象,最近事情不多,继续闲暇学习记点随笔,欢迎拍砖.之前的〈简单游戏学编程语言python篇〉写的比较幼稚和粗糙,且告一段落.开启新的一篇关于javascript+html5的从零开始的学习.仍 ...
- [原]使用node-mapnik生成openstreetmap-carto风格的瓦片
上回说到如何在CentOS上部署node-mapnik,本想着接下来学习如何使用node-mapnik生成openstreetmap的瓦片图,没想到在接下来的近40天的时间里忙成了狗!好不容易等到元旦 ...
- 使用VisualVM分析性能
性能分析神器VisualVM VisualVM 是一款免费的,集成了多个 JDK 命令行工具的可视化工具,它能为您提供强大的分析能力,对 Java 应用程序做性能分析和调优.这些功能包括生成和分析海量 ...
- 性能分析神器VisualVM
VisualVM 是一款免费的,集成了多个 JDK 命令行工具的可视化工具,它能为您提供强大的分析能力,对 Java 应用程序做性能分析和调优.这些功能包括生成和分析海量数据.跟踪内存泄漏.监控垃圾回 ...
随机推荐
- mysql decimal(10,2)对应java类型
下面我给出MYSQL类型与JAVA类型对应表,希望能够帮到您: 类型名称 显示长度 数据库类型 JAVA类型 JDBC类型索引(int) VARCHAR L+N VARCHAR java.lang.S ...
- StackExchange.Redis使用以及封装
来源:http://www.cnblogs.com/qtqq/p/5951201.html Redis安装:http://www.runoob.com/redis/redis-install.html ...
- POJ3662或洛谷1948 Telephone Lines
二分答案+单源最短路 POJ原题链接 洛谷原题链接 显然可以二分答案,检验\(mid\)可以使用最短路来解决. 将大于\(mid\)的边看成长度为\(1\)的边,说明要使用免费升级服务,否则长度为\( ...
- 网卡驱动如何设置组播MAC地址
参考资料: https://blog.csdn.net/abccheng/article/details/50465268 将网卡加入到组播组中.
- .NET TCP协议之TcpClient与TcpListener交互
问题:手机某项功能服务需要采用TCP协议与第三方交互通信.需先在公司内部测试此功能. 原因:第三方没有任何消息返回,也没有客服提供服务. 解决方法:公司内部做一个TCP协议服务器端,根据外网ip+端口 ...
- STL基础3:map
#include <iostream> #include <map> #include <string> using namespace std; #define ...
- velocity 框架
Java模板引擎 Velocity是一个基于java的模板引擎(template engine).它允许任何人仅仅使用简单的模板语言(template language)来引用由java代码定义的对象 ...
- js 实现获取当前日期/时间/星期
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- [cmd]如何设置 Windows 默认命令行窗口大小和缓冲区大小
Windows 命令行 cmd 窗口系统默认的大小(80*40)对于现在的屏幕配置已经跟不上时代了,我们总是要把它改大些,而且缓冲区大小也想改得大大的.单纯的为当前的 Windows 命令行窗口修改显 ...
- 棋盘问题(NOIP1997)
题目链接:棋盘问题 这道题水不水呢?还是很水的,为什么?因为数据太小了.直接算就行了. #include<bits/stdc++.h> using namespace std; int m ...