浅显易懂的理解JavaScript中的this关键字
在JavaScript中this变量是一个令人难以摸清的关键字,this可谓是非常强大,充分了解this的相关知识有助于我们在编写面向对象的JavaScript程序时能够游刃有余。
1. 一般用处
对于this变量最要的是能够理清this所引用的对象到底是哪一个,也许很多资料上都有自己的解释,但有些概念讲的偏繁杂。而我的理解是:首先分析this所在的函数是当做哪个对象的方法调用的,则该对象就是this所引用的对象。
示例一
var obj = {};
obj.x = 100;
obj.y = function() { alert( this.x ); };//this指向的对象是obj
obj.y(); //弹出 100
这段代码非常容易理解,当执行 obj.y() 时,函数是作为对象obj的方法调用的,因此函数体内的this指向的是obj对象,所以会弹出100。
示例二
var checkThis = function() {
alert( this.x); //this的指向是window下的
};
var x = 'this is a property of window'; //变量提升 var obj = {};
obj.x = 1000;
obj.y = function(){ alert( this.x ); }; // this指向对象是 obj,调用obj.y();this的指向对象是obj
var obj2 = obj.y; //由于obj2();直接调用,这时this的指向是window对象下
obj.y(); //弹出 1000
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;//this指向是window对象下
} var one = document.getElementById( 'one' ); changeStyle.call( one , 'fontSize' , '100px' );//call库函数能改变this指向,即this指向"one"这个对象, 第一个参数是this引用的对象"one",第二个参数是style下的属性名,第三个参数是style下的属性值 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' ]);//apply库函数能改变this指向,即this指向"one"这个对象, 第一个参数是this引用的对象"one",第二个参数是一个数组,包括style下的[属性名,属性值] 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 : 1000,
y : function(){
var _self = this; //注意 : 给this赋值, 这里改变了 this 的指向,指向了 0bj
setTimeout(
function(){ alert(_self.x); }//setTimeout改变this的指向,变为window下,为了不改变指向,只能用_self=this,临时变量存储
, 2000);
}
}; obj.y(); //弹出1000
var obj = {
x : 1000,
y : function(){
alert(this.x); //这里的this指向的是obj对象,并不是我们期待的obj,所以会弹出1000
}
};
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跟JavaScript的执行上下文密切相关,很多前端开发工程师至今对this关键字还是模棱两可,本文将结合代码讲解下JavaScript的this关键字. ...
- 用自然语言的角度理解JavaScript中的this关键字
转自:http://blog.leapoahead.com/2015/08/31/understanding-js-this-keyword/ 在编写JavaScript应用的时候,我们经常会使用th ...
- 深入理解JavaScript中的this关键字
1. 一般用处 2. this.x 与 apply().call() 3. 无意义(诡异)的this用处 4. 事件监听函数中的this 5. 总结 在JavaScript中this变量是一个令人难以 ...
- 理解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中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是 ...
随机推荐
- PrototypePattrn(原型模式)
/** * * @author TMAC-J * 原型模式,可以说是简化的工厂模式 * 与工厂模式的区别是工厂模式可以生产很多的产品,而原型模式仅仅是复制而已 * 这里有一个问题:深克隆和潜克隆的问题 ...
- 9、ASP.NET MVC入门到精通——Controller(控制器)
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 Controller主要负责响应用户的输入.主要关注的是应用程序流,输入数据的处理,以及对相关视图(View)输出数据的提供. 继承自:Sy ...
- springmvc+mybatis+spring 整合源码项目
A集成代码生成器 [正反双向(单表.主表.明细表.树形表,开发利器)+快速构建表单; freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本,处理类,service等 ...
- 用childNodes获取子元素 换行会产生一个子元素
<div id='div1'> <div id='div2'> <div id='div3'></div> </div> <div c ...
- 【JavaScript】详解JSON
目录结构: // contents structure [-] 什么是JSON JSON和XML的比较 相同点 不同点 JSON语法 如何解析JSON文本 eval()方法 JSON.parse()方 ...
- js正则表达式图形化工具-rline
github地址:https://github.com/finance-sh/rline 在线demo: http://lihuazhai.com/demo/test.html 这是一个js正则表达式 ...
- atitit.农历的公式与原理以及农历日期运算
atitit.农历的公式与原理以及农历日期运算 1. 农历的概述1 2. 如何在电脑程序里面计算农历??1 3. 农历的公式2 4. 获取当日农历日历3 5. 历史日期公式加查表才能得到精确日期3 6 ...
- iOS之数组的排序(升序、降序及乱序)
#pragma mark -- 数组排序方法(升序) - (void)arraySortASC{ //数组排序 //定义一个数字数组 NSArray *array = @[@(3),@(4),@(2) ...
- android VelocityTracker 速度追踪器的使用及创建
VelocityTracker 速度追踪 第一,创建方式: VelocityTracker mVelocityTracker = new VelocityTracker .obtain() 第二, ...
- 了解HTML 盒模型
HTML在布局上, 有一个非常重要的模型, 那就是盒子模型, 在盒子模型中把标签内容理解为一个物品, 而css样式理解为包容着这个物品的盒子, 一般的块级标签都具有盒子模型的特征, 你可以在css中对 ...