JavaScriptにおけるthisオブジェクトの指向及び変更の4つの状況について
3615 ワード
thisオブジェクトのいくつかの場合
解析器は、関数を呼び出すたびに、関数の内部に暗黙的なパラメータを転送します. この暗黙的なパラメータはthisです.thisはオブジェクトを指しています.このオブジェクトは関数実行のコンテキストオブジェクトと呼ばれます.関数の呼び方によって、thisは異なるオブジェクトを指します. * 1.関数として呼び出した場合、thisはいつまでもwindowです.
* 2.メソッドで呼び出した場合、thisは呼び出し方法の対象となります.
* 3.コンストラクタとして呼び出されたとき、thisは新しく作成されたオブジェクトです.
* 4.call()またはappy()で関数を変えて環境を実行した場合、thisは他のオブジェクトを指します.
thisのいくつかの呼び出し方法をそれぞれ例に挙げて説明する.
1.thisを関数として呼び出す
解析器は、関数を呼び出すたびに、関数の内部に暗黙的なパラメータを転送します. この暗黙的なパラメータはthisです.thisはオブジェクトを指しています.このオブジェクトは関数実行のコンテキストオブジェクトと呼ばれます.関数の呼び方によって、thisは異なるオブジェクトを指します. * 1.関数として呼び出した場合、thisはいつまでもwindowです.
* 2.メソッドで呼び出した場合、thisは呼び出し方法の対象となります.
* 3.コンストラクタとして呼び出されたとき、thisは新しく作成されたオブジェクトです.
* 4.call()またはappy()で関数を変えて環境を実行した場合、thisは他のオブジェクトを指します.
thisのいくつかの呼び出し方法をそれぞれ例に挙げて説明する.
1.thisを関数として呼び出す
<script type="text/javascript">
// 1. ，this window
function fun(){
console.log(this.name);
}
var name = " name ";
fun();// ，this window
// " name ”
</script>
</code></pre>
<h3>2.this </h3>
<pre><code>
<meta charset="UTF-8"/>
<title/>
<script type="text/javascript">
//2. ，this
function fun(){
console.log(this.name);
}
//
var obj = {
name:" ",
sayName:fun
};
var obj2 = {
name:" ",
sayName:fun
};
var name = " name ";
obj.sayName();
obj2.sayName();
// ，this
// ：
</script>
</code></pre>
<h3> 3.this </h3>
<blockquote>
<p> ， , ， ， ， new 。<br/> ：<br/> * 1. <br/> * 2. this, this <br/> * 3. <br/> * 4. <br/> ， ， 。 ， 。</p>
</blockquote>
<pre><code>
<meta charset="UTF-8"/>
<title/>
<script type="text/javascript">
// 3. ，this
function Person(name , age , gender){
this.name = name;
this.age = age;
this.gender = gender;
this.sayName = function(){
alert(this.name);
};// this
}
function Dog(){
}
var per = new Person(" ",18," ");// this.name=" "
var per2 = new Person(" ",16," ");// this per2
var per3 = new Person(" ",38," ");// this per3
</script>
</code></pre>
<h3>4. call apply </h3>
<blockquote>
<p> call() apply()<br/> ， ， call() apply() 。 call() apply() ， this，call() ， apply() </p>
</blockquote>
<pre><code>
<meta charset="UTF-8"/>
<title/>
<script type="text/javascript">
var obj = {
name: "obj",
sayName:function(){
alert(this.name);
}
};// ， obj
obj.sayName();// “obj”
// 4. call apply ，this
var obj2 = {
name: "obj2"
};// obj2
obj.sayName.apply(obj2);// apply（） obj2
// “obj2”
</script>
</code></pre>
<p> </p>
</div>
</div>
</div>
</div>