javaScript之this的五种情况

Posted 花信

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javaScript之this的五种情况相关的知识,希望对你有一定的参考价值。

    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的五种情况的主要内容,如果未能解决你的问题,请参考以下文章

this的五种指法

javascript之构造函数的继承(引用网络)

javaScript常见的五种数组去重(转载)

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

js面向对象的五种写法

用JQuery或JS改变div的id的五种方法