浅析 JavaScript 中的 Function.prototype.bind() 方法
Function.prototype.bind()方法
bind()
方法的主要作用就是将函数绑定至某个对象,bind()
方法会创建一个函数,函数体内this对象的值会被绑定到传入bind()
函数的值。
例如,在 f()
函数上调用 bind()
方法并传入参数 obj
,即 f.bind(obj)
,这将返回一个新函数, 新函数会把原始的函数 f()
当做 obj
的方法来调用,就像 obj.f()
似的,当然这时 f() 函数中的 this
对象指向的是 obj
。
简单使用情形一
var o={
f: function () {
var self=this;
var fff=function() {
console.log(self.value); //此时 this 指向的是全局作用域 global/window,因此需要使用 self 指向对象o
};
fff();
},
value: "Hello World!"
};
o.f(); // Hello World!
上例是我们常用了 保持 this
上下文的方法,把 this
赋值给了中间变量 self
,这样在内部嵌套的函数中能够使用 self
访问到对象o
,否则仍使用 this.value
,内部嵌套函数的this此时指向的是全局作用域,最后的输出将会是 undefined
,代码如下:
var o={
f: function () {
var self=this;
var fff=function() {
console.log(this.value);
};
fff();
},
value: "Hello World!"
};
o.f(); // undefined
但是,如果我们使用 bind()
函数,将fff
函数的绑定在对象o
中,即将fff()
函数内部的 this
对象绑定为对象 o
,那么可以遇见此时 this.value
是存在的。代码如下:
var o={
f: function () {
var self=this;
var fff=function() {
console.log(this.value); // bind(this) 中 this 指向的是o,这里也可直接写成 bind(o)
}.bind(this);
fff();
},
value: "Hello World!"
};
o.f(); // Hello World!
更普遍的使用情形
再看一个例子:
function f(y,z){
return this.x+y+z;
}
var m=f.bind({x:1},2);
console.log(m(3)); // 6
最后将输出 6
这是因为 bind()
方法会把传入它的第一个实参绑定给f函数体内的 this
,从第二个实参起,将依此传递给原始函数,因此 {x:1}
传递给this
,2
传递给形参y
,m(3)
调用时的3
传递给形参z
。
其实这个例子 f()
函数能够处理部分参数,分步计算 ( bind()
时处理了参数x
,和参数y
,调用 m(3)
时处理了参数z
)的过程其实是一个典型的Curry过程(Currying)。
bind()背后的简单原理
那么bind函数背后做了什么呢? 我们可以用以下代码来模拟:
Function.prototype.testBind = function (scope) {
var fn = this; // this 指向的是调用testBind方法的一个函数
return function () {
return fn.apply(scope, arguments);
}
};
下面是测试的例子:
var foo = {x: "Foo "};
var bar = function (str) {
console.log(this.x+(arguments.length===0?'':str));
};
bar(); // undefined
var testBindBar = bar.testBind(foo); // 绑定 foo
testBindBar("Bar!"); // Foo Bar!
当调用 testBind()
后,我们创建了一个新的函数,通过调用 apply
将 this
设置成 foo
, OK,现在应该比较清晰了,但实际 bind()
的实现远比上面的复杂,如上面提到的 curry化过程等,上面只是主要原理便于学习理解 bind()
函数。
参考资料:
Javascript权威指南
浅析 JavaScript 中的 Function.prototype.bind() 方法的更多相关文章
- JavaScript 中的 Function.prototype.bind() 方法
转载自:https://www.cnblogs.com/zztt/p/4122352.html Function.prototype.bind()方法 bind() 方法的主要作用就是将函数绑定至某个 ...
- 理解javascript中的Function.prototype.bind
在初学Javascript时,我们也许不需要担心函数绑定的问题,但是当我们需要在另一个函数中保持上下文对象this时,就会遇到相应的问题了,我见过很多人处理这种问题都是先将this赋值给一个变量(比如 ...
- 理解 JavaScript 中的 Function.prototype.bind
函数绑定(Function binding)很有可能是你在开始使用JavaScript时最少关注的一点,但是当你意识到你需要一个解决方案来解决如何在另一个函数中保持this上下文的时候,你真正需要的其 ...
- prototype.js中Function.prototype.bind方法浅解
prototype.js中的Function.prototype.bind方法: Function.prototype.bind = function() { var __method = this; ...
- 深入理解javascript中的Function.prototye.bind
函数绑定(Function binding)很有可能是你在开始使用JavaScript时最少关注的一点,但是当你意识到你需要一个解决方案来解决如何在另一个函数中保持this上下文的时候,你真正需要的其 ...
- Javascript中this作用域以及bind方法的重写
这是一个最近遇到的笔试题,出于尊重,不会说出该公司的名字,源于自身比较少,笔试题是将bind方法用ES3重写,使用bind这个方法,导致一时半会懵了,只记得bind可以改变this的作用域. 作为查漏 ...
- JavaScript 函数绑定 Function.prototype.bind
ECMAScript Edition5 IE9+支持原生,作用为将一个对象的方法绑定到另一个对象上执行. Function.prototype.bind = Function.prototype.bi ...
- javascript中的call(),apply(),bind()方法的区别
之前一直迷惑,记不住call(),apply(),bind()的区别.不知道如何使用,一直处于懵懂的状态.直到有一天面试被问到了这三个方法的区别,所以觉得很有必要总结一下. 如果有不全面的地方,后续再 ...
- 浅析 JavaScript 中的 函数 currying 柯里化
原文:浅析 JavaScript 中的 函数 currying 柯里化 何为Curry化/柯里化? curry化来源与数学家 Haskell Curry的名字 (编程语言 Haskell也是以他的名字 ...
随机推荐
- swiper轮播在ie浏览器上遇到的显示问题探索
前言: 最近项目有一个需求,想要下图效果,鼠标指向头像图片,图片会放大同时上面的轮播会跟着切换: 鼠标移开头像图片,图片变回原来的大小 注:下图是我根据上面需求已经实现的效果,所以截图方便说明 思考: ...
- linux系统下查看图片尺寸的命令
1.首先需要安装:imagemagick,即: # apt-get install imagemagick 2.用 identify 命令查询对应图片的信息,即: # identify logo.jp ...
- python-图像处理(映射变换)
做计算机视觉方向,除了流行的各种深度学习算法,很多时候也要会基础的图像处理方法. 记录下opencv的一些操作(图像映射变换),日后可以方便使用 先上一张效果图 图二和图三是同一种方法,只是变换矩阵不 ...
- 来,带你鸟瞰 Java 中4款常用的并发框架!
1. 为什么要写这篇文章 几年前 NoSQL 开始流行的时候,像其他团队一样,我们的团队也热衷于令人兴奋的新东西,并且计划替换一个应用程序的数据库. 但是,当深入实现细节时,我们想起了一位智者曾经说过 ...
- redis 系列4 数据结构之链表
一. 概述 链表提供了高效的节点重排能力,以及顺序性的节点访问方式,并且可能通过增删节点来灵活地调整链表的长度.作为一种数据结构,在C语言中并没有内置的这种数据结构.所以Redis构建了自己的链表实现 ...
- sql server 索引阐述系列四 表的B-Tree组织
一.概述 说到B-tree组织,就是指索引,它可以提供了对数据的快速访问.索引使数据以一种特定的方式组织起来,使查询操作具有最佳性能.当数据表量变得越来越大,索引就变得十分明显,可以利用索引查找快速满 ...
- ArcSDE数据库连接(直连、服务连)与GT_Geometry存储配置图解
众说周知,ArcSDE空间数据库引擎提供了两种连接数据库的方式.一是服务连接方式,一是直连方式.后者也是Esri所推崇的方式.但是,在客户的生产环境和开发商的开发环境中这两种方式都是有需求的.下面就以 ...
- 微信小程序onLaunch异步,首页onLoad先执行?
本来按照事件顺序,小程序初始化时触发App里的onLaunch,后面再执行页面Page里的onLoad,但是在onLaunch里请求获取是否有权限,等待返回值的时候Page里的onLoad事件就已经执 ...
- Spring Boot 1.5升级2.1 主要问题汇总
我们目前工作的系统是基于Spring Boot 1.5.19.RELEASE.Spring Cloud Edgware.SR3开发的,因为一个新项目开发过程的体验,所以在考虑升级到Spring Boo ...
- linux解压war包的命令
网上很多人说用jar包解压,但jar命令解压时不能指定目录,推荐使用unzip解压war包. 一.命令名: unzip 功 能说明:解压缩zip文 件 语 法:unzip [-cflptuvz][-a ...