使用 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. HDOJ 2037简单的贪心算法

    代码: #include<iostream> using namespace std; int main() { int n,s,t1[100],t2[100],i,t,j; while( ...

  2. VS 编程常见错误及解决方法

    1. VS2013 无法打开包括文件:“cv.h"等一些头文件 解决方法: cv.h是build\include文件夹下的头文件,所在文件夹位置是D:\Program Files (x86) ...

  3. 将日期和时间作为 struct tm型的值直接向二进制文件进行读写

    #include <stdio.h> #include <time.h> char data_file[]="D:\\%\\datetime.dat"; v ...

  4. Java发邮件:Java Mail与Apache Mail

    作者:Vinkn 来自http://www.cnblogs.com/Vinkn/ 一.邮件简介 一封邮件由很多信息构成,主要的信息如下,其他的暂时不考虑,例如抄送等: 1.收件人:收件人的邮箱地址,例 ...

  5. web字体格式转换

    @font-face { font-family: 'emotion'; src: url('emotion.eot'); /* IE9*/ src: url('emotion.eot?#iefix' ...

  6. delphi定义自己的消息

    定义一个消息需要两个步骤: 1.声明一个消息标识符 2.声明一个消息记录类型 一个消息标识符是一个整数大小的常数.Windows自用低于1024的消息,所以当你声明你自己的消息,你应该开始高于这一数字 ...

  7. qt环境问题导致的编译错误

    /usr/include/qt5/QtCore/qprocess.h:245:24: error: missing binary operator before token "(" ...

  8. ckeditor字数限制

    var maxlength = 200; _editor=CKEDITOR.replace("ckeditor",{height:'130px'}); _editor.on('ke ...

  9. 理解Javascript 的闭包(closure)

    要理解闭包的概念先从变量的作用域说去 一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之 ...

  10. Unity3d 与IOS 相互调用

    Unity3d 与IOS 相互调用 @灰太龙 群63438968 我用的Unity3d 4.2版本,这一节说一下IOS与U3D的交互! 首先在U3D中写个方法:这个时候导出为ios代码必须是真机,模拟 ...