JavaScript 中 this 的用法
在 JavaScript 中,this
是动态绑定,或称为运行期绑定的。一般而言,在Javascript中,this
指向函数执行时的当前对象。
由于其运行期绑定的特性,JavaScript 中的 this
可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。JavaScript 中函数的调用有以下几种方式:没有明确的调用对象,作为对象方法调用,使用 new
关键字作为构造函数调用,和使用 apply
、 call
和 eval
调用。
没有明确的当前对象时
当没有明确的执行时的当前对象时,this
指向全局对象 window
。
纯粹的函数调用
举个栗子
1 |
var x = 1; |
再看个复杂的栗子
1 |
var name = "window"; var Bob = { |
其实也不复杂,只要按照上面那句话来判断就行。
setTimeout、setInterval和匿名函数
在浏览器中 setTimeout
、setInterval
和匿名函数执行时的当前对象是全局对象 window
,这条可以看成是上一条的一个特殊情况。
1 |
var name = "Bob"; |
setTimeout
可以看做是一个延迟执行的匿名函数。
1 |
waitShowName : function(){ |
由于匿名函数的当前对象是 window
,所以当在该匿名函数中运行回调函数时,回调函数的 this
指向了 window
,所以 alert 出来 window.name
。
作为对象方法调用时
使用这种调用方式时,this
被自然绑定到该对象。
通常情况
1 |
var text = 'window' |
内部函数调用
但是,如果在 obj
的 foo()
内部再声明一个函数,在内部函数中调用 this
,像下面这样:
1 |
'use strict'; |
这是因为 this
指针只在 foo 方法的函数内指向 obj ,在函数内部定义的函数, this
又指向undefined
了!(在非 strict
模式下,它重新指向全局对象 window
!)
修复的办法是用一个 that
变量首先捕获 this
:
1 |
'use strict'; |
三种特殊情况
new关键字 - 作为构造函数调用时
所谓构造函数,就是通过这个函数生成一个新对象。这时,this
就指这个新对象。
1 |
function Person(__name){ |
apply 和 call
在 JavaScript 中函数也是对象,对象则有方法,apply()
和 call()
就是函数对象的方法。它们能够强制改变函数执行时的当前对象,让 this
指向其他对象。
apply()
接收两个参数,第一个参数就是需要绑定的this变量,第二个参数是 Array,表示函数本身的参数。call()
与 apply()
的唯一区别就是把函数本身的参数一个个传入。
1 |
// 对普通函数调用,通常把 this 绑定为 null |
举个使用 apply()
改变当前对象的栗子:
1 |
var name = "window"; var someone = { |
apply()
的参数为空时,默认调用全局对象。
eval
对于 eval
函数,其执行时候似乎没有指定当前对象,但实际上其 this
并非指向 window
,因为该函数执行时的作用域是当前作用域,即等同于在该行将里面的代码填进去。
1 |
var name = "window"; var Bob = { |
参考
JavaScript 中 this 的用法的更多相关文章
- JavaScript中return的用法详解
JavaScript中return的用法详解 最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 t ...
- JavaScript中this的用法 及 如何改变this的指向
要懂得JavaScript中this的用法,首先需要知道,JavaScript中的作用域相关知识. var fun = function(){ var flag = 1; console.log(fl ...
- javascript中 try catch用法
javascript中 try catch用法 投稿:hebedich 字体:[增加 减小] 类型:转载 时间:2015-08-16我要评论 JS try catch语句一般在什么情况下使用?是必须使 ...
- 从函数调用的角度,探讨JavaScript中this的用法
js函数调用方式大概可分为:函数调用,构造器调用,call或apply,方法调用四种方式.下面结合一些基础概念和实测代码,从函数调用的角度,探讨JavaScript中this的用法. 1. new对函 ...
- JavaScript中this的用法详解
JavaScript中this的用法详解 最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 thi ...
- 在HTML页面中实时获取新消息的方法 “JavaScript中的setInterval用法”
JavaScript中的setInterval用法(资料来源:博主---八神吻你 ) setInterval动作的作用是在播放动画的时,每隔一定时间就调用函数,方法或对象.可以使用本动作更新来自数 ...
- JavaScript中一些怪异用法的理解
引言 JavaScript这门语言有些场合的用法还是比较怪异的.这篇文章会尽量将这门语言特有的一些比较特殊的用法收集在一起.就当是平时开发时需要注意的地方吧. 特殊用法收集 1.!!用法 在JavaS ...
- JavaScript中Cookie的用法
Javascript中Cookie主要存储于客户端的计算机中,用于存放已访问的站点信息,Cookie最大约为4k.以下实例主要用于页面在刷新时保存数据,具体的用法如下所示: <html> ...
- javaScript中with的用法
1 JavaScript中的with语句的作用是为逐级的对象访问提供命名空间式的速写方式, 也就是在指定的代码区域, 直接通过节点名称调用对象 初次接触到with用法,是这样一段代码: 1 2 3 4 ...
- javascript中的继承用法
本文实例汇总了javascript关于继承的用法,希望本文所述对大家的javascript程序设计有所帮助.分享给大家供大家参考.具体如下:代码如下: /** * 实现子类继承父类,但不会产生多余的属 ...
随机推荐
- Java垃圾回收精粹 — Part4
Java垃圾回收精粹分4个部分,本篇是第4部分.在第4部分里介绍了G1收集器.其他并发收集器以及垃圾收集监控和调优. Garbage First (G1) 收集器 G1 (-XX:+UseG1GC)收 ...
- s:iterator数据累加示例代码
<s:set var="xs_heji" value="0" /> <s:set var="km_heji" value= ...
- JAVA Date超强工具类,可直接取代util.Date使用
package net.maxt.util; import java.text.DateFormat; import java.text.ParseException; import java.tex ...
- api的mock开源工具;api文档生成器;api的mock工具;阿里系;其他开源
django-rest-framework,即drf的api文档,包括自带的文档和其他三方文档,比如swagger.DRF Docs等 https://www.django-rest-framewor ...
- 11.线程通信CountDownLatch
package demo2; import java.util.concurrent.CountDownLatch; /** * Created by liudan on 2017/7/27. */ ...
- flume学习(三):flume将log4j日志数据写入到hdfs(转)
原文链接:flume学习(三):flume将log4j日志数据写入到hdfs 在第一篇文章中我们是将log4j的日志输出到了agent的日志文件当中.配置文件如下: tier1.sources=sou ...
- Power Desginer系列02【转载】
在概念模型中主要有以下几个操作和设置的对象:实体(Entity).实体属性 (Attribute).实体标识(Identifiers).关系(Relationship).继承(Inheritance) ...
- JS中字符串的相关操作
一.字符串的创建 创建一个字符串有几种方法.最简单的是用引号将一组字符包含起来,可以将其赋值给一个字符串变量. var myStr = "Hello, String!"; 可以用双 ...
- Error: Cannot find module 'express' 之 解决方案
出现如题错误,是因为执行了#npm install -g express的缘故,express没有被写到package.json里面去. 解决也好办,在程序目录下执行#npm install expr ...
- 实现一个类似Chrome新功能提示的popoup
先让我们看一下Chrome的popup是什么样的: 这个“直接搜索网页”与“在打开的标签页之间切换”就是两个功能导航,还做了一个动画效果,会不停的上下晃. 我通过WindowManager的addVi ...