Javascriptのthisキーワード(this is not this)について話します.
18036 ワード
前言:
文章のタイトルを見ても分かります.この文章は簡単なJavascriptのthisキーワードだけを話しています.簡単だと言っています.それは簡単ではありません.いつか私もthisキーワードに迷っています.それは確かに多くのプログラマが理解できなくなります.コードだけを見ても、現在のオブジェクトが分かりにくい場合があります.ちょうどこの二日間、Javascriptに関するブログを書くべきだと思いました.これからの会社の技術訓練のために準備します.この文章はコードを使って直接的に表現する傾向があるかもしれません.良い文章は長い文章、内容が豊富であることではなく、或いはより重要なのは、簡潔で包括的な内容を使って、読者に速く、間違った意味のないように、あなたの説明する内容を理解させるべきです.技術文章に対して、コードはよく一番いい記述です.じゃ、直接に本題に入ります.
上のコードは、私たちがよく使うthisキーワードであり、その中に必要なコードコメントを追加して、現在のオブジェクトを説明します.
thisキーワード:オブジェクトのポインタとして理解され、特定のオブジェクトは、その場所(コンテキスト)環境を参照してください.その一般的な使用シーンには、代表されるオブジェクトは大きく分けて以下の2つに分類されます.
1.ラベル(元素)オブジェクト:すなわち、htmlラベルバインディングのイベント(onclick、onmouseover...)では、thisキーワードは現在のラベルのDomオブジェクトを表し、thisを通じて、このラベルを完全に制御し、操作することができます.
2.function(クラス)対象:まず、なぜfunction(クラス)の対象というのか疑問があるかもしれません.周知のように、javascriptにはクラスの概念が存在しないが、その特性はより良い「アナログクラス」を実現することができます.このオブジェクトのthisキーワードは、オブジェクト指向プログラミング言語のthisキーワードとよく似ているので、UserInfoという方法は、C(*)コードに変換すればより直感的に理解できると思います.コードは以下の通りです
この文章はここで終わります.もしまだ疑問の点があれば、或いは「他人の子弟を誤解する」という説明があります.
文章のタイトルを見ても分かります.この文章は簡単なJavascriptのthisキーワードだけを話しています.簡単だと言っています.それは簡単ではありません.いつか私もthisキーワードに迷っています.それは確かに多くのプログラマが理解できなくなります.コードだけを見ても、現在のオブジェクトが分かりにくい場合があります.ちょうどこの二日間、Javascriptに関するブログを書くべきだと思いました.これからの会社の技術訓練のために準備します.この文章はコードを使って直接的に表現する傾向があるかもしれません.良い文章は長い文章、内容が豊富であることではなく、或いはより重要なのは、簡潔で包括的な内容を使って、読者に速く、間違った意味のないように、あなたの説明する内容を理解させるべきです.技術文章に対して、コードはよく一番いい記述です.じゃ、直接に本題に入ります.
1 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>title> 5 <script src="jquery.js" type="text/javascript">script> 6 head> 7 <body> 8 <input id="btnTest" type="button" value="Test" /><br /> 9 <input id="btnTest2" type="button" value="Test2" /><br /> 10 <input id="btnFun" type="button" value="Inner Fun" onclick="this.value=new Date().getSeconds();alert(this);" /><br /> 11 <script type="text/javascript"> 12 //#region this ， this ( jquery ) ， this ， 13 this.$.trim(); 14 alert(this.btnFun); 15 alert(this.window.location); 16 //#endregion 17 18 $("#btnTest").click(function () { 19 alert(this.value); // this btnTest ， :Test 20 $("#btnTest2").click(function () { 21 alert(this.value); // this btnTest2 ， :Test2 22 }); 23 }); 24 script> 25 26 <script type="text/javascript"> 27 function UserInfo(name, age) { 28 var _mySecret = "Can't tell you!"; 29 this.Name = name; 30 this.Age = age; 31 32 this.GetMySecret = function () { 33 /// 34 alert(_mySecret); 35 } 36 37 this.IntroduceMySelf = function () { 38 /// 39 alert("Hello,My Name is:" + this.Name + ", Age is:" + this.Age); 40 } 41 } 42 43 var userObj = new UserInfo("Tom", 23); 44 userObj.GetMySecret(); 45 userObj.IntroduceMySelf(); 46 script> 47 <br /> 48 body> 49 html>上のコードは、私たちがよく使うthisキーワードであり、その中に必要なコードコメントを追加して、現在のオブジェクトを説明します.
thisキーワード:オブジェクトのポインタとして理解され、特定のオブジェクトは、その場所(コンテキスト)環境を参照してください.その一般的な使用シーンには、代表されるオブジェクトは大きく分けて以下の2つに分類されます.
1.ラベル(元素)オブジェクト:すなわち、htmlラベルバインディングのイベント(onclick、onmouseover...)では、thisキーワードは現在のラベルのDomオブジェクトを表し、thisを通じて、このラベルを完全に制御し、操作することができます.
2.function(クラス)対象:まず、なぜfunction(クラス)の対象というのか疑問があるかもしれません.周知のように、javascriptにはクラスの概念が存在しないが、その特性はより良い「アナログクラス」を実現することができます.このオブジェクトのthisキーワードは、オブジェクト指向プログラミング言語のthisキーワードとよく似ているので、UserInfoという方法は、C(*)コードに変換すればより直感的に理解できると思います.コードは以下の通りです
1 public class UserInfo 2 { 3 string _mySecret = "Can't tell you!"; 4 5 public string Name { get; set; } 6 public int Age { get; set; } 7 8 public UserInfo(string name, int age) 9 { 10 this.Name = name; 11 this.Age = age; 12 } 13 14 public string GetMySecret() 15 { 16 return _mySecret; 17 } 18 19 public string IntroduceMySelf() 20 { 21 return ("Hello,My Name is:" + this.Name + ", Age is:" + this.Age); 22 } 23 }この文章はここで終わります.もしまだ疑問の点があれば、或いは「他人の子弟を誤解する」という説明があります.