在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指向
普通函数 全局对象window
对象的方法 该对象
构造函数 新构造的对象

javascrip this指向问题深入理解的更多相关文章

  1. JavaScript中this指向的简单理解

    首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然 ...

  2. this指针指向的彻底理解

    首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然 ...

  3. JavaScript中this指针指向的彻底理解

    this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象 这一点与函数中自由变量Action-varibal不同 var ...

  4. 在javascript中对于this指向的再次理解

    总所周知,function () {}函数体内的this对象指向的是调用该函数的对象,那么我们看一下这个例子 <script> var length = 3; function fn () ...

  5. js函数中this的指向

    本文是我个人对this指向的一些理解,如有不足之处,还望大家可以批评指正,在此先谢过了! 首先,我们来回顾一下ES5里函数的几种调用方式: 1⃣️直接调用 foo(); 2⃣️方法调用 obj.foo ...

  6. 面试题-浅谈JavaScript中的This指向问题

    各位小伙伴在面试中被面试官问道this指向问题一定不少吧,同时还被问道apply,call和bind的用法区别,现在,就来简单的聊一聊this到底指向何方. 1.基本概念 MDN的官方解释:与其他语言 ...

  7. 方便大家学习的Node.js教程(一):理解Node.js

    理解Node.js 为了理解Node.js是如何工作的,首先你需要理解一些使得Javascript适用于服务器端开发的关键特性.Javascript是一门简单而又灵活的语言,这种灵活性让它能够经受住时 ...

  8. 12.谈谈this对象的理解

    1.谈谈this对象的理解? 2.this指向问题   Javascript理解this对象 this是函数运行时自动生成的一个内部对象,只能在函数内部使用,但总指向调用它的对象. 通过以下几个例子加 ...

  9. 浅谈JS中的闭包

    浅谈JS中的闭包 在介绍闭包之前,我先介绍点JS的基础知识,下面的基础知识会充分的帮助你理解闭包.那么接下来先看下变量的作用域. 变量的作用域 变量共有两种,一种为全局变量,一种为局部变量.那么全局变 ...

随机推荐

  1. Spring Boot访问mysql(JPA方式)最简单配置

    0.先推荐一个工具--lombok,pom文件如下: <dependency> <groupId>org.projectlombok</groupId> <a ...

  2. L - 贪心 基础

    Once upon a time, in the Kingdom of Loowater, a minor nuisance turned into a major problem. The shor ...

  3. 前端控制器是整个MVC框架中最为核心的一块,它主要用来拦截符合要求的外部请求,并把请求分发到不同的控制器去处理,根据控制器处理后的结果,生成相应的响应发送到客户端。前端控制器既可以使用Filter实现(Struts2采用这种方式),也可以使用Servlet来实现(spring MVC框架)。

    本文转自http://www.cnblogs.com/davidwang456/p/4090058.html 感谢作者 前端控制器是整个MVC框架中最为核心的一块,它主要用来拦截符合要求的外部请求,并 ...

  4. iOS: 两句话给UILabel添加下划线

    1. 将UILabel控件的Text属性设为Attributed 2. 在viewDidLoad方法中添加如下语句: NSDictionary *underlineAttribute = @{NSUn ...

  5. GPS-Graph Processing System 改动源代码经验总结 (四)

    HamaWhite原创,转载请注明出处.欢迎大家增加Giraph 技术交流群: 228591158 本文目的:在改动GPS源代码后,具体描写叙述怎样编译和分发到各Worker节点上. 以下以Graph ...

  6. 幻世(OurDream)TM 2D图形引擎开通捐赠渠道

    为了支持幻世(OurDream)TM 2D图形引擎更好的发展,同一时候也是为了给希望支持引擎发展的朋友一个安全快捷的渠道,Lizcst Software Lab于今日正式在官方旗舰店增设了一个捐赠捐款 ...

  7. Hadoop Web项目--Mahout0.10 MR算法集锦

    1. 涉及技术及下载 项目开发使用到的软件有:Myeclipse2014,JDK1.8.Hadoop2.6,MySQL5.6.EasyUI1.3.6,jQuery2.0,Spring4.1.3,Hib ...

  8. 模拟IC

    ------ 书籍介绍:http://bbs.eetop.cn/thread-371700-1-1.html -----

  9. 针对深度学习(神经网络)的AI框架调研

    针对深度学习(神经网络)的AI框架调研 在我们的AI安全引擎中未来会使用深度学习(神经网络),后续将引入AI芯片,因此重点看了下业界AI芯片厂商和对应芯片的AI框架,包括Intel(MKL CPU). ...

  10. 最短路径问题(floyd)

    http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=1867 #include<stdio.h& ...