函数调用

首先需要从函数的调用开始讲起。

JS(ES5)里面有三种函数调用形式:

func(p1, p2)
obj.child.method(p1, p2)
func.call(context, p1, p2) // 先不讲 apply

一般,初学者都知道前两种形式,而且认为前两种形式「优于」第三种形式。

从看到这篇文章起,你一定要记住,第三种调用形式,才是正常调用形式:

func.call(context, p1, p2)

其他两种都是语法糖,可以等价地变为 call 形式:

func(p1, p2) 等价于
func.call(undefined, p1, p2) obj.child.method(p1, p2) 等价于
obj.child.method.call(obj.child, p1, p2)

请记下来。(我们称此代码为「转换代码」,方便下文引用)

至此我们的函数调用只有一种形式:

func.call(context, p1, p2)
这样,this 就好解释了

this,就是上面代码中的 context。就这么简单。

this 是你 call 一个函数时传的 context,由于你从来不用 call 形式的函数调用,所以你一直不知道。

先看 func(p1, p2) 中的 this 如何确定:

当你写下面代码时

function func(){
console.log(this)
} func()

等价于

function func(){
console.log(this)
} func.call(undefined) // 可以简写为 func.call()

按理说打印出来的 this 应该就是 undefined 了吧,但是浏览器里有一条规则:

如果你传的 context 不是一个对象,那么 window 对象就是默认的 context。
(这条规则在 Node.js 和 strict 模式下会稍微不一样,不过那不是我们现在要讨论的)

因此上面的打印结果是 window。

如果你希望这里的 this 不是 window,很简单:

func.call(obj) // 那么里面的 this 就是 obj 对象了

再看 obj.child.method(p1, p2) 的 this 如何确定

var obj = {
foo: function(){
console.log(this)
}
} obj.foo()

按照「转换代码」,我们将 obj.foo() 转换为

obj.foo.call(obj)

好了,this 就是 obj。搞定。

总结

this就是最后执行函数的对象

作者:方应杭
链接:https://www.zhihu.com/question/19636194/answer/132143515
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

JavaScript中的this -- 好像很有道理版的更多相关文章

  1. 前端面试之JavaScript中数组的方法!【残缺版!!】

    前端面试之JavaScript中数组常用的方法 7 join Array.join()方法将数组中所有元素都转化为字符串并连接在-起,返回最后生成的字 符串.可以指定一个可选的字符串在生成的字符串中来 ...

  2. 关于javascript中arguments的一个很好的例子

    金克斯的迫击炮! 实现一个摧毁(destroyer)函数,第一个参数是待摧毁的数组,其余的参数是待摧毁的值 函数中的有隐式的不确定个数的参数,而我们在函数中将会用到它,很显然,这需要我们在 argum ...

  3. 浅谈JavaScript中的this

    引言 JavaScript 是一种脚本语言,因此被很多人认为是简单易学的.然而情况恰恰相反,JavaScript 支持函数式编程.闭包.基于原型的继承等高级功能.本文仅采撷其中的一例:JavaScri ...

  4. 【转】JavaScript中,{}+{}等于多少?

    原文链接:http://www.2ality.com/2012/01/object-plus-object.html 译文链接:http://www.cnblogs.com/ziyunfei/arch ...

  5. javascript中的splice方法介绍&示例

    javascript 中的 splice 方法很强大,它可以用于插入.删除或替换数组的元素. 下面来一一介绍! 删除:用于删除元素,两个参数,第一个参数(要删除第一项的位置),第二个参数(要删除的项数 ...

  6. [译]JavaScript中,{}+{}等于多少?

    最近,Gary Bernhardt在一个简短的演讲视频“Wat”中指出了一个有趣的JavaScript怪癖:在把对象和数组混合相加时,会得到一些你意想不到的结果.本篇文章会依次讲解这些计算结果是如何得 ...

  7. 深入浅出 JavaScript 中的 this

    在 Java 等面向对象的语言中,this 关键字的含义是明确且具体的,即指代当前对象.一般在编译期确定下来,或称为编译期绑定.而在 JavaScript 中,this 是动态绑定,或称为运行期绑定的 ...

  8. Javascript中的Label语句

    在javascript中,我们可能很少会去用到 Label 语句,但是熟练的应用 Label 语句,尤其是在嵌套循环中熟练应用 break, continue 与 Label 可以精确的返回到你想要的 ...

  9. 【转】深入浅出 JavaScript 中的 this

    Java 等面向对象的语言中,this 关键字的含义是明确且具体的,即指代当前对象.一般在编译期确定下来,或称为编译期绑定.而在 JavaScript 中,this 是动态绑定,或称为运行期绑定的,这 ...

随机推荐

  1. 【SQL】数据库中的五种约束

    #五大约束 1.主键约束(Primay Key Coustraint) 唯一性,非空性 2.唯一约束 (Unique Counstraint)唯一性,可以空,但只能有一个 3.检查约束 (Check ...

  2. Junit4学习与使用【转】

    参考: http://blog.csdn.net/qqhjqs/article/details/42219037

  3. golang channle close() x,ok := <- c

    close为内置函数 close内置函数关闭一个通道channle,其效果为:在最后的值从已关闭的信道中被接收后,任何对其的接收操作都会无阻塞的成功.对于已关闭的信道使用v,ok := <-   ...

  4. php中inset 和 和 empty 的区别

    inset函数 用途:检测变量是否设置判断:检测变量是否设置,并且不是 NULL.如果已经使用 unset() 释放了一个变量之后,它将不再是 isset().若使用 isset() 测试一个被设置成 ...

  5. 【转载】RPG颜色参考表

    https://blog.csdn.net/a949308398/article/details/17013087

  6. 一个CLR20r3 错误解决。

    好久没写过winform程序了,用devexpress写了个小工具,连一个本地的数据库,感觉不会出什么异常,连接时就没加捕获,调通之后就没管,因为特殊需求,需要把程序放到腾讯云上运行,结果一运行就报错 ...

  7. JS判断是电脑浏览器还是手机端浏览器,并根据不同的终端跳转到不同的网址

    <!DOCTYPE html> <html> <script> function browserRedirect() { var sUserAgent = navi ...

  8. ASP.NET Web API 2 之文件下载

    Ø  前言 目前 ASP.NET Web API 的应用非常广泛,主要承载着服务端与客户端的数据传输与处理,如果需要使用 Web API 实现文件下载,该 实现呢,其实也是比较简单,以下示例用于下载安 ...

  9. Windows 查看某个端口号是否被占用

    Ø  前言 在 Windows 下很多系统或服务都需要使用独立的端口号,实现网络数据传输,如果需要知道某个端口号是否被占用,就可以使用下面步骤了. 1.   首先打开命令窗口,Windows + R ...

  10. zookeeper windows伪集群搭建

    1.下载zookeeper http://mirror.bit.edu.cn/apache/zookeeper/ 解压后,目录重命名为zookeeper1,进入 conf目录,把zoo_sample. ...