Javascript解析之this代表对象及作用范围

一．              This对象的概述

在javascript编程中，我们经常用到this关键字，但有时也经常被它搞得头晕，下面将说明this的作用范围与以及它所指代的对象。

This特指当前对象，所有通过this.attr赋予的属性，都属于当前对象；那当前对象是什么呢，它的作用范围又是什么呢，在不同情况下，this对象的表现形式各不相同，下面就讲讲我对this对象的理解。

 

二．             This所指代的对象

 

1．  对于javascript，它的编写方式比较随意，但扩展性很强，我们可以使用面向过程的编写方式，也可以使用面向对象的编写方式，在这两种编写方式下，this的表现形式是不同的，下面我们先看一下定义变量的一些方式。

下面我们看一个示例（这是一个面向过程的调用方式，先不急于看结果，你可以自己想一下执行结果该是什么）：

function test(){

    var1=100;

    var var2=100;

    this.var3=100;

    f1=function(){}

    var f2=function(){}

    function f3(){}

    this.f4=function(){}

}

test();

alert(typeof  var1);

alert(typeof  var2);

alert(typeof  var3);

alert(typeof  f1);

alert(typeof  f2);

alert(typeof  f3);

alert(typeof  f4);

 

//======以下是上面的执行结果======

1.number

2.undefined

3.number

4.function

5.undefined

6.undefined 上面f2的写法等价于f3的写法

7.function

解析：我们可以把window看成一个大对象，它是Window对象的实例化，我们编写的所有javascript代码都包含在该对象内，因此，当前对象this特指window实例。

1.  alert(typeof  var1);//number

var1是一个未明确定义的变量，根据作用域范围定义，该对象属于window实例的对象，它的作用范围为全局。

2.  alert(typeof  var2);//undefined

var2是一个明确定义的变量，根据作用域范围定义，该对象的作用域范围为函数级别，即test函数所属范围，因此不可访问。

3.  alert(typeof  var3);

var3是以对象属性的方式定义的，但是test调用的时候却是以过程的方式调用，也就是说test没有被实例化成对象，并且test属于window对象，那么当前对象this仍然是window，所以var3属性是属于window的。

4.  alert(typeof  f1);

f1函数与var1变量同理

5.  alert(typeof  f2);

f2函数与var2变量同理

6.  alert(typeof  f3);

f3函数与var2变量同理

7.  alert(typeof  f4);

f4函数与var3变量同理

//===============================

 

下面是一个面向对象的调用示例：

function test(){

    var1=100;

    var var2=100;

    this.var3=100;

    f1=function(){}

    var f2=function(){}

    function f3(){}

    this.f4=function(){}

}

t = new test();

alert(typeof  var1);

alert(typeof  var2);

alert(typeof  var3);

alert(typeof  t.var3);

alert(typeof  f1);

alert(typeof  f2);

alert(typeof  f3);

alert(typeof  f4);

alert(typeof  t.f4);

//======以下是上面的执行结果======

1．  Number

2．  Undefined

3．  Undefined

4．  Number

5．  Function

6．  Undefined

7．  Undefined

8．  Undefined

9．  Function

解析：这次test是使用面向对象的方式调用的，下面我们看一下，为何执行结果会是如此：

1．  alert(typeof  var1);还是作用域的问题，未明确定义为全局变量

2．  alert(typeof  var2);明确定义，为函数级别变量

3．  alert(typeof  var3);

因为test当前是使用面向对象的方式调用的，那么test对象中的当前对象为实例化的test，即this已经不是window对象了，而是test的实例化t

4．  alert(typeof  t.var3);

由上面解析可知，var3属于对象t，那么自然可以获得此变量

5．  alert(typeof  f1);同理var1

6．  alert(typeof  f2);同理var2

7．  alert(typeof  f3);同理var2

8．  alert(typeof  f4);同理var3

9．  alert(typeof  t.f4);同理var3

 

三．             This的操作与修改

上面我们了解了一下this指代的对象和作用范围，但实际上this是可以被指定修改的，我们可以通过call,apply等函数指定当前函数的this对象，通常这些函数也用于继承的实现。

如上面的函数通过call来调用指定this 对象，将获得完全不同的执行结果，以下我们通过call实现了javascript的继承。

function f1(){

    this.age=27;

}

function test(){

    f1.call(this);

    this.address='地址';

}

t=new test();

alert(t.age);

alert(t.address);

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/23071790/viewspace-701880/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/23071790/viewspace-701880/