今回はjavascriptのthisについて紹介します。thisは存在したところによる、内容が変わるため、各パターンを理解すれば、javascriptの開発で役に立つ。
this種類
関数に存在したthis
この場合は「this」は「Windowオブジェクト」を指してしまいます。
function fun() {
console.log(this); // Window
}
fun();
console.log(this); // Window
}
fun();
イベント関数に存在したthis
書き方①
<input type=’button’ id=’btn’ value=’click’>
<script type=”text/javascript”>
document.getElementById(‘btn’).onclick = function() {
console.log(this); // ボータンオブジェクト
}
</script>
<script type=”text/javascript”>
document.getElementById(‘btn’).onclick = function() {
console.log(this); // ボータンオブジェクト
}
</script>
書き方②
<input type=’button’ id=’btn’ value=’click’>
<script type=”text/javascript”>
function fun() {
console.log(this); // ボータンオブジェクト
}
document.getElementById(‘btn’).onclick = fun;
</script>
<script type=”text/javascript”>
function fun() {
console.log(this); // ボータンオブジェクト
}
document.getElementById(‘btn’).onclick = fun;
</script>
書き方③
<input type=’button’ id=’btn’ value=’click’>
<script type=”text/javascript”>
document.getElementById(‘btn’).onclick = () => {
console.log(this); // Window
};
</script>
<script type=”text/javascript”>
document.getElementById(‘btn’).onclick = () => {
console.log(this); // Window
};
</script>
コンストラクタに存在したthis
「new」をつけてインスタンスを生成し、生成されるインスタンス自身が「this」にsetされます。
<script type=”text/javascript”>
function Person() {
this.name = “test1”;
console.log(this); // Person {name: “test1”}
}
var obj = new Person();
</script>
function Person() {
this.name = “test1”;
console.log(this); // Person {name: “test1”}
}
var obj = new Person();
</script>
オブジェクトに存在したthis
書き方①
<script type=”text/javascript”>
var obj = {
“age”: 30,
“say”: function() {
console.log(this); // {age: 30, say: ƒ}
}
}
obj.say();
</script>
var obj = {
“age”: 30,
“say”: function() {
console.log(this); // {age: 30, say: ƒ}
}
}
obj.say();
</script>
書き方②
<script type=”text/javascript”>
var obj = {
“age”: 30,
“say”: () => {
console.log(this); // Window
}
}
obj.say();
</script>
var obj = {
“age”: 30,
“say”: () => {
console.log(this); // Window
}
}
obj.say();
</script>
HTMLタグに存在したthis
<input type=’button’ id=’btn’ value=’click’ onclick=”fun(this)”>
<script type=”text/javascript”>
function fun(obj) {
console.log(obj); // inputオブジェクト
}
</script>
<script type=”text/javascript”>
function fun(obj) {
console.log(obj); // inputオブジェクト
}
</script>
thisの注意点
注意点①
<script type=”text/javascript”>
var obj = {
“name”: “test”,
“obj2”: {“name”: “test2″,”walk”:function(){console.log(this);}}
}
obj.obj2.walk(); //{name: “test2”, walk: ƒ}
</script>
var obj = {
“name”: “test”,
“obj2”: {“name”: “test2″,”walk”:function(){console.log(this);}}
}
obj.obj2.walk(); //{name: “test2”, walk: ƒ}
</script>
注意点②
<script type=”text/javascript”>
function fun1() {
console.log(this); // Window
function fun2() {
console.log(this); // Window
}
fun2();
}
fun1();
</script>
function fun1() {
console.log(this); // Window
function fun2() {
console.log(this); // Window
}
fun2();
}
fun1();
</script>
注意点③
<script type=”text/javascript”>
var obj1 = {
“name”: “test1”,
“walk”: function() {
console.log(this); // obj1
var _this = this;
var obj2 = {
“name”: “test2”,
“walk”: function() {
console.log(this); //obj2
console.log(_this); //obj1
}
}
obj2.walk();
}
};
obj1.walk();
</script>
var obj1 = {
“name”: “test1”,
“walk”: function() {
console.log(this); // obj1
var _this = this;
var obj2 = {
“name”: “test2”,
“walk”: function() {
console.log(this); //obj2
console.log(_this); //obj1
}
}
obj2.walk();
}
};
obj1.walk();
</script>
this変える方法
apply
function fun1(para1,para2) {
console.log(this,para1, para2);
}
console.log(this,para1, para2);
}
var obj1 = {
“name”: “test”
}
fun1.apply(obj1,[1, 2]);// thisはobj1となる、実行される
call
function fun1(para1,para2) {
console.log(this,para1, para2);
}
console.log(this,para1, para2);
}
var obj1 = {
“name”: “test”
}
fun1.apply(obj1,1, 2);// thisはobj1となる、実行される
bind
function fun1(para1,para2) {
console.log(this,para1, para2);
}
console.log(this,para1, para2);
}
var obj1 = {
“name”: “test”
}
fun1.bind(obj1,1, 2);// thisはobj1となる、実行されない
fun1.bind(obj1,1, 2)();// thisはobj1となる、実行される
fun1.bind(obj1)(1, 2);// thisはobj1となる、実行される
