把玩Javascript中的bind
前言
今天闲着无聊随便逛了逛MDN,忽而看到一个方法Function.prototype.bind()
,突然发现除了使用这个方法之外都没有仔细琢磨过这个方法。于是乎,找到了kill time的事情-写博客。
基础知识简介
随便看看资料发现这玩意其实不简单,理解起来需要不少基础知识,在这里罗列一些,也算是一个总结和复习。
函数
下面这段话来自《JavaScript语言精粹》,名副其实地描述了函数的精髓。
调用一个函数会暂停当前函数的执行,传递控制权和参数给新函数。除了声明时定义的形式参数,每个函数还接收两个附加的参数:this和arguments。参数this在面向对象编程中非常重要,他的值取决于调用的模式。在JavaScript里面一共有四种调用模式:方法调用模式、函数调用模式、构造器调用模式和apply调用模式。这些模式在如何初始化关键参数this上面存在差异。
方法调用模式
当一个函数被保存为对象的一个属性时,我们称它为一个方法。当一个方法被调用的时候,this被绑定到该对象。
var info = {
name: 'yuanzm',
sayName: function() {
console.log(this.name);
}
}
info.sayName(); //yuanzm
函数调用模式
当一个函数并非为一个对象的属性的时候,他就是被当做一个函数来调用的。此模式调用函数的时候,this被绑定到全局对象。这是语言设计上的一个错误。倘若语言设计正确,this应该是绑定到外部函数的this变量。
var name = "yuanzm"
var sayName = function() {
console.log(this.name);
}
sayName();// yuanzm
构造器调用模式
如果在一个函数前面带上new来调用,那么背地里将会创建一个连接到该函数的prototype成员的新对象,同时this会被绑定到新对象上。(JavaScript原型相关知识这里不做赘述)
function Info(name) {
this.name = name;
}
Info.prototype.sayName = function() {
console.log(this.name);
}
var info = new Info('yuanzm');
info.sayName();//yuanzm
Apply调用模式
根据MDN的定义
The apply() method calls a function with a given this value and arguments provided as an array (or an array-like object).
var numbers = [5, 6, 2, 3, 7];
var max = Math.max.apply(null, numbers);
类数组
一个类数组被定义为:
- 具有:指向对象元素的数字索引下标以及 length 属性告诉我们对象的元素个数
- 不具有:诸如 push 、 forEach 以及 indexOf 等数组对象具有的方法
符合上述定义的类数组是长下面这样子的:
var my_object = {
'0': 'zero',
'1': 'one',
'2': 'two',
'3': 'three',
'4': 'four',
length: 5
};
前面提到的arguments
也是类数组。很多时候,处理类数组最省事的方法就是将它转化成数组。那么就涉及到一个非常有意思的话题:将类数组转换成数组。
将类数组转换成数组非常简单,调用Array自带的方法即可:
Array.prototype.slice.call(arguments);
其中call换成apply也是一样的。
简单解释一下,slice方法常规的调用方式为array.slice(start, end)
,会对array中的一段做浅复制
,首先复制array[start], 一直复制到array[end]。前面提到过apply(或call)会切换一个函数调用的上下文,也就是Array.prototype.slice.call(arguments);
手动绑定了需要操作的array为arguments,由于arguments和数组一样具有下标,所以这个方法也是可行的,因而产生了一个新的数组,这个数组具有普通数组的所有方法,同时具有arguments每一个下标对应的值。
bind
简介
前面说了这么多,主角终于登场了!不过为了凸显它的作用,还是需要抛出一段达不到我们需求的代码。
var name = 'yuan'
var info = {
name: "yuanzm",
sayName: function() {
console.log(this.name);
}
}
var sayName = info.sayName;
// 我们本身是希望得到yuanzm的,但是确得到了yuan这个结果。为什么会得到这个结果,前面的长篇大论起作用了。
// 如果是采用info.sayName()这种调用方式,符合函数的方法调用模式,函数内部的this是info对象;
// 如果令一个变量sayName为info.sayName,这个时候再调用函数,就是普通的函数调用模式了,结果自然为yuan。
sayName(); // yuan
那么我们使用bind就是希望最后得到的结果为yuanzm
。
现在我们可以好好介绍bind了。根据MDN的定义:
The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
翻译过来就是,bind()方法会创建一个新函数,称为绑定函数.当调用这个绑定函数时,绑定函数会以创建它时传入 bind()方法的第一个参数作为 this,传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。
他的语法是:
fun.bind(thisArg[, arg1[, arg2[, ...]]]);
解决问题
有了bind,上述问题我们就能够得到想要的结果了:
var name = 'yuan'
var info = {
name: "yuanzm",
sayName: function() {
console.log(this.name);
}
}
var sayName = info.sayName.bind(info);
sayName(); // yuanzm
bind的用法在MDN上面描述得很详细,本文的目的也不是为了照搬MDN,所以这里有关bind使用的部分就到这儿,接下来我们去看看Javascript库中bind的实现
Prototype中的bind
很久之前Prototype的bind写法是下面这样的(注释为本人所加):
Function.prototype.bind = function(){
// bind作为Function的prototype属性,每一个函数都具有bind方法,其中的this指向调用该方法的函数(也即一个函数对象实例)
var fn = this;
// 前面说过,这个方法是为了将类数组转换成数组
var args = Array.prototype.slice.call(arguments);
// 数组的shift方法会移除数组的第一个元素,在bind方法的参数里面,第一个参数就是需要绑定this的对象
var object = args.shift();
return function(){
return fn.apply(object,
// 现在的args是移除了最初参数中第一个参数后的数组,也就是新函数的预设的初始参数。
// array.concat(items...)方法产生一个新数组,它包含一份array的浅复制,并把一个或者多个参数item附加在其后。
// 如果参数item是一个数组,那么它的元素会被分别添加。
// 于是这一行代码产生了一个参数数组,这个数组由预设的初始参数(如果存在)和新传递的参数组成。
args.concat(Array.prototype.slice.call(arguments)));
};
};
在最新的版本1.7.2(2015.06.23查阅官网)中https://github.com/sstephenson/prototype/blob/master/src/prototype/lang/function.js#L115,bind是下面这样子的:
function bind(context) {
if (arguments.length < 2 && Object.isUndefined(arguments[0]))
return this;
if (!Object.isFunction(this))
throw new TypeError("The object is not callable.");
var nop = function() {};
var __method = this, args = slice.call(arguments, 1);
var bound = function() {
var a = merge(args, arguments);
// Ignore the supplied context when the bound function is called with
// the "new" keyword.
var c = this instanceof bound ? this : context;
return __method.apply(c, a);
};
nop.prototype = this.prototype;
bound.prototype = new nop();
return bound;
}
可见,除了加了一些异常情况判断,核心代码和之前并无大差别。
结语
总得来说apply、call和bind都是为了手动绑定this对象,目的上没有什么区别。但是bind和另外两者的明显的区别是,bind会产生一个新的函数,这个函数还可以有预设的参数,这在很多时候会比apply和call更加好用。合理利用apply、call和bind会使得javaScript代码更加优雅。
参考资料
Function.prototype.apply()
JavaScript 的怪癖 8:“类数组对象”
how does Array.prototype.slice.call() work?
JavaScript’s Apply, Call, and Bind Methods are Essential for JavaScript Professionals
把玩Javascript中的bind的更多相关文章
- JavaScript中的bind,call和apply函数的用法和区别
一直没怎么使用过JavaScript中的bind,call和apply, 今天看到一篇比较好的文章,觉得讲的比较透彻,所以记录和总结如下 首先要理解的第一个概念,JavaScript中函数调用的方式, ...
- Javascript中的bind详解
前言 用过React的同学都知道,经常会使用bind来绑定this. import React, { Component } from 'react'; class TodoItem extends ...
- JavaScript中的bind方法及其常见应用
一.bind()方法的实现 在JavaScript中,方法往往涉及到上下文,也就是this,因此往往不能直接引用.就拿最常见的console.log("info…")来说,避免书写 ...
- Javascript中的bind()函数
今天看到公司大神的一段代码: function ReplaceProcessor() { this._dom = { btnReplace: $('#ro_btnReplace'), btnCompl ...
- javascript 中的 bind (编辑中。。。。)
这篇文章说的非常好!http://my.oschina.net/blogshi/blog/265415 我的体会就是,函数中的this,指的是运行时,它是被哪个对象调用的.因为javascrpit的函 ...
- Javascript中的Bind 、Call和Apply
看以下代码: var bind = Function.prototype.call.bind(Function.prototype.bind); 第一眼看上去,我能猜出它究竟是用来做什么的.它把x.y ...
- javascript 中 function bind()
Function bind() and currying <%-- All JavaScript functions have a method called bind that binds t ...
- Javascript中的Bind,Call和Apply
http://www.html-js.com/article/JavaScript-functional-programming-in-Javascript-Bind-Call-and-Apply?s ...
- 深入浅出 妙用Javascript中apply、call、bind
apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. Jav ...
随机推荐
- GNU/Linux的GNU是什么意思
这个组织中黑客云集,而且多是掌握核心技术的真正高手,他们的作品多是编译器.词法/语法分析器.底层函数库等大作.更重要的不是他们的技术,而是他们的哲学!他们的哲学就是技术上的“共产主义”——人人为我,我 ...
- 004_Nginx 499错误的原因及解决方法
一. 今天进行系统维护,发现了大量的499错误, 499错误 ngx_string(ngx_http_error_495_page), /* 495, https certificate error ...
- Jquery hover方法使用及 mouseenter与mouseleave和 mouseover与mouseout的区别
定义和用法 hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数. jQuery 1.7 版本前该方法触发 mouseenter 和 mouseleave 事件. jQuery 1.8 ...
- Myeclipse10.7安装git插件并将Java项目上传到码云(github)
注:本文来源:外匹夫的<Myeclipse10.7安装git插件并将Java项目上传到码云(github)> 一.先说说安装egit插件的步骤(安装egit不成功的原因主要是下载的egit ...
- 如何理解深度学习中的Transposed Convolution?
知乎上的讨论:https://www.zhihu.com/question/43609045?sort=created 不过看的云里雾里,越看越糊涂. 直到看到了这个:http://deeplearn ...
- vue-swiper的使用
写博客不是我的爱好,只是人脑毕竟空间只有那么大,有时候会忘了,好记性不如烂笔头,所以通过博客记录点点滴滴,以后可以翻出来看. vue-awesome-swiper官网链接https://www.npm ...
- ZOJ 3229 Shoot the Bullet(有源汇上下界最大流)
题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=3442 题目大意: 一个屌丝给m个女神拍照,计划拍照n天,每一天屌丝给 ...
- hdu2289二分答案 圆台体积
精度小一点就能过 #include<bits/stdc++.h> #define maxn 1000000009 #define esp 1e-9 #define PI 3.1415926 ...
- 使用jdk中提供的排序方式
package com.bjpowernode.t01; import java.util.Arrays; /** * 使用jdk中提供的排序方式 * */public class TestArray ...
- 2018-2019-2 网络对抗week1 Kali安装 20165333陈国超
Kali安装 安装过程是按照网上的教程装的,链接点击[https://blog.csdn.net/KNIGH_YUN/article/details/79949512] 安装成功的截图 主要说一下安装 ...