引用:this的用法

在函数中this到底取何值,是在函数真正被调用执行的时候确定的,函数定义的时候确定不了

情况1:构造函数

函数作为构造函数用,那么其中的this就代表它即将new出来的对象。另外注意,构造函数的函数名第一个字母大写(规则约定)。例如:Object、Array、Function等。

还有一种情况,在构造函数的prototype中,this代表着什么。

如上代码,在Fn.prototype.getName函数中,this指向的是f1对象。因此可以通过this.name获取f1.name的值。

其实,不仅仅是构造函数的prototype,即便是在整个原型链中,this代表的也都是当前对象的值。

注意,以上仅限new Foo()的情况,即Foo函数作为构造函数的情况。如果直接调用Foo函数,而不是new Foo(),情况就大不一样了。

这种情况下this是window,我们后文中会说到。

情况2:函数作为对象的一个属性

如果函数作为对象的一个属性时,并且作为对象的一个属性被调用时,函数中的this指向该对象。

以上代码中,fn不仅作为一个对象的一个属性,而且的确是作为对象的一个属性被调用。结果this就是obj对象。

注意,如果fn函数不作为obj的一个属性被调用,会是什么结果呢?

如上代码,如果fn函数被赋值到了另一个变量中,并没有作为obj的一个属性被调用,那么this的值就是window,this.x为undefined。

情况3:函数用call或者apply调用

当一个函数被call和apply调用时,this的值就取传入的对象的值。至于call和apply如何使用,不会的朋友可以去查查其他资料。

情况4:全局 & 调用普通函数

在全局环境下,this永远是window。

普通函数在调用时,其中的this也都是window。

————————-不过下面的情况你需要注意一下:————————-

函数f虽然是在obj.fn内部定义的,但是它仍然是一个普通的函数,this仍然指向window。(这就是闭包)

【深入理解javascript】this的用法的更多相关文章

  1. 深入理解javascript原型和闭包(1)——一切都是对象

    “一切都是对象”这句话的重点在于如何去理解“对象”这个概念. ——当然,也不是所有的都是对象,值类型就不是对象. 首先咱们还是先看看javascript中一个常用的函数——typeof().typeo ...

  2. 深入理解javascript原型和闭包(1)---一切都是对象

    深入理解javascript原型和闭包(1)---一切都是对象 type函数输出的类型,在此列出: function show (x){ console.log(typeof(x));//undefi ...

  3. 深入理解JavaScript系列(49):Function模式(上篇)

    介绍 本篇主要是介绍Function方面使用的一些技巧(上篇),利用Function特性可以编写出很多非常有意思的代码,本篇主要包括:回调模式.配置对象.返回函数.分布程序.柯里化(Currying) ...

  4. 深入理解JavaScript系列(46):代码复用模式(推荐篇)

    介绍 本文介绍的四种代码复用模式都是最佳实践,推荐大家在编程的过程中使用. 模式1:原型继承 原型继承是让父对象作为子对象的原型,从而达到继承的目的: function object(o) { fun ...

  5. 深入理解JavaScript系列(42):设计模式之原型模式

    介绍 原型模式(prototype)是指用原型实例指向创建对象的种类,并且通过拷贝这些原型创建新的对象. 正文 对于原型模式,我们可以利用JavaScript特有的原型继承特性去创建对象的方式,也就是 ...

  6. 理解JavaScript对象

    理解JavaScript对象 对象是JavaScript的基本数据类型.对象是一种复合值:将很多值(原始值或者其他对象)聚合在一起. JavaScript对象不仅可以保持自有的属性,还可以从原型对象继 ...

  7. 理解 JavaScript call()/apply()/bind()

    理解 JavaScript this 文章中已经比较全面的分析了 this 在 JavaScript 中的指向问题,用一句话来总结就是:this 的指向一定是在执行时决定的,指向被调用函数的对象.当然 ...

  8. 深入理解JavaScript系列(29):设计模式之装饰者模式

    介绍 装饰者提供比继承更有弹性的替代方案. 装饰者用用于包装同接口的对象,不仅允许你向方法添加行为,而且还可以将方法设置成原始对象调用(例如装饰者的构造函数). 装饰者用于通过重载方法的形式添加新功能 ...

  9. 深入理解JavaScript系列(26):设计模式之构造函数模式

    介绍 构造函数大家都很熟悉了,不过如果你是新手,还是有必要来了解一下什么叫构造函数的.构造函数用于创建特定类型的对象——不仅声明了使用的对象,构造函数还可以接受参数以便第一次创建对象的时候设置对象的成 ...

  10. 深入理解JavaScript系列(18):面向对象编程之ECMAScript实现(推荐)

    介绍 本章是关于ECMAScript面向对象实现的第2篇,第1篇我们讨论的是概论和CEMAScript的比较,如果你还没有读第1篇,在进行本章之前,我强烈建议你先读一下第1篇,因为本篇实在太长了(35 ...

随机推荐

  1. Mac下安装和卸载MySQL(含配置)

     安装 首先需要下载 MySQL Community Server 下载地址:https://dev.mysql.com/downloads/mysql/ 进入MySQL的下载界面(https://d ...

  2. (原创)Android Binder设计与实现 - 实现篇(1)

    本文属于原创作品,转载请注明出处并放于明显位置,原文地址:http://www.cnblogs.com/albert1017/p/3849585.html 前言 在学习Android的Binder机制 ...

  3. SQL Server 索引结构及其使用(一)[转]

    SQL Server 索引结构及其使用(一) 作者:freedk 一.深入浅出理解索引结构 实际上,您可以把索引理解为一种特殊的目录.微软的SQL SERVER提供了两种索引:聚集索引(cluster ...

  4. WP8.1学习系列(第四章)——交互UX之导航模式

    交互模式和指南 这部分包括三部分内容,分别是导航模式.命令模式和输入模式. 导航模式 虽然 Windows 导航模式提供了框架,但它提倡创新.激发你的创造力并在已建立的模式上构建. 命令模式 使用应用 ...

  5. css笔记 - transform学习笔记(二)

    transform转换 CSS transform 属于2D/3D上的转换.变形效果.他不是一个动画,他就是变形.比如正方形变平行四边形,再变圆形.都是形状变成另一个形状. 但是如果配合上transi ...

  6. python tkinter Listbox用法

    python tkinter组件的Listbox的用法,见下面代码的演示: from tkinter import * root=Tk() v=StringVar() #Listbox与变量绑定' l ...

  7. SharpGL学习笔记(四) 正射投影

    上节谈到投影变换分为透视投影(perspective projection)和正射投影(orthographic projection)两种. 透视投影我们已经介绍过了, 现在谈谈正视投影. 正射投影 ...

  8. ios-toolchain-based-on-clang-for-linux

    https://github.com/tpoechtrager/cctools-port.git https://www.embtoolkit.org

  9. VScode首选项

    首选项相关的设置: // 将设置放入此文件中以覆盖默认设置 { "workbench.iconTheme": "vscode-icons", "wor ...

  10. nginx 启动重启脚本

    #! /bin/sh # Default-Start:     2 3 4 5 # Default-Stop:      0 1 6 # Short-Description: starts the n ...