zoukankan      html  css  js  c++  java
  • javascript 有关this的理解

    首先先看一段代码:

     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");

     

     

  • 相关阅读:
    file类和io流
    数组元素的填充与替换、排序和复制
    foreach遍历数组、数组的转置与方阵的迹
    Java小故事(一)
    java杨辉三角和空心菱形(二维数组篇)
    JAVA修饰符、关键字和继承(一)
    JAVA面向对象和类
    JAVA小程序-----买衣服
    JAVA流程控制
    Java包、类、数据类型、表达式和标识符
  • 原文地址:https://www.cnblogs.com/sandianbaozi/p/2644458.html
Copyright © 2011-2022 走看看