1、什么是this

在JavaScript中this可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式,this 绑定的对象即函数执行的上下文环境(context)。

为了帮助理解,让我们来一起看一段代码:

// 作为对象方法调用
var test = {
a : 5,
b : 6,
sum : function () {
return this.a + this.b; // 此处this = test
}
}
alert(test.sum()); // 11

作为对象调用时this很容易理解,this等价于sum的调用者即上诉的test对象,如果作为函数调用时this=?

// 作为函数调用
a = 4;
b = 3;
function sum(){
return this.a + this.b; // 此处this = window
}
alert(sum()); // 7

此时函数sum是做为window对象的一个全局函数,因此sum的调用者为window,即this = window。

var test = {
a : 5,
b : 6,
sum : function (a,b) {
function getA(a) {
this.a = a; // 在window上增加了一个全局变量a
return this.a; // 此处this = window
}
function getB(b){
this.b = b; //在window上增加了一个全局变量b
return this.b; // 此处this = window
}
return getA(a) + getB(b);
}
}
alert(test.sum(4,3)); // 7
alert(a); // 4
alert(b); // 3

在这种情况下,我们希望getA() 和getB() 返回的值是test.a和test.b,但是此时闭包函数(即函数中的函数)getA和getB中this并不指向test的实例,该怎么办呢?我们不妨试试下面的方法:

var test = {
a : 5,
b : 6,
sum : function () {
var self = this; // 此处this = test的实例
function getA() {
return self.a;
}
function getB(){
return self.b;
}
return getA() + getB();
}
}
alert(test.sum());
alert(a); // 此处报错:a is not defined
alert(b); // 此处报错:a is not defined

在test对象的sum函数中用一个局部变量self来保存当前的this指针,这样在闭包函数getA和getB中就能通过self变量获取test实例的属性了。

看起来这样就能够解决闭包函数中this的问题了,但是,如果调用sum函数的并不是test的实例呢,这个时候var self=this还能起到作用,获取到test的实例吗?

2、使用call、apply和bind改变函数执行时的上下文(this)

使用call、apply和bind都能够是函数的上下文发生改变,那我们来具体看看这记者之间的区别吧。

call方法:

语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]])

定义:调用一个对象的一个方法,以另一个对象替换当前对象。

说明:call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

     如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

apply方法:

语法:apply([thisObj[,argArray]])

定义:应用某一对象的一个方法,用另一个对象替换当前对象。

说明:如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。

如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。

bind方法:

语法:bind(thisArg[, arg1[, arg2[, ...]]])

定义:将接受多个参数的函数变换成接受一个单一参数。

说明:bind()方法所返回的函数的length(形参数量)等于原函数的形参数量减去传入bind()方法中的实参数量(第一个参数以后的所有参数),因为传入bind中的实参都会绑定到原函数的形参。

哎呀妈呀,讲了那么多理论的东西,我都晕了,还是看看实际的例子:

var test = {
a : 5,
b : 6,
sum : function (a,b) {
var self = this;
function getA() {
return self.a;
}
function getB(){
return self.b;
}
alert(a);
alert(b);
return getA() + getB();
}
}
var obj = {a:2,b:3};
alert(test.sum.call(obj,4,5)); // 调用时self = this = obj,alert顺序4,5,5
alert(test.sum.apply(obj,[6,7])); // 调用时self = this = obj,alert顺序6,7,5
var sum = test.sum.bind(obj,8); // 此处返回一个只有一个参数的函数sum(b)
alert(sum(9)); // 调用时self = this = obj,alert顺序8,9,5

从上面的例子我们可以很清晰的看到call、apply和bind之间的区别。其中call和apply是差不多的,只是传参的形势不同(apply的第二个参数为一个数组或arguments),他们都是直接直接执行函数;

而bind函数将test.sum简化为另一个全局函数sum(b),sum(b)只需要传入一个参数即可。

3、解决js中烦人的this

call、apply和bind都可以应用于继承,在这里不再过多赘述,网上有很多这样的例子,参考:http://blog.csdn.net/wyyfwm/article/details/46349071

而我想讲一下这段时间我遇到的一些关于this比较头疼的事情。

<button id="btn">烦人的this</button>
<script>
var test = {
isSum: true,
sum: function (event, a, b) {
if (this.isSum) {   // this = button,这个时候不会执行alert(a+b)
alert(a + b);
}
}
}
var button = document.getElementById("btn");
button.addEventListener("click", test.sum, false);
</script>

这里我们就能发现问题所在了,当ID为btn的按钮被点击时会触发test.sum函数,但是这个时候的this=button,而且参数a、b如何传入呢?

这里就能够使用bind函数了,将test.sum函数简化为另一个新的函数,同时传入参数a和b,我们再看看下面的代码:

<button id="btn">this</button>
<script>
var test = {
isSum: true,
sum: function (a, b,event) {
if (this.isSum) {  // 此处this=test,this.isSum = true
alert(a + b);  // 9
}
}
}
var button = document.getElementById("btn");
button.addEventListener("click", test.sum.bind(test,4,5), false); // 此处test.sum.bind(test,4,5)返回一个新的函数function(event),
</script>

从上面的代码我们可以看到test.sum.bind(test,4,5)返回一个新的函数function(event),test、4、5分别被绑定到test.sum的上下文、参数a、参数b中。
当ID为btn的按钮被点击时会触发test.sum函数,此时改函数中的this=test,a=4,b=5。

