彻底理解JavaScript中的this
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的更多相关文章
- 理解JavaScript中的原型继承(2)
两年前在我学习JavaScript的时候我就写过两篇关于原型继承的博客: 理解JavaScript中原型继承 JavaScript中的原型继承 这两篇博客讲的都是原型的使用,其中一篇还有我学习时的错误 ...
- 深入理解JavaScript中创建对象模式的演变(原型)
深入理解JavaScript中创建对象模式的演变(原型) 创建对象的模式多种多样,但是各种模式又有怎样的利弊呢?有没有一种最为完美的模式呢?下面我将就以下几个方面来分析创建对象的几种模式: Objec ...
- 深入理解JavaScript中的属性和特性
深入理解JavaScript中的属性和特性 JavaScript中属性和特性是完全不同的两个概念,这里我将根据自己所学,来深入理解JavaScript中的属性和特性. 主要内容如下: 理解JavaSc ...
- 深入理解javascript中执行环境(作用域)与作用域链
深入理解javascript中执行环境(作用域)与作用域链 相信很多初学者对与javascript中的执行环境与作用域链不能很好的理解,这里,我会按照自己的理解同大家一起分享. 一般情况下,我们把执行 ...
- 【干货理解】理解javascript中实现MVC的原理
理解javascript中的MVC MVC模式是软件工程中一种软件架构模式,一般把软件模式分为三部分,模型(Model)+视图(View)+控制器(Controller); 模型:模型用于封装与应用程 ...
- 理解javascript中的策略模式
理解javascript中的策略模式 策略模式的定义是:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换. 使用策略模式的优点如下: 优点:1. 策略模式利用组合,委托等技术和思想,有效 ...
- 深入理解javascript中的立即执行函数(function(){…})()
投稿:junjie 字体:[增加 减小] 类型:转载 时间:2014-06-12 我要评论 这篇文章主要介绍了深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是 ...
- 转载 深入理解JavaScript中的this关键字
转载原地址: http://www.cnblogs.com/rainman/archive/2009/05/03/1448392.html 深入理解JavaScript中的this关键字 1. 一 ...
- js架构设计模式——理解javascript中的MVVM开发模式
理解javascript中的MVVM开发模式 http://blog.csdn.net/slalx/article/details/7856769 MVVM的全称是Model View ViewMod ...
- 全面理解Javascript中Promise
全面理解Javascript中Promise 最近在学习Promise的时候,在网上收集了一些资料,发现很多的知识点不够系统,所以小编特意为大家整理了一些自认为 比较好的文章,供大家更好地学习js中非 ...
随机推荐
- javascript入门教程02
JavaScript中的运算符 (1)算术运算符 + :相加 var a=123,b=45; document.write(a+b); - :相减 document.write(a-b); *:相乘 ...
- 面试官:说说Spring中的事务传播行为
前言 在开发中,相信大家都使用过Spring的事务管理功能.那么,你是否有了解过,Spring的事务传播行为呢? Spring中,有7种类型的事务传播行为.事务传播行为是Spring框架提供的一种事务 ...
- 十六 OGNL在Struts2环境的入门
一 配置核心过滤器
- css height VS min-height
height:容器高度固定(值是百分比时除外): min-height:容器高度小于该值时取该值,大于该值时按实际的值.应用:页面中页脚置底.
- Servlet 设置字符编码filter
filter package common; import javax.servlet.*; import java.io.IOException; public class EncodingFilt ...
- [aac @ ...] more samples than frame size (avcodec_encode_audio2)
在用FFmpeg对音频进行编码的时候报如下错误: [aac @ 000001cfc2717200] more samples than frame size (avcodec_encode_audio ...
- Scrapy 常用的shell执行命令
1.在任意系统下,可以使用 pip 安装 Scrapy pip install scrapy/ 确认安装成功 >>> import scrapy >>> scrap ...
- LibreOJ #2006. 「SCOI2015」小凸玩矩阵
想了挺久没想出来,一看题解恍然大悟.一个数对应一行和一列,二分答案,凡是小于等于答案的就连边.如果满足能够取出 \(n - k + 1\) 个不比二分中点 \(mid\) 大的数,那么r = mid, ...
- Caffe2官方使用手册翻译
详细教程见点击这里 http://www.jianshu.com/c/cf07b31bb5f2
- TCP 3次握手 && 4次分手
原文:https://github.com/jawil/blog/issues/14 3次握手 第一次握手:建立连接.客户端发送连接请求报文段,将SYN位置为1,Sequence Number为x:然 ...