首页 > 代码库 > javaScript之this的五种情况

javaScript之this的五种情况

2024-10-10 22:42:02   219人阅读

    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="http://www.mamicode.com/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的五种情况


联系
我们