这样就可以解决事件绑定时的this以及传参的问题了,包括现在常用js框架中的事件绑定,如jQuery、signals.min.js等等。

JS中的this、apply、call、bind(经典面试题)的更多相关文章

  1. js中call、apply、bind那些事

    前言 回想起之前的一些面试,几乎每次都会问到一个js中关于call.apply.bind的问题,比如- 怎么利用call.apply来求一个数组中最大或者最小值 如何利用call.apply来做继承 ...

  2. js中call、apply和bind的区别

    在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢.在说区别之前还是先总结一下三者的相似之处:1.都是用来改变函数的this对象的指向的.2.第一个参数都是this要指向的对 ...

  3. js中call、apply、bind那些事2

    前言 回想起之前的一些面试,几乎每次都会问到一个js中关于call.apply.bind的问题,比如… 怎么利用call.apply来求一个数组中最大或者最小值 如何利用call.apply来做继承 ...

  4. js中call、apply和bind到底有什么区别?

    介绍 在js中,每个函数的原型都指向Function.prototype对象(js基于原型链的继承).因此,每个函数都会有apply,call,和bind方法,这些方法继承于Function. 它们的 ...

  5. js中call、apply、bind的用法

    原文链接:http://www.cnblogs.com/xljzlw/p/3775162.html var zlw = { name: "zlw", sayHello: funct ...

  6. JS中call、apply、bind使用指南,带部分原理。

    为什么需要这些?主要是因为this,来看看this干的好事. box.onclick = function(){ function fn(){ alert(this); } fn();}; 我们原本以 ...

  7. js中call、apply、bind到底有什么区别?bind返回的方法还能修改this指向吗?

     壹 ❀ 引 同事最近在看angularjs源码,被源码中各种bind,apply弄的晕头转向:于是他问我,你知道apply,call与bind的区别吗?我说apply与call是函数应用,指定thi ...

  8. JS中call()和apply()以及bind()的区别

    一.方法定义: apply:调用一个对象的一个方法,用另一个对象替换当前对象.例如:B.apply(A, arguments);即A对象应用B对象的方法. call:调用一个对象的一个方法,用另一个对 ...

  9. JS中call()、apply()、bind()的用法

    其实是一个很简单的东西,认真看十分钟就从一脸懵B 到完全 理解! 先看明白下面: 例1 obj.objAge;  //17 obj.myFun()  //小张年龄undefined 例2 shows( ...

  10. js中call,apply,bind方法的用法

    call .apply.和bind 以上这三个方法都是js function函数当中自带的方法,用来改变当前函数this的指向. call()方法 语法格式: fun.call(thisArg[,ar ...

随机推荐

  1. 远程控制分析之VBS编码转换

    简介 分析这种VBS简单chr()函数编码的脚本技巧.只需要把vbs的execute()函数换成信息输出到控制台(dos窗口)函数就可以了. WSH.Echo "print your mes ...

  2. Postman 设置变量

  3. 微服务, 架构, 服务治理, 链路跟踪, 服务发现, 流量控制, Service Mesh

    微服务, 架构, 服务治理, 链路跟踪, 服务发现, 流量控制, Service Mesh 微服务架构   本文将介绍微服务架构和相关的组件,介绍他们是什么以及为什么要使用微服务架构和这些组件.本文侧 ...

  4. Linux 下面 oracle 数据库连接工具的安装还有特殊字符密码登录的设置

    1. 下载Oracle的连接客户端 https://www.oracle.com/database/technologies/instant-client/downloads.html 2. 我这里仅 ...

  5. [转帖]浅谈分布式一致性与CAP/BASE/ACID理论

    浅谈分布式一致性与CAP/BASE/ACID理论 https://www.cnblogs.com/zhang-qc/p/6783657.html ##转载请注明 CAP理论(98年秋提出,99年正式发 ...

  6. SACD-ISO音频镜像播放方式

    SACD-ISO 音频文件不需要解压也不需要挂载光盘,可以直拖入播放器播放. 播放器下载 foobar2000https://www.foobar2000.org/download 解码插件下载 Su ...

  7. 池化方法总结(Pooling)

       https://blog.csdn.net/mao_kun/article/details/50507376 在卷积神经网络中,我们经常会碰到池化操作,而池化层往往在卷积层后面,通过池化来降低卷 ...

  8. Python爬虫:现学现用xpath爬取豆瓣音乐

    爬虫的抓取方式有好几种,正则表达式,Lxml(xpath)与BeautifulSoup,我在网上查了一下资料,了解到三者之间的使用难度与性能 三种爬虫方式的对比. 这样一比较我我选择了Lxml(xpa ...

  9. 深度学习-Wasserstein GAN论文理解笔记

    GAN存在问题 训练困难,G和D多次尝试没有稳定性,Loss无法知道能否优化,生成样本单一,改进方案靠暴力尝试 WGAN GAN的Loss函数选择不合适,使模型容易面临梯度消失,梯度不稳定,优化目标不 ...

  10. 查询系统table条数

    ), RowCnt INT) EXEC sp_MSforeachtable 'INSERT INTO temp SELECT ''?'',COUNT(*) FROM ?' SELECT TableNa ...