JavaScript中this关键字的使用
来源:互联网 发布:穿越火线切屏跳软件 编辑:程序博客网 时间:2024/05/18 03:04
阅读全文
1 0
- javascript中this关键字的使用
- JavaScript中this关键字的使用
- 深入理解JavaScript中关键字this的使用
- 【javascript】javascript中this关键字的理解
- JavaScript中this关键字
- javascript中关键字this的学习心得
- javascript中this关键字的详细解析
- javascript中this关键字的详细解析 .
- JavaScript中this关键字的理解
- javascript中this关键字的含义
- 对javascript中this关键字的理解
- JavaScript中关于this关键字的详解
- 聊聊Javascript中神奇的关键字this
- 关于JavaScript中this关键字的理解
- javascript的this关键字
- JavaScript的this关键字
- javascript中this的使用
- JavaScript中this的使用
- Arduino可穿戴教程之第一个程序——上传运行程序(四)
- 欢迎使用CSDN-markdown编辑器
- Java读取图片中的地理坐标(二)
- Eclipse 调试maven项目
- 数据结构-时间复杂度计算详解--向李红老师的数据结构低头 :)
- JavaScript中this关键字的使用
- com.jakewharton\butterknife\8.8.1\AndroidManifest.xml (系统找不到指定的文件。)
- CS50 2016 Week 11
- 利用interface实现 Adapter中通知Activity刷新数据或者其他操作
- 各种排序算法的稳定性和时间复杂度小结
- thinkphp 3.2.3按今天,本周,本月,本季度,本年,全部查询
- C++容器-2顺序容器vector、list、deque的使用
- Vue 爬坑之路(三)—— 使用 vue-router 跳转页面
- 【编程题】Java编程题一(10道)
相信大家在学习JavaScript的时候,this关键字总是会让大家感到很困惑,下面就来给大家详细的介绍有关this的一些知识点。
this
在JavaScript中this总是指向一个对象,而具体指向的那个对象是在运行代码时基于函数的执行环境动态绑定的,而不是函数在声明时的环境。
this的指向问题
在JavaScript中出去特殊的with和eval之外,具体到实际运用中一般包括以下四种情况:
1、作为对象的方法调用;
2、作为普通函数调用;
3、作为构造函数调用;
4、Function.prototype.call和Function.prototype.apply的调用。
1. 作为对象的方法调用
当一个函数当作一个对象的方法调用时,this指向该对象
2. 作为普通函数调用
当一个函数不被当作对象的方法调用时,而是当作普通的函数被调用时,此时的this指向全局对象,在浏览器中也就是指的window对象。
还有一种情况
这种情况下,虽然getName是myObject.getName()赋值给它的,但是此时的getName仍然是当作普通函数来调用的,所以此时this还是指向window的。在这种情况下,有的时候会带给我们一些不必要的麻烦,比如下面的示例:
大家可以看到,最后getId()函数中打印出来的是undefined,这个结果我想大家并不意外了,是的,getId()仍然是作为一个普通函数的调用。其是我们最后想要的结果是打印出div的id,那么要怎样解决呢?
其实很简单,我们可以在执行getId()函数之前,先将div的引用保存起来,然后调用它就可以了。还是来看代码吧!
好了,问题解决了,是不是很简单。其实这里可以还可以通过call方法来改变this的指向,关于call方法的应用我们在后面将会讲述。
需要注意的是在ECMAScript5中的严格模式下,普通函数的this指向并不是window了。
3. 作为构造函数的调用
构造函数看起来其实和普通函数没啥区别,只是在调用方式上不一样,当使用new运算符调用函数时,此时此函数就称为构造函数,并且总是返回一个对象,通常情况下,构造函数中的this指向返回的这个对象。
使用构造函数的时候,需要注意一个问题,如果构造函数显式的返回了一个对象,此时的this指向的是返回的这个对象了。如果返回的不是一个对象,就不会存在下面这种情况了。
4. Function.prototype.call和Function.prototype.apply的调用
通过Function.prototype.call和Function.prototype.apply这两种方法可以动态的修改this的指向。
以上就是关于this的四种指向问题了,下面讲解一下this丢失的问题。
this丢失
在开发中经常会遇到this丢失的问题,就比如下面这个示例:
出现这种情况的原因其实之前讲到过的,在调用getName时,其实时普通函数的调用方式,所以此时的this指向window,但是window中并没有name这是属性,所以会返回undefined,如果在严格模式下,则会报错。再来看看下面这个例子:
一般我们用JavaScript获取DOM节点时都会用到document.getElementById等之类的方法,但是为了使用简单我们一般会封装一个函数来简化操。
还有人思考为什么不能使用下面的方法呢?不是显得更加简单些吗?
此段代码运行时会抛出一个错误。(Uncaught TypeError: Illegal invocation)
这是因为在许多浏览器的引擎中实现document.getElementById时都会用到this,而且this都被期望指向的是document,在getElementById被document调用的时候,this确实时指向document的,但是当用getId来引用document.getElementById调用时,此时的getId是作为普通函数调用的,this会指向window,而不再是document。此时我们可以通过apply来改变this指向document。
这段代码中最后执行的其实 func.apply(document, arguments)这个函数,我们将document.getElementById作为参数传递,也就是func,最后在调用func时,利用apply将this指向了document,所以最后可以输出正确结果了。