使用 Bind() 设置方法中 this 对象

//<button>获取随机的人</button>​
//<input type="text">​

​var user = {
data:[
{name:"张三", age:37},
{name:"李四", age:43}
],
clickHandler:function (event) {
var randomNum = ((Math.random () * 2 | 0) + 1) - 1; // 随机获取 0 或者 1
// 从数组中取出值,赋值到 Input 文本框内
$ ("input").val (this.data[randomNum].name + " " + this.data[randomNum].age);
}​
} ​// 绑定事件
$ ("button").click (user.clickHandler);

当点击的时候,会报错,因为 clickHandler 方法中的 this 指向的是 button 元素。

为了解决这个问题,我们可以使用 bind 方法。

使用如下代码:

$ ("button").click (user.clickHandler.bind (user));

代替之前:

$ ("button").click (user.clickHandler);

但是,在 IE9 以下和 Firefox 3.x 的浏览器中,是不支持 Bind 方法的,所以可以考虑加入如下方法。

// 判断是否支持 Bind 方法
if (!Function.prototype.bind) {
Function.prototype.bind = function (oThis) {
if (typeof this !== "function") {
throw new TypeError (" Function.prototype.bind - 绑定错误");
}
var aArgs = Array.prototype.slice.call (arguments, 1),
fToBind = this,
fNOP = function () {
},
fBound = function () {
return fToBind.apply (this instanceof fNOP && oThis
? this​
: oThis,
aArgs.concat (Array.prototype.slice.call (arguments)));
};
fNOP.prototype = this.prototype;
fBound.prototype = new fNOP ();
return fBound;
};
}

我们继续我们的例子,考虑如下代码:

// 全局变量
var data = [
{name:"王五", age:12},
{name:"陈六", age:14}
] var user = {
// 局部变量
data:[
{name:"张三", age:37},
{name:"李四", age:43}
],
showData:function (event) {
var randomNum = ((Math.random () * 2 | 0) + 1) - 1;
console.log (this.data[randomNum].name + " " + this.data[randomNum].age);
}
}
var showDataVar = user.showData;
showDataVar (); // 王五 12 (这里说明是从 全局变量而不是局部变量中取数据)​

当执行 showDataVar() 时,this 指向的是全局变量,而不是局部变量。这是因为 showDataVar() 是作为全局函数执行的,它是绑定的是全局作用域,也就是浏览器的 window 对象。

同样,我们可以通过使用 bind 方法指定 this 的值来解决这个问题:

// 把 showData 绑定到 user 对象
var showDataVar = user.showData.bind (user);

// 现在我们得到了 user 的值
showDataVar (); // 张三 43​

Bind() 可以实现借调方法 (Borrow Methods)

我们知道在 JavaScript 中我们可以传递函数,返回函数和借调函数。Bind() 方法会使借调函数变地非常简单易用。

如下代码:

// 这里有个 cars 对象,它里面没有任何函数。
var cars = {
data:[
{name:"黎明", age:14},
{name:"刘德华", age:2}
]
}

// 我们可以从上面例子中借调 user 对象中 showData () 函数。
// 我们绑定 user.showData 函数处理 cars 对象。
cars.showData = user.showData.bind (cars);
cars.showData (); // 黎明 14

这样写的代码有个问题,就是会在 cars 对象中,新加一个函数(showData),这可能不是我们的本意,因为可能 cars 对象中此前已经有了​一个叫 showData 的属性或者函数了。我们不想意外覆盖它。在下文中会说明,最好的借调方式是使用 Apply 或者 Call。

JavaScript 中的 Bind() 可以实现函数柯里化(Function Currying)

柯里化:是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术。百度百科的定义

首先,看以下代码,是个有三个参数的方法 greet():

function greet (gender, age, name) {
// 如果性别为男,使用 "先生", 否则使用 "女士"。​
var salutation = gender === "male" ? "先生" : "女士";

if (age > 25) {
return "你好," + name + salutation + "。";
}
else {
return "你好," + name + "。";
}
}

接下来,我们使用 bind() 来进行函数柯里化()。

// 因为我们不想使用 this 关键字,所以第一个参数我们传递 null。
var greetAnAdultMale = greet.bind (null, "male", 45);

greetAnAdultMale ("李连杰"); // "你好,李连杰先生。"​

var greetAYoungster = greet.bind (null, "", 16);
greetAYoungster ("成龙"); // "你好, 成龙。"​
greetAYoungster ("李小龙"); // "你好,李小龙。"

当我们使用 bind() 进行柯里化的时候,除了最后一个外,所有的参数都被预设置好了。

《Web 前端面试指南》2、JavaScript 的 Bind 函数进阶的更多相关文章

  1. web前端面试试题总结---javascript篇

    JavaScript 介绍js的基本数据类型. Undefined.Null.Boolean.Number.String. ECMAScript 2015 新增:Symbol(创建后独一无二且不可变的 ...

  2. 《Web 前端面试指南》1、JavaScript 闭包深入浅出

    闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...

  3. web前端面试试题总结---html篇

    HTML Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html> 标签之前.告知浏览器的解析器 ...

  4. web前端面试总结

    本文由我收集总结了一些前端面试题,初学者阅后也要用心钻研其中的原理,重要知识需要系统学习.透彻学习,形成自己的知识链.万不可投机取巧,临时抱佛脚只求面试侥幸混过关是错误的!也是不可能的! 前端还是一个 ...

  5. web前端面试试题总结---其他

    其他问题 原来公司工作流程是怎么样的,如何与其他人协作的?如何夸部门合作的? 你遇到过比较难的技术问题是?你是如何解决的? 设计模式 知道什么是singleton, factory, strategy ...

  6. web前端面试试题总结---css篇

    CSS 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种, IE 盒子模型.W3C 盒子模型: (2)盒模型: 内容(content).填充(padding).边界(m ...

  7. Web前端面试笔试题总结

    最近一段时间要毕业了,忙着找工作,见过不少笔试面试题,自己总结了一些加上网上找的一些整合了一下.答案暂时都东拼西凑出来了,但是还是先不发出来,一方面是答案并不是唯一的并且自己的答案不能保证对,另一方面 ...

  8. 2016年Web前端面试题目汇总

    转载: 2016年Web前端面试题目汇总 以下是收集一些面试中经常会遇到的经典面试题以及自己面试过程中未解决的问题,通过对知识的整理以及经验的总结,重新巩固自身的前端基础知识,如有错误或更好的答案,欢 ...

  9. 百度web前端面试2015.10.18

    邮件里通知的周日下午两点参加百度校招面试,我13:10分就到了,前台先让我拿了个面试资格单(上面是我的信息),然后在web前端面试入口排队,面试在百度食堂举行的,等了大概1个小时,放我去面试.都是一对 ...

随机推荐

  1. 浅析CSS中的haslayout

    作为一名web开发人员,最大的希望不是自己的水平有多高,而是希望浏览器厂家能够统一标准,相信任何一个只要是接触过web程序开发的人员都有那样的感受,就是浏览器之间的兼容性问题总是让我们的工作平添诸多的 ...

  2. 【BZOJ1012】【树状数组求区间最值】最大数maxnumber

    Description 现在请求你维护一个数列,要求提供以下两种操作: 1. 查询操作.语法:Q L 功能:查询当前数列中末尾L个数中的最大的数,并输出这个数的值.限制:L不超过当前数列的长度. 2. ...

  3. 【HOJ2430】【贪心+树状数组】 Counting the algorithms

    As most of the ACMers, wy's next target is algorithms, too. wy is clever, so he can learn most of th ...

  4. 执行*.sh脚本时提示Permission denied

    使用chmod修改.sh的权限 chmod u+x *.sh 再次执行

  5. 查看Oracle是否锁表

    --Oracle数据库操作中,我们有时会用到锁表查询以及解锁和kill进程等操作,那么这些操作是怎么实现的呢?本文我们主要就介绍一下这部分内容. --(1)锁表查询的代码有以下的形式: select ...

  6. IOS--UITextFiled的使用方法

    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]]; // Override point for ...

  7. Mosquitto-MQTT

    安装Mosquitto #To use the new repository you should first import the repository package signing key: w ...

  8. Js使用word书签填充内容

    Js使用word书签填充内容 1.在模板文件中需要填充的地方插入书签 填充内容为:(|光标所在处) 填写书签名,点击添加完成: 2.使用js打开模板,获取书签位置,填充数据: function pri ...

  9. Delphi控件的透明与不透明(要挨个解释一下原因),对InvalidateControl的关键理解

    procedure TForm1.Button3Click(Sender: TObject);begin if (csOpaque in ControlStyle) then ShowMessage( ...

  10. bzoj2783

    由于路径的深度是升序的所以我们可以考虑用前缀和的思想,用sum维护点到根路径上节点和对于每个点x存在路径和为s即这个点到根的路径上存在y,使sum[x]-sum[y]=s这显然是可以二分的 type ...