this 是 JavaScript 语言的一个关键字。

它是函数运行时,在函数体内自动生成的一个对象,只能在函数体内使用。

函数的不同使用场合,this 有不同的值。总的来说,this 就是函数运行时所在的环境对象。下面分四种情况,详细讨论 this 的用法。

1. 作为对象的方法调用

当函数作为对象的方法被调用时, this 指向该对象:

let obj = {
name : 'my name is obj',
getName : function(){
console.log(this.name)
}
} obj.getName() // 'my name is obj'

2. 作为普通函数调用

当函数作为普通函数被调用时,this 指向全局对象(在浏览器的 JavaScript 里指向 window):

window.name = 'is me'

const getName = function() {
return this.name
} console.log( getName() ) // 'is me’

3. 构造器调用

当函数作为构造函数被使用时,this 指向返回的这个对象:

const MyClass = {
this.name = 'className'
} let obj = new MyClass()
console.log( obj.name ) // 'className'

4. call 或 apply 调用

const obj1= {
name: 'TianGou Da',
getName: function(){
return this.name
}
}
const obj2 = {
name: 'TinaGou Ya'
}
console.log( obj1.getName() ) // 输出: TianGou Da
console.log( obj1.getName.call( obj2 ) ) // 输出:TinaGou Ya

参考文献:

阮一峰

[JavaScript设计模式和开发实践]

彻底理解JavaScript中的this的更多相关文章

  1. 理解JavaScript中的原型继承(2)

    两年前在我学习JavaScript的时候我就写过两篇关于原型继承的博客: 理解JavaScript中原型继承 JavaScript中的原型继承 这两篇博客讲的都是原型的使用,其中一篇还有我学习时的错误 ...

  2. 深入理解JavaScript中创建对象模式的演变(原型)

    深入理解JavaScript中创建对象模式的演变(原型) 创建对象的模式多种多样,但是各种模式又有怎样的利弊呢?有没有一种最为完美的模式呢?下面我将就以下几个方面来分析创建对象的几种模式: Objec ...

  3. 深入理解JavaScript中的属性和特性

    深入理解JavaScript中的属性和特性 JavaScript中属性和特性是完全不同的两个概念,这里我将根据自己所学,来深入理解JavaScript中的属性和特性. 主要内容如下: 理解JavaSc ...

  4. 深入理解javascript中执行环境(作用域)与作用域链

    深入理解javascript中执行环境(作用域)与作用域链 相信很多初学者对与javascript中的执行环境与作用域链不能很好的理解,这里,我会按照自己的理解同大家一起分享. 一般情况下,我们把执行 ...

  5. 【干货理解】理解javascript中实现MVC的原理

    理解javascript中的MVC MVC模式是软件工程中一种软件架构模式,一般把软件模式分为三部分,模型(Model)+视图(View)+控制器(Controller); 模型:模型用于封装与应用程 ...

  6. 理解javascript中的策略模式

    理解javascript中的策略模式 策略模式的定义是:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换. 使用策略模式的优点如下: 优点:1. 策略模式利用组合,委托等技术和思想,有效 ...

  7. 深入理解javascript中的立即执行函数(function(){…})()

    投稿:junjie 字体:[增加 减小] 类型:转载 时间:2014-06-12 我要评论 这篇文章主要介绍了深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是 ...

  8. 转载 深入理解JavaScript中的this关键字

    转载原地址: http://www.cnblogs.com/rainman/archive/2009/05/03/1448392.html 深入理解JavaScript中的this关键字   1. 一 ...

  9. js架构设计模式——理解javascript中的MVVM开发模式

    理解javascript中的MVVM开发模式 http://blog.csdn.net/slalx/article/details/7856769 MVVM的全称是Model View ViewMod ...

  10. 全面理解Javascript中Promise

    全面理解Javascript中Promise 最近在学习Promise的时候,在网上收集了一些资料,发现很多的知识点不够系统,所以小编特意为大家整理了一些自认为 比较好的文章,供大家更好地学习js中非 ...

随机推荐

  1. javascript入门教程02

    JavaScript中的运算符 (1)算术运算符 + :相加 var a=123,b=45; document.write(a+b); - :相减 document.write(a-b); *:相乘 ...

  2. 面试官:说说Spring中的事务传播行为

    前言 在开发中,相信大家都使用过Spring的事务管理功能.那么,你是否有了解过,Spring的事务传播行为呢? Spring中,有7种类型的事务传播行为.事务传播行为是Spring框架提供的一种事务 ...

  3. 十六 OGNL在Struts2环境的入门

    一 配置核心过滤器

  4. css height VS min-height

    height:容器高度固定(值是百分比时除外): min-height:容器高度小于该值时取该值,大于该值时按实际的值.应用:页面中页脚置底.

  5. Servlet 设置字符编码filter

    filter package common; import javax.servlet.*; import java.io.IOException; public class EncodingFilt ...

  6. [aac @ ...] more samples than frame size (avcodec_encode_audio2)

    在用FFmpeg对音频进行编码的时候报如下错误: [aac @ 000001cfc2717200] more samples than frame size (avcodec_encode_audio ...

  7. Scrapy 常用的shell执行命令

    1.在任意系统下,可以使用 pip 安装 Scrapy pip install scrapy/ 确认安装成功 >>> import scrapy >>> scrap ...

  8. LibreOJ #2006. 「SCOI2015」小凸玩矩阵

    想了挺久没想出来,一看题解恍然大悟.一个数对应一行和一列,二分答案,凡是小于等于答案的就连边.如果满足能够取出 \(n - k + 1\) 个不比二分中点 \(mid\) 大的数,那么r = mid, ...

  9. Caffe2官方使用手册翻译

    详细教程见点击这里 http://www.jianshu.com/c/cf07b31bb5f2

  10. TCP 3次握手 && 4次分手

    原文:https://github.com/jawil/blog/issues/14 3次握手 第一次握手:建立连接.客户端发送连接请求报文段,将SYN位置为1,Sequence Number为x:然 ...