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新增的方法,顾名思义,它的作用是将函数绑定到某个对象上,就像是某个对象调用方法一样.其本质还是改变了该函数的上下文 ...
随机推荐
- 51nod 1554 欧姆诺姆和项链
有一天,欧姆诺姆发现了一串长度为n的宝石串,上面有五颜六色的宝石.他决定摘取前面若干个宝石来做成一个漂亮的项链. 他对漂亮的项链是这样定义的,现在有一条项链S,当S=A+B+A+B+A+...+A+B ...
- Android Studio使用阿里云Aliyun Maven仓库
如下所示,在build.gradle中添加Aliyun Maven仓库 // Top-level build file where you can add configuration options ...
- less:运算
less中的运算 -任何数字.颜色或者变量都可以参加运算,运算应该被包裹在括号中. -例如:+-*. @width: 30px; .box { width: (20 + 5) * @width; } ...
- ForkJoinPool详解
本文的主要目的是介绍 ForkJoinPool 的适用场景,实现原理,以及示例代码. 说在前面可以说是说明,也可以说下面是结论: ForkJoinPool 不是为了替代 ExecutorService ...
- Zabbix分布式监控系统实践 自定义配置
https://www.zabbix.com/wiki/templates/start 环境介绍OS: Ubuntu 10.10 Server 64-bitServers:zabbix-server: ...
- 如何搭建一个spring boot项目
什么是springboot? Spring Boot俗称微服务.Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特 ...
- Test 7.12 T2
题目描述 有一张 n 个点 m 条边的无向图,其中有 s 个点上有加油站.有 Q 次询问(a,b,c), 问能否开一辆油箱容积为 c 的车从 a 走到 b. 输入格式 第一行三个整数 n,s, ...
- Flask学习笔记01之环境搭建
使用pycharm搭建Flask运行环境 1. 打开pycharm ,创建一个新的工程 2. 选择创建Flask项目 3. Flask项目创建成功,结构如下 4. 运行项目 5. 发送请求 over!
- 编辑器直接word直接上传word里的图片
tinymce是很优秀的一款富文本编辑器,可以去官网下载.https://www.tiny.cloud 这里分享的是它官网的一个收费插件powerpaste的旧版本源码,但也不影响功能使用. http ...
- flask-script实现自动刷新页面调试
本文flask==1.0.2 1.导入extension包 from flask_script import Manager 2.使用manager管理工具 app = Flask(__name__) ...