函数调用

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

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. javaweb简单登陆例子

    JSP+Servlet+JavaBean简单程序例子——用户名密码登陆,摘自<Tomcat&JavaWeb 技术手册>,亲测可用. IDE环境:MyEclipse10 1.建立We ...

  2. 查询sql数据库中表占用的空间大小

    最近在给一家客户做系统维护时,需要查看数据库表的大小,相关的sql如下: 先在左上角下拉框中选对要查的数据库再执行以下语句 1. exec sp_spaceused '表名'          --( ...

  3. [leetcode-117]填充每个节点的下一个右侧节点指针 II

    (1 AC) 填充每个节点的下一个右侧节点指针 I是完美二叉树.这个是任意二叉树 给定一个二叉树 struct Node { int val; Node *left; Node *right; Nod ...

  4. C#中属性的使用——主动调用才发挥作用

    微软对属性定义如下: “属性是这样的成员:它提供灵活的机制来读取.编写或计算某个私有字段的值. 可以像使用公共数据成员一样使用属性,但实际上它们是称作“访问器”的特殊方法. 这使得可以轻松访问数据,此 ...

  5. ArcGIS出图调整

    上周为了出一张高分辨率的结合表,大致学了一下出图的过程. (1)打开基础数据的图层属性栏,将某一项属性值显示出来,如下图设置: 注意,字体尽量设置得小一点,否则出图的时候,字太大,会很乱. (2)打开 ...

  6. Mac 建PHP 环境 及 配置 apache 默认目录

    网上找的帮助,试一下,记录在此: 在Mac下配置php开发环境:Apache+php+MySql  https://www.imooc.com/article/15705?block_id=tuiji ...

  7. c++过程

    <<C++ beginner >> 入门 <<C++ primer>> 基础 <<The C++ programming language ...

  8. plsql 根据sid连接oracle

    ORCL73 = (DESCRIPTION = (ADDRESS_LIST = (ADDRESS = (PROTOCOL = TCP)(HOST = 192.168.10.73)(PORT = 152 ...

  9. ubuntu 18.04/18.10解决create-react-app:command not found问题

    npm config set prefix /usr/local sudo npm install -g create-react-app create-react-app my-app

  10. ELK平台搭建(上)

    一.目的 为指导在Centos6.8系统下搭建标准ELK平台的工作. 二.定义 Elasticsearch Logstash Kibana结合Redis协同工作. 三.适用范围 适用于运营维护组运维工 ...