javascriptの中でthisは違うシーンの使い方と方向について
14860 ワード
本論文では、Javascriptsにおけるthisのオブジェクトとしてのメソッド呼び出し、一般的な関数としての呼び出し、構造関数呼び出し、callまたはappyメソッドを使用して呼び出しなどのシーンでの使用法と指向について紹介します.
1.thisの指向
一般的でないwithとevalを除いた場合、具体的には実際の応用において、thisの指向は大体以下の4つに分けられます.を対象とした方法で起動する. は、一般関数として呼び出される. コンストラクター呼び出し. Function.prototype.callまたはFunction.prototype.appy呼び出し. 1)オブジェクトとしてのメソッド呼び出し
関数をオブジェクトとする方法が呼び出されると、thisはオブジェクトを指します.
関数がオブジェクトの属性として呼び出されない場合、すなわち私たちがよく話している一般的な関数方式であり、このときのthisは常にグローバルオブジェクトを指す.ブラウザのjavascriptでは、このグローバルオブジェクトはwindowオブジェクトです.
JavaScriptにはクラスがありませんが、コンストラクタからオブジェクトを作成することができます.また、new演算子を提供します.
コンストラクタの外観語は普通の関数と似ています.違いは呼び出された方式です.new演算子で関数を呼び出すと、一つのオブジェクトが返されます.通常、コンストラクタの中のthisは戻りのこのオブジェクトを指します.次のコードを参照してください.
一般的な関数と比較して、Funtions.prototype.callまたはFuntion.prototype.applyで、着信関数のthisを動的に変更できます.
1.thisの指向
一般的でないwithとevalを除いた場合、具体的には実際の応用において、thisの指向は大体以下の4つに分けられます.
関数をオブジェクトとする方法が呼び出されると、thisはオブジェクトを指します.
var obj = {
name: 'lenhart,
getName: function() {
alert(this === obj); // true
alert(this.name)
}
};
obj.getName();
関数がオブジェクトの属性として呼び出されない場合、すなわち私たちがよく話している一般的な関数方式であり、このときのthisは常にグローバルオブジェクトを指す.ブラウザのjavascriptでは、このグローバルオブジェクトはwindowオブジェクトです.
window.name = 'globalName';
var getName = function() {
return this.name;
};
console.log(getName())
<html>
<body>
<div id="div1"> div</div>
</body>
<script>
window.id = 'window';
document.getElementById('div1').onclick(function(){
alert(this.id); // 'div1'
var callback = function(){
alert(this.id); // 'window'
}
callback();
})
</script>
</html>
document.getElementById('div1').onclick(function(){
var that = this;
var callback = function(){
alert(that.id); // 'div1'
}
callback();
})
function func(){
"use strict"
alert(this); // ：undefined
}
func();
JavaScriptにはクラスがありませんが、コンストラクタからオブジェクトを作成することができます.また、new演算子を提供します.
コンストラクタの外観語は普通の関数と似ています.違いは呼び出された方式です.new演算子で関数を呼び出すと、一つのオブジェクトが返されます.通常、コンストラクタの中のthisは戻りのこのオブジェクトを指します.次のコードを参照してください.
var MyClass = function(){
this.name = 'lenhart';
};
var obj = new MyClass();
alert(obj.name); // ：'lenhart'
var MyClass = function(){
this.name = 'lenhart';
return { //
name: 'anne'
}
};
var obj = new MyClass();
alert( obj.name ); // ：'anne'
var MyClass = function(){
this.name = 'lenhart';
return 'anne';
}
var obj = new MyClass();
alert( obj.name ); // ：'sven'
一般的な関数と比較して、Funtions.prototype.callまたはFuntion.prototype.applyで、着信関数のthisを動的に変更できます.
var obj1 = {
name: 'lenhart',
getName: function(){
return this.name;
}
}
var obj2 = {
name: 'anne'
}
alert( obj1.getName() ); // ：'lenhart'
alert( obj1.getName.call( obj2 ) ); // ：'anne'