现在的位置: 首页 > 综合 > 正文

javascript 有关this的理解

2012年03月16日 ⁄ 综合 ⁄ 共 3672字 ⁄ 字号 评论关闭

首先先看一段代码:

 1 <script type = "text/javascript">
 2     function JSClass(){
 3         this.m_Text = 'division element';
 4         this.m_Element = document.createElement('div');
 5         this.m_Element.innerHTML = this.m_Text;
 6             
 7         this.m_Element.addEventListener('click', this.ToString);
 8     }
 9    
10     JSClass.prototype.Render = function(){
11          document.body.appendChild(this.m_Element);
12     }     
13 
14     JSClass.prototype.ToString = function(){
15         alert(this.m_Text);
16     };
17   
18 
19     var jc = new JSClass();
20     jc.Render(); 
21     jc.ToString();
22 </script>

运行结果:在页面上创建出div,文本为division element,然后alert出division element,当我点击div时将输出"undefined"

自己的理解:“在页面上创建出div,文本为division element,然后alert出division element”是因为此时this指的是JSClass的实例,而当我们点击div时,此时this指向的div本身,没有

m_Text属性。

因此在编写代码过程中,可以使用一个变量来指向它,就不会因为环境的变化,发生变化了,自己理解,呵呵

下面是看别人的博客总结:(感觉特别好)

 this的值取决于function被调用方式:

1、如果一个function是一个对象的属性,该function被调用的时候,this的值是这个对象,如果function抵用的表达式包含句点或是[],this的值是他们前面的对象,如myObj.func 和myObj["func"] 中,func 被调用时的 this 是myObj。 

var person = {};
      person.name = "shenmajs";
      person.sayName = function(){
      alert(this.name);
};
person.sayName();
//弹出shenmajs,是person调用了sayName,this指向person

2、如果一个 function 不是作为一个对象的属性,那么该 function 被调用的时候,this 的值是全局对象。当一个 function 中包含内部 function 的时候,如果不理解 this 的正确含义,很容易造成错误。这是由于内部 function 的 this 值与它外部的 function 的 this 值是不一样的。解决办法是将外部 function 的 this 值保存在一个变量中,在内部 function 中使用它来查找变量。

1 var name = "window";
2 function alertName(){
3     alert(this.name);
4 }
5 alertName();
6 //弹出window,直接调用alertName方法,相当于全局对象调用了此方法,全局变量name当作了全局对象的属性

3、如果在一个 function 之前使用 new 的话,会创建一个新的对象,该 funtion 也会被调用,而 this 的值是新创建的那个对象。如function User(name) {this.name = name}; var user1 = new User("Alex"); 中,通过调用new User("Alex") ,会创建一个新的对象,以user1 来引用,User 这个 function 也会被调用,会在user1 这个对象中设置名为name 的属性,其值是Alex 。

1 function Person (name){
2     this.name = name;    //构造的过程中,this指向新的那个实例
3     this.sayhello = function (){
4         alert(this.name);
5     }
6 }
7 var person = new Person("shenmajs"); 
8 person.sayhello(); //弹出shenmajs ,因为sayhello方法是由person调用的
1 function alertName(){
2     alert(this.name);
3 }
4 var name = "window";
5 var person = {}; 
6 person.name = "shenmajs"; 
7 person.sayName = alertName; //sayName 与 alertName 都是指向那个方法实例的指针变量而已
8 person.sayName(); //弹出shenmajs,是person调用了alertName,this指向person
9 alertName(); //弹出window,直接调用alertName方法,相当于全局对象调用了此方法,全局变量name当作了全局对象的属性
function Person (name,age){
    this.age = age;
    this.name = name;
    this.sayHello = function(){
        alert("hi," +this.name );
    }; 
}

var person = new Person("shenmajs",25);
person.sayHello();//hi,shenmajs
var func = person.sayHello;// func 指向 function(){ alert("hi," +this.name );  它只是一个函数指针,与person.sayHello 指向一个函数

var name = "window";
func(); //hi,window,func直接调用 this指向全局对象

var name = "window";

var arraytest = [function(){alert(this[2]);},function(){alert(this.name);},"shenmajs"];//函数也是一种类型,匿名函数在这里当做数组的一个元素
arraytest.name = "arraytest";

var arrayfunc = [];
function func(){
  alert(this[1]);
}
arrayfunc[0] = func;
arrayfunc[1] = 99;

var functest1 = func;
var functest2 = arraytest[1];

arraytest[0]();
//弹出shenmajs ,this指向arraytest,this[2] 等价于 arraytest[2]。我一开始也不理解为什么会指向arraytest,只能死记了。

arraytest[1]();
//弹出arraytest,同样,this指向 arraytest,this.name 相当于arraytest.name . 我给arraytest加了一个name属性。这也是js动态语言的特性

arrayfunc[0]();
//弹出99 ,数组中的第一个元素指向了函数,这样调用时this指向了 arrayfunc数组,同上面的道理 this[1] 相当于 arrayfunc[1]

functest1();
//弹出 undefined ,相当于直接调用 func,this指向全局对象 window[1]未定义,因此弹出undefined

functest2(); 
//弹出window ,functest2 = arraytest[1],变量functest2指向函数,这里调用 即相当于直接调用,this指向全局变量。

 


 

length = 9;
var foo = {
  bar: function() {
    return this.length;
  },
  length: 0
};
(function f(a, b) {

  f.length = 1;   
//f.length 表示函数形参个数,就是函数定义的括号里有几个参数,此属性不可写,因此 f.length 永远是2  .
// http://ecma-international.org/ecma-262/5.1/#sec-15.3.3.2

  alert(arguments[0]());
//argumengts表示实参,即函数时间传递进来的参数,f立即执行时,传进来三个参数 (..f..)(foo.bar,2,"str")
//弹出3,this指向arguments,arguments.length 等于 3

  alert(a());
//弹出9, a指向 foo.bar所指向的函数,a()直接调用,this相当于window全局对象,this.length 等于 9

  alert(f.length);  
// 弹出2 ,此属性不可写

  alert((foo.bar)());
//弹出0,foo调用函数bar,this指向 foo。 需要说明的是 foo.bar() 和 (foo.bar)()的效果一样。

})(foo.bar,2,"str");

 

 

 

 

抱歉!评论已关闭.