JavaScript 中的 Function.prototype.bind() 方法
转载自:https://www.cnblogs.com/zztt/p/4122352.html
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 中的 Function.prototype.bind() 方法的更多相关文章
- 浅析 JavaScript 中的 Function.prototype.bind() 方法
Function.prototype.bind()方法 bind() 方法的主要作用就是将函数绑定至某个对象,bind() 方法会创建一个函数,函数体内this对象的值会被绑定到传入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 Function.prototype.bind
语法: fn.bind(obj,arg1,arg2,arg3...) bind是es5新增的方法,顾名思义,它的作用是将函数绑定到某个对象上,就像是某个对象调用方法一样.其本质还是改变了该函数的上下文 ...
随机推荐
- 查找目录下指定类型的所有文件(maven 打包提取脚本)
1 首先想到的是递归遍历目录 筛选出符合条件的文件 dir命令递归遍历目录 /b控制显示格式 /s递归 /ad 只显示目录 dir /b/s .\* 判断文件类型 操作数得用`` rem 取出文件扩 ...
- python3-disc和set
dict Python内置了字典:dict的支持,dict全称dictionary,在其他语言中也称为map,使用键-值(key-value)存储,具有极快的查找速度. 举个例子,假设要根据同学的名字 ...
- ltp-ddt eth_parallel_processing
ETH_S_FUNC_PARALLEL_PROCESSING: source 'common.sh'; prepare_nfs_mount.sh "/mnt/nfs_mount"| ...
- 【串线篇】spring boot全面接管springMvc
一.Spring MVC auto-configuration Spring Boot 自动配置好了SpringMVC 以下是SpringBoot对SpringMVC的默认配置:(WebMvcAutoC ...
- Test 6.23 T1 扫雷
题目背景 题目描述 输入格式 输出格式 样例输入输出 数据范围 解析 我们设两个作弊器的参数分别为\((a_1,b_1)\)和\((a_2,b_2)\),那么设 \[ S1=\frac{a_1}{b_ ...
- intraweb首次与LayUI结合
intraweb可以说是Delphi Web开发的好帮手,但是自带的控件搭建页面,感觉不是那么美观,于是想引用一个UI框架,Delphi来提供后台访问,但是发现一个问题,如果intraweb用模版,L ...
- 各种math函数
fabs()绝对值函数 #include<stdio.h> #include<math.h> int main(){ double db=-12.56; printf(&quo ...
- python 3.6连接数据库(pymysql方式)
pymysql 模块可以通过 pip 安装.但如果你使用的是 pycharm IDE,则可以使用 project python 安装第三方模块. [File] >> [settings] ...
- Pycharm创建模板头部默认
PyCharm 打开,点击左上角 “FILE” 进入 “Settings”,进行头文件设置: 如下: 我的模板: #!/usr/bin/env python# -*- coding:utf-8 -*- ...
- python中将12345转换为54321
#将12345转换为54321 a = 12345789 ret = 0 #当a不为零的时候,循环条件为true,执行语句块 while a : #对a求余数,第一次循环则把5求出来 last = a ...