深入理解JavaScript中的this关键字
- 1. 一般用处
- 2. this.x 与 apply()、call()
- 3. 无意义(诡异)的this用处
- 4. 事件监听函数中的this
- 5. 总结
在JavaScript中this变量是一个令人难以摸清的关键字,this可谓是非常强大,充分了解this的相关知识有助于我们在编写面向对象的JavaScript程序时能够游刃有余。
1. 一般用处
对于this变量最要的是能够理清this所引用的对象到底是哪一个,也许很多资料上都有自己的解释,但有些概念讲的偏繁杂。而我的理解是:首先分析this所在的函数是当做哪个对象的方法调用的,则该对象就是this所引用的对象。
示例一
var obj = {};
obj.x = 100;
obj.y = function() { alert( this.x ); };
obj.y(); //弹出 100
这段代码非常容易理解,当执行 obj.y() 时,函数是作为对象obj的方法调用的,因此函数体内的this指向的是obj对象,所以会弹出100。
示例二
var checkThis = function() {
alert( this.x);
};
var x = 'this is a property of window'; var obj = {};
obj.x = 100;
obj.y = function(){ alert( this.x ); }; var obj2 = obj.y; obj.y(); //弹出 100
checkThis(); //弹出 'this is a property of window
obj2(); //弹出 'this is a property of window
这里为什么会弹出 'this is a property of window',可能有些让人迷惑。在JavaScript的变量作用域里有一条规则“全局变量都是window对象的属性”。当执行 checkThis() 时相当于 window.checkThis(),因此,此时checkThis函数体内的this关键字的指向变成了window对象,而又因为window对象又一个x属性( 'this is a property of window'),所以会弹出 'this is a property of window'。
上面的两个示例都是比较容易理解的,因为只要判断出当前函数是作为哪个对象的方法调用(被哪个对象调用)的,就可以很容易的判断出当前this变量的指向。
2. this.x 与 apply()、call()
通过call和apply可以重新定义函数的执行环境,即this的指向,这对于一些应用当中是十分常用的。
示例三:call()
function changeStyle( type , value ){
this.style[ type ] = value;
} var one = document.getElementById( 'one' ); changeStyle.call( one , 'fontSize' , '100px' ); changeStyle('fontSize' , '300px'); //出现错误,因为此时changeStyle中this引用的是window对象,而window并无style属性。
注意changeStyle.call() 中有三个参数,第一个参数用于指定该函数将被哪个对象所调用。这里指定了one,也就意味着,changeStyle函数将被one调用,因此函数体内this指向是one对象。而第二个和第三个参数对应的是changeStyle函数里的type和value两个形参。最总我们看到的效果是Dom元素one的字体变成了20px。
示例四:apply()
function changeStyle( type , value ){
this.style[ type ] = value;
} var one = document.getElementById( 'one' ); changeStyle.apply( one , ['fontSize' , '100px' ]); changeStyle('fontSize' , '300px'); //出现错误,原因同示例三
apply的用法和call大致相同,只有一点区别,apply只接受两个参数,第一个参数和call相同,第二个参数必须是一个数组,数组中的元素对应的就是函数的形参。
3. 无意义(诡异)的this用处
示例五
var obj = {
x : 100,
y : function(){
setTimeout(
function(){ alert(this.x); } //这里的this指向的是window对象,并不是我们期待的obj,所以会弹出undefined
, 2000);
}
}; obj.y();
如何达到预期的效果
var obj = {
x : 100,
y : function(){
var that = this;
setTimeout(
function(){ alert(that.x); }
, 2000);
}
}; obj.y(); //弹出100
4. 事件监听函数中的this
var one = document.getElementById( 'one' );
one.onclick = function(){
alert( this.innerHTML ); //this指向的是one元素,这点十分简单..
};
5. 总结
以上可以归纳为:“this所指的就是直至包含this指针的上层对象”
调用形式 | this指向 |
---|---|
普通函数 | 全局对象window |
对象的方法 | 该对象 |
构造函数 | 新构造的对象 |
深入理解JavaScript中的this关键字的更多相关文章
- 转载 深入理解JavaScript中的this关键字
转载原地址: http://www.cnblogs.com/rainman/archive/2009/05/03/1448392.html 深入理解JavaScript中的this关键字 1. 一 ...
- 如何理解JavaScript中的this关键字
前言 王福朋老师的 JavaScript原型和闭包系列 文章看了不下三遍了,最为一个初学者,每次看的时候都会有一种 "大彻大悟" 的感觉,而看完之后却总是一脸懵逼.原型与闭包 可以 ...
- 浅显易懂的理解JavaScript中的this关键字
在JavaScript中this变量是一个令人难以摸清的关键字,this可谓是非常强大,充分了解this的相关知识有助于我们在编写面向对象的JavaScript程序时能够游刃有余. 1. 一般用处 对 ...
- 正确理解JavaScript中的this关键字
JavaScript有this关键字,this跟JavaScript的执行上下文密切相关,很多前端开发工程师至今对this关键字还是模棱两可,本文将结合代码讲解下JavaScript的this关键字. ...
- 用自然语言的角度理解JavaScript中的this关键字
转自:http://blog.leapoahead.com/2015/08/31/understanding-js-this-keyword/ 在编写JavaScript应用的时候,我们经常会使用th ...
- 理解JavaScript中的this关键字
JavaScript中this关键字理解 在爬虫的过程中遇到了前端的js代码,对于this关键字理解的不是很清楚,所以写下这篇笔记,不足之处,希望得以改之. this的指向在函数定义的时候无法确定,只 ...
- 理解javascript中的with关键字
说起js中的with关键字,很多小伙伴们的第一印象可能就是with关键字的作用在于改变作用域,然后最关键的一点是不推荐使用with关键字.听到不推荐with关键字后,我们很多人都会忽略掉with关键字 ...
- 深入理解JavaScript中创建对象模式的演变(原型)
深入理解JavaScript中创建对象模式的演变(原型) 创建对象的模式多种多样,但是各种模式又有怎样的利弊呢?有没有一种最为完美的模式呢?下面我将就以下几个方面来分析创建对象的几种模式: Objec ...
- 深入理解javascript中的立即执行函数(function(){…})()
投稿:junjie 字体:[增加 减小] 类型:转载 时间:2014-06-12 我要评论 这篇文章主要介绍了深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是 ...
随机推荐
- ASP.NET MVC 3 入门级常用设置、技巧和报错
1.ASP.NET MVC 3 如何去除默认验证 这个默认验证是在web.config配置文件中设置的 <add key="ClientValidationEnabled&quo ...
- Codeforces Round #Pi (Div. 2) E. President and Roads tarjan+最短路
E. President and RoadsTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/567 ...
- ural 1993 This cheeseburger you don't need
顺次存到{} [] () 遇到逗号就处理下,最后处理逗号之后的 #include <iostream> #include <cstring> #include <stri ...
- android service总结
1.通过startservice方法启动一个服务.service不能自己启动自己.若在一个服务中启动一个activity则,必须是申明一个全新的activity任务TASK.通过startservic ...
- Error creating bean with name 'menuController': Injection of autowired dependency……
出现了一大串错误 Error creating bean with name 'userController': Injection of autowired dependencies failed. ...
- javascript运行机制之执行顺序详解(转)
转自http://www.admin10000.com/document/3385.html JavaScript是一种描述型脚本语言,它不同于java或C#等编译性语言,它不需要进行编译成中间语言, ...
- XCode帮助文档离线下载解决办法
1.菜单栏Xcode->Preferences选择Documentation,在线下载 2.离线下载(用迅雷即可下载) 在上述在线下载列表中,点击某一列,下拉框可看见 info,可得到其网络所在 ...
- 获取文件属性信息之stat、fstat和lstat
UNIX文件系统是目录和文件组成的一种层次结构.目录(directory)是一个包含许多目录项的文件,在逻辑上,可以认为每个目录项都包含一个文件名,同时还包含说明该文件属性的信息.文件属性是指文件类型 ...
- Line Search and Quasi-Newton Methods
Gradient Descent 机器学习中很多模型的参数估计都要用到优化算法,梯度下降是其中最简单也用得最多的优化算法之一.梯度下降(Gradient Descent)[3]也被称之为最快梯度(St ...
- windows mysql utf-8中文乱码解决方法
今天写项目,无论如何实质调试,在mysql里始终是中文乱码,找了好多办法一个一个尝试,最终才找到解决办法: 打开wamp-> mysql→my.ini,在如图所示的地方添加相应的代码