JavaScript中this的指向及几种简单用法
本文body代码如下:
<body>
<input id="btn1" type="button" value="按钮1" />
<input id="btn1" type="button" value="按钮" onclick="btn2()" />
<input id="btn3" type="button" value="按钮3" onclick="btn3(this)" />
</body>
1.给按钮1加onclick点击事件,输出this;
var btn1 = document.getElementById("btn1")
btn1.onclick = function () {
//指向调用元素
console.log(this)
}
点击按钮1,此时this指向的是id为btn1的元素,也就是谁调用this,this就指向谁,没人调用则指向window,控制台输出如下:
2.直接在按钮2写onclick属性,触发btn2函数;
function btn2() {
//指向window
console.log(this)
};
点击按钮2,此时this指向的是window,注意这里不是按钮2调用btn2函数,而是触发了btn2函数,所以this指向window,控制台输出如下:
如果要使用这种写在元素属性来触发函数的方法实现this指向该元素,可以用按钮3的方式:
function btn3(This) {
//参数This指向调用元素
console.log(This)
}
把this作为btn3函数的传递参数;
4.写在对象内的函数中的this;
var number = 1;
var obj = {
number: 2,
showNumber: function () {
this.number = 3; //this.指向当前函数的拥有者obj,把3赋值给obj.number
(function () {
console.log("one:" + this.number, this); //自调用函数this指向window
})();
console.log("tow:" + this.number, this);
}
};
obj.showNumber();
通常this指向的是该函数的拥有者,但自调用函数是个例外;
该例obj.showNumber函数中,除了自调用函数外,this指向都是对象obj;
自调用函数中,this.number指向的是window中的number,所以tow=1;
全部html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input id="btn1" type="button" value="按钮1" />
<input id="btn1" type="button" value="按钮2" onclick="btn2()" />
<input id="btn3" type="button" value="按钮3" onclick="btn3(this)" />
</body>
<script>
function btn2() {
//指向window
console.log(this)
};
var btn1 = document.getElementById("btn1")
btn1.onclick = function () {
//指向调用元素
console.log(this)
}
function btn3(This) {
//参数This指向调用元素
console.log(This)
}
var number = 1;
var obj = {
number: 2,
showNumber: function () {
this.number = 3; //this.指向当前函数的拥有者obj,把3赋值给obj.number
(function () {
console.log("one:" + this.number, this); //自调用函数this指向window
})();
console.log("tow:" + this.number, this);
}
};
obj.showNumber();
</script>
</html>