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のように{this.name=name}var user 1=new User(「Alex」)で、new User(「Alex」)を呼び出すことにより、新しいオブジェクトを作成し、user 1で参照すると、Userというfunctionも呼び出しられ、user 1というオブジェクトに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");