文档章节

深入理解JavaScript中的this关键字

Enjoy前端开发
 Enjoy前端开发
发布于 2015/03/31 12:10
字数 965
阅读 6
收藏 0
点赞 0
评论 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
博文 25
码字总数 3417
作品 0
海淀
深入浅出JS - 变量提升(函数声明提升)

前言 在我们的日常工作中,变量无处不在。更加深入的去了解它,能够使得自己的JS水平更上一层楼, 从变量提升这个小知识点着手,让我们一起来深入了解JS吧! 变量提升的小栗子 分析原因 JS引...

秋秋秋丷 ⋅ 05/17 ⋅ 0

深入学习JavaScript函数

前言: 函数对于任何一门语言来说都是核心的概念,通过函数可以封装任意多条语句,而且可以在任何地方、任何时候调用执行。而JavaScript中最好的特性就是它对函数的实现。它几乎无所不能。但...

云中玉卷 ⋅ 05/02 ⋅ 0

浅谈JavaScript中的继承

近期,公司的业务处于上升期,对人才的需求似乎比以往任何时候都多。作为公司的前端,有幸窥探到了公司的前端面试题目,其中有一题大概是这样的(别激动,题目已经改了) 请用你自己的方式来...

lanzhiheng ⋅ 05/29 ⋅ 0

JavaScript 和服务器端方向推荐书单(附简评)

我一直以来读书是获取知识最好的方式,很长时间以来,我都在博客维护了一个 推荐书单,最近又做了一些整理,为每本书都添加了简评,希望能对大家有帮助,当然如果能用我的推广链接购书就再好...

eapxuo ⋅ 02/09 ⋅ 0

怪异的JavaScript系列(一)

译者按: JavaScript有很多坑,经常一不小心就要写bug。 原文: What the f*ck JavaScript? 译者: Fundebug 为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学...

Fundebug ⋅ 04/24 ⋅ 0

怪异的JavaScript系列(三)

译者按: JavaScript有很多坑,经常一不小心就要写bug。 原文: What the f*ck JavaScript? 译者: Fundebug 为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学...

Fundebug ⋅ 04/26 ⋅ 0

由js数组类型判断触发的浪漫思绪

一、前言 众所周知,js是门“动态”、“弱类型”编程语言,这意味着在js中可以很任性的定义变量,任性的同时也意味着需常在开发中对变量做类型判断,曾几何时,对数组变量的类型的判断是件很...

hanmin ⋅ 06/08 ⋅ 0

JavaScript中的this指针 理论化this指针的定义

JavaScript现在应用之广泛,远超其他任何语言,只要是一个合格的网站应用,基本上多多少少都会有JS的存在。在JavaScript中,this的指向被不少Coder所不解,但其实JS中的this理解起来也是相当...

superwebmaster ⋅ 05/29 ⋅ 0

前端性能优化:细说JavaScript的加载与执行

本文主要是从性能优化的角度来探讨JavaScript在加载与执行过程中的优化思路与实践方法,既是细说,文中在涉及原理性的地方,不免会多说几句,还望各位读者保持耐心,仔细理解,请相信,您的耐...

小白师兄 ⋅ 06/19 ⋅ 0

JavaScript的self和this使用小结

一、self   这个非常简单。我们知道,打开任何一个网页,浏览器会首先创建一个窗口,这个窗口就是一个window对象,也是js运行所依附的全局环境对象和全局作用域对象。self 指窗口本身,它返...

new个对象 ⋅ 05/07 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

大数据工程师需要精通算法吗,要达到一个什么程度呢?

机器学习是人工智能的一个重要分支,而机器学习下最重要的就是算法,本文讲述归纳了入门级的几个机器学习算法,加大数据学习群:716581014一起加入AI技术大本营。 1、监督学习算法 这个算法由...

董黎明 ⋅ 26分钟前 ⋅ 0

Kylin 对维度表的的要求

1.要具有数据一致性,主键值必须是唯一的;Kylin 会进行检查,如果有两行的主键值相同则会报错。 2.维度表越小越好,因为 Kylin 会将维度表加载到内存中供查询;过大的表不适合作为维度表,默...

无精疯 ⋅ 29分钟前 ⋅ 0

58到家数据库30条军规解读

军规适用场景:并发量大、数据量大的互联网业务 军规:介绍内容 解读:讲解原因,解读比军规更重要 一、基础规范 (1)必须使用InnoDB存储引擎 解读:支持事务、行级锁、并发性能更好、CPU及...

kim_o ⋅ 32分钟前 ⋅ 0

代码注释中顺序更改 文件读写换行

`package ssh; import com.xxx.common.log.LogFactory; import com.xxx.common.log.LoggerUtil; import org.apache.commons.lang3.StringUtils; import java.io.*; public class DirErgodic ......

林伟琨 ⋅ 40分钟前 ⋅ 0

linux实用操作命令

参考 http://blog.csdn.net/qwe6112071/article/details/50806734 ls [选项] [目录名 | 列出相关目录下的所有目录和文件 -a 列出包括.a开头的隐藏文件的所有文件-A 同-a,但不列出"."和"...

简心 ⋅ 56分钟前 ⋅ 0

preg_match处理中文符号 url编码方法

之前想过直接用符号来替换,但失败了,或者用其他方式,但有有些复杂,这个是一个新的思路,亲测可用 <?php$str='637朗逸·超速新风王(300)(白光)'; $str=iconv("UTF-8","GBK",$s...

大灰狼wow ⋅ 今天 ⋅ 0

DevOps 资讯 | PostgreSQL 的时代到来了吗 ?

PostgreSQL是对象-关系型数据库,BSD 许可证。拼读为"post-gress-Q-L"。 作者: Tony Baer 原文: Has the time finally come for PostgreSQL?(有删节) 近30年来 PostgreSQL 无疑是您从未听...

RiboseYim ⋅ 今天 ⋅ 0

github太慢

1:用浏览器访问 IPAddress.com or http://tool.chinaz.com 使用 IP Lookup 工具获得github.com和github.global.ssl.fastly.net域名的ip地址 2:/etc/hosts文件中添加如下格式(IP最好自己查一...

whoisliang ⋅ 今天 ⋅ 0

非阻塞同步之 CAS

为解决线程安全问题,互斥同步相当于以时间换空间。多线程情况下,只有一个线程可以访问同步代码。这种同步也叫阻塞同步(Blocking Synchronization). 这种同步属于一种悲观并发策略。认为只...

长安一梦 ⋅ 今天 ⋅ 0

云计算的选择悖论如何对待?

人们都希望在工作和生活中有所选择。但心理学家的调查研究表明,在多种选项中进行选择并不一定会使人们更快乐,甚至不会产生更好的决策。心理学家Barry Schwartz称之为“选择悖论”。云计算为...

linux-tao ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部