文档章节

深入理解JavaScript中的this关键字

Enjoy前端开发
 Enjoy前端开发
发布于 2015/03/31 12:10
字数 965
阅读 6
收藏 0

深入理解JavaScript中的this关键字

在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
对象的方法 该对象
构造函数 新构造的对象

本文转载自:http://www.cnblogs.com/rainman/archive/2009/05/03/1448392.html

Enjoy前端开发
粉丝 3
博文 27
码字总数 3417
作品 0
海淀
私信 提问
Function执行原理 & 闭包

Execution Context 执行期上下文 在java或c语言中,都有块级作用域这个概念,而js中则没有。 在js中,作用域只有一种,即函数级作用域。 而执行期上下文,可以理解为函数的作用域或执行环境。...

烽穹寒渊
2018/07/13
0
0
Function执行原理 & 闭包

Execution Context 执行期上下文 在java或c语言中,都有块级作用域这个概念,而js中则没有。 在js中,作用域只有一种,即函数级作用域。 而执行期上下文,可以理解为函数的作用域或执行环境。...

烽穹寒渊
2016/08/21
0
0
理解JavaScript的作用域

大纲 作用域 作用域嵌套与作用域链 查询异常 词法作用域(静态作用域) 函数作用域 全局作用域 块级作用域 变量提升机制 函数优先 作用域 是什么? 作用域是指程序源代码中定义变量的区域。 ...

梁凤波
05/10
0
0
深入浅出 JavaScript 中的 this

在 Java 等面向对象的语言中,this 关键字的含义是明确且具体的,即指代当前对象。一般在编译期确定下来,或称为编译期绑定。而在 JavaScript 中,this 是动态绑定,或称为运行期绑定的,这就...

idea_biu
2012/09/05
0
0
[译] JavaScript — 继承、委托模式和对象链接

原文地址: JavaScript — Inheritance, delegation patterns and Object linking 作者: NC Patro 学习 JavaScript (原型继承) 中的继承,行为/对象委托模式和关联到其它对象的对象 什么是继...

Jeremygo
01/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Jenkins系列_插件安装及报错处理

进入Jenkins之后我们可以进行插件的安装,插件管理位于以下模块: 发现上面报了一堆错误,是因为插件的依赖没有安装好,那么这一节,就先把这些错误解决掉吧。解决完成后,也就基本会使用插件...

shzwork
今天
2
0
mysql mysql的所有查询语句和聚合函数(整理一下,忘记了可以随时看看)

查询所有字段 select * from 表名; 查询自定字段 select 字段名 from 表名; 查询指定数据 select * from 表名 where 条件; 带关键字IN的查询 select * from 表名 where 条件 [not] in(元素...

edison_kwok
昨天
9
0
多线程同时加载缓存实现

import com.google.common.cache.Cache;import com.google.common.cache.CacheBuilder;import java.util.concurrent.ExecutionException;import java.util.concurrent.ExecutorServi......

暗中观察
昨天
3
0
利用VisualVM 内存查看

准备工作,建几个测试类。等下就是要查看这几个类里面的属性 package visualvm;public class MultiObject { private String str; private int i; MultiObject(String str...

冷基
昨天
2
0
组装一台工作游戏两用机

一、配置清单如下: 分类 项目 价格(元) 主板 华硕(ASUS)TUF Z370-PLUS GAMING II 电竞特工 Z370二代 支持9代CPU 1049 CPU 英特尔(Intel) i7 8700K 酷睿六核 盒装CPU处理器 2640 风扇 九...

mbzhong
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部