彻底理解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中非 ...
随机推荐
- jqgrid自适应宽度
https://blog.csdn.net/duzhanxiaosa/article/details/78922660
- python中的拷贝
再说拷贝之前先说一说 is 与 == is 的作用是 比较两个引用是否为一个地址 == 是比较两个值 对变量 a 变量 b 都赋值为 2 : a 与 b 的值相等我们都可以理解,但是a与b引用地址 ...
- rc
1,协同过滤. 2,协方差:用来衡量,他们的变化趋势是不是一致的. 3,皮尔逊相关系数:-1,负相关.1:正相关. 4,用皮尔逊相关系数来算相关性是最多的.
- Spring报错汇总笔记
报错信息: org.springframework.beans.factory.BeanDefinitionStoreException: Unexpected exception parsing X ...
- 六 Spring属性注入的四种方式:set方法、构造方法、P名称空间、SPEL表达式
Spring的属性注入: 构造方法的属性注入 set方法的属性注入
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版:设定小文本
<!DOCTYPE html> <html> <head> <title>菜鸟教程(runoob.com)</title> <meta ...
- 1007 Maximum Subsequence Sum (25分) 求最大连续区间和
1007 Maximum Subsequence Sum (25分) Given a sequence of K integers { N1, N2, ..., NK }. A ...
- 第1节 Scala基础语法:5、6、7、8、基础-申明变量和常用类型,表达式,循环,定义方法和函数
4. Scala基础 4.1. 声明变量 package cn.itcast.scala object VariableDemo { def main(args: Array[Strin ...
- JS原型与原型链继承的理解
一.原型 先从构造函数开始吧! 构造函数是什么?构造函数与其他函数唯一的区别在于调用方式不同.任何函数只要通过new来调用就可以作为构造函数,它是用来创建特定类型的对象. 下面定义一个构造函数 Fem ...
- Linux centosVMware Nginx负载均衡、ssl原理、生成ssl密钥对、Nginx配置ssl
一.Nginx负载均衡 vim /usr/local/nginx/conf/vhost/load.conf // 写入如下内容 upstream qq_com { ip_hash; 同一个用户始终保持 ...