this一直是JavaScript研究的难题,特别是在笔试和面试中的各种程序分析问题中,也常常会被问到。下面来看一看this被运用的五中情况:

(1)       纯粹的函数调用

函数最普通用法,此时属于全局调用,函数内this指向全局对象window。

示例一:

var x=20;
function test(){
var x = 10;
console.log(this.x)
}

输出:20,因为函数test执行环境为window。

示例2:

var x=20;
function test(){
this. x = 10;
console.log(this.x)
}
test()
console.log(x);

输出:

10

10

由于test函数内部this指向window,所以第3行代码修改了x的值。

(2)     作为对象的方法使用

函数作为某个对象的方法,此事this指向该对象。

function text(){
console.log(this.x)
}
var obj = {};
obj.x = 10;
obj.out = text;
obj.out()

输出: 10

(3)       构造函数生成实例对象

作为构造函数使用时,this指向该对象新创建的实例。

var x = 2;
function text(){
this.x =1;
}
var inst = new text();
console.log(inst.x);

输出: 1

(4)     使用apply

apply()方法是改变函数内部this的值,若为空默认是指向全局对象window。

var x = 2;
  function test(){
   console.log (this.x);
  }
  var obj={};
  obj.x = 1;
  obj.m = test;
obj.m.apply();
obj.m .apply (obj);

输出:

2

1

第8行代码将函数内部的this指向window,故输出为2。第9行代码等价于obj.m()。因为作为对象方法的函数其内部this就指向该对象。

(5)事件处理程序中的this

在DOM级事件处理程序中this指向触发事件的元素,而对于IE事件来说,this指向全局对象window。

HTML:
<input id="myinput" type="text" value="javascript中onclick中的this" onclick=" test(this);"/>
javaScript:
function test(obj){
alert(obj); //[object HTMLInputElement]
alert(obj.id); //myinput
alert(obj.value); //javascript中onclick中的this
}

还有闭包中的this是指向window的,掌握以上几种运用方法,相信你可以所向睥睨。

javaScript之this的五种情况的更多相关文章

  1. Javascript判断数据类型的五种方式及其特殊性

    Javascript判断数据类型的五种方式及区别 @ 目录 typeof instanceof Object.prototype.toString isArray iisNaN ----------- ...

  2. 五种情况下会刷新控件状态(刷新所有子FWinControls的显示)——从DFM读取数据时、新增加子控件时、重新创建当前控件的句柄时、设置父控件时、显示状态被改变时

    五种情况下会刷新控件状态(刷新控件状态才能刷新所有子FWinControls的显示): 在TWinControls.PaintControls中,对所有FWinControls只是重绘了边框,而没有整 ...

  3. hdu 5060 五种情况求圆柱体与球体交

    http://acm.hdu.edu.cn/showproblem.php?pid=5060 官方题解http://bestcoder.hdu.edu.cn/给复杂了 实际上用圆柱体与球体体积差的积分 ...

  4. css3动画贝塞尔曲线cubic-bezier,css3动画的五种情况

    当大家开始做css3动画的时候,了解贝塞尔曲线就成了不可或缺的.“贝赛尔曲线”是由法国数学家Pierre Bézier所发明,由此为计算机矢量图形学奠定了基础.它的主要意义在于无论是直线或曲线都能在数 ...

  5. 五种情况会导致Session 丢失

    1.Session到期自定丢失.2.当修改web.config 系统会重启  SESSION 会丢失.3.Bin目录有变化时候系统会重启 SESSION会丢失 (这里变化指的是,创建新文件.修改文件名 ...

  6. 探究JavaScript中的五种事件处理程序

    探究JavaScript中的五种事件处理程序 我们知道JavaScript与HTML之间的交互是通过事件实现的.事件最早是在IE3和Netscape Navigator 2中出现的,当时是作为分担服务 ...

  7. 从零开始学习前端JAVASCRIPT — JavaScript中this指向的四种情况

    JavaScript中this的四种情况(非严格模式) 1.当this所在函数是事件处理函数时,this指向事件源.2.当this所在函数是构造函数时,this指向new出来的对象.3.this所在函 ...

  8. this的五种指法

    this 到底指向哪里 以下如果没提及,则为严格模式. js中作用域有两种: 词法作用域 动态作用域 词法作用域 词法作用域指在书写代码时就被确定的作用域.看如下代码 var value = 1; f ...

  9. JavaScript常见的五种数组去重的方式

    ▓▓▓▓▓▓ 大致介绍 JavaScript的数组去重问题在许多面试中都会遇到,现在做个总结 先来建立一个数组 var arr = [1,2,3,3,2,'我','我',34,'我的',NaN,NaN ...

随机推荐

  1. xpath取最后一个元素

    取xpath最后一个book元素 book[last()] 取xpath最后第二个book元素 book[last()-1]

  2. 改善程序与设计的55个具体做法 day6

    条款13:以对象管理资源 资源,包括但不限于内存.句柄.GDI对象.数据库连接等. 内存要记得释放,句柄要记得closehandle, GDI对象要记得删除,数据库连接要记得关闭,等等等等. 以对象来 ...

  3. jquery链式语法

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  4. HTML相对路径与绝对路径

    在网页制作的过程中,少不了跟路径打交道,比如,包含一个文件,插入一个图片等,与路径都有关系,如果使用了错误的文件路径,就会导致引用失效(无法浏览链接文件,或无法显示插入的图片等).初学者可能会感到困惑 ...

  5. Docker 数据管理-Volumes

    Volumes是Docker最为推荐的数据持久化方法. Volumes have several advantages over bind mounts: Volumes are easier to ...

  6. <再看TCP/IP第一卷>关于网络层及协议细节---ICMP协议几个要注意的地方

    在TCP/IP协议族中,ICMP协议是一个介于网络层和传输层中间的一个协议,许多材料都会认为ICMP是网络层的一个部分,但是ICMP协议的报头是被包裹在IP协议之中的,而UDP协议又可以被ICMP协议 ...

  7. java深入探究07-jdbc下

    1.BeanUtils组件 1)使用:导入commons-beanutils-1.8.3.jar核心包,日志支持包: commons-logging-1.1.3.jar 缺少日志的jar文件报错:ja ...

  8. 51nod1613

    题意:给定n个正面朝上的硬币,每次可以翻转k个硬币,求至少多少次翻转能使之全部反面朝上. 神犇题解 我真的吐槽不能了..这题能做?! 极其复杂的分类讨论..膜拜这位爷.

  9. css 网站素装 追忆过去

    素装代码,以表哀悼等.以下为全站CSS代码. html { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: ...

  10. IpIImage -> CvMat 转换方法

    Ipl转为CvMat 一般为这两种方法: 1: /*cvGetMat*/ CvMat matheader; CvMat * mat = cvGetMat(img, &matheader); 2 ...