JS的this关键字

最新推荐文章于 2022-12-11 13:25:48 发布

大饼卷馒头蘸米饭

最新推荐文章于 2022-12-11 13:25:48 发布

阅读量551

点赞数

分类专栏： Js

Js 专栏收录该内容

70 篇文章 0 订阅

订阅专栏

JavaScript中的this关键字是一个难以琢磨的概念，是一个依赖于它的执行环境而被解析的关键字。

1,在JS文件中直接alert(this);this代表的是window,当前的执行环境是在JS的顶层域里面。

2，下面这个例子中this指向的是调用该方法的对象，button标签。

[html] view plain copy print ?

<script type="text/javascript">
function test() {
alert(this.value);
this.style.color = "red";
}
</script>
</head>
<body>
<input type="button" id="ipt" value="test this">
<script type="text/javascript">
document.getElementById("ipt").onclick = test;
</script>
</body>
</html>

<script type="text/javascript">
	function test() {
		alert(this.value);
		this.style.color = "red";
	}
</script>

</head>
<body>
	<input type="button"  id="ipt" value="test this">
	<script type="text/javascript">
		document.getElementById("ipt").onclick = test;
	</script>
</body>
</html>

上面的例子等价于下面的例子，document.getElementById("ipt").onclick相对于把test函数变成了id为 ipt元素的一个函数属性了，从而让this指向了id为 ipt元素。但是如果写成<input type="button" id="ipt" οnclick="test()" value="test this">这样的方式调用test方法，this却是指向了window。（不明白？直接指定的话没有JS环境绑定？）

[html] view plain copy print ?

<script type="text/javascript">
function test() {
alert(this.value);
this.style.color = "red";
}
</script>
</head>
<body>
<input type="button" id="ipt" value="test this">
<script type="text/javascript">
var button = document.getElementById("ipt");
test.call(button);
</script>
</body>
</html>

<script type="text/javascript">
	function test() {
		alert(this.value);
		this.style.color = "red";
	}
</script>

</head>
<body>
	<input type="button"  id="ipt" value="test this">
	<script type="text/javascript">
		var button = document.getElementById("ipt");
		test.call(button);
	</script>
</body>
</html>

3，在一个函数中，this代表这个函数的执行环境

[javascript] view plain copy print ?

function Test(){
alert(this);
}
Test();//outputs window
var obj = new Test(); // outputs object

function Test(){
	alert(this);
}

Test();//outputs window

var obj = new Test(); // outputs object

Test()是在window域里执行的，其等价于window.Test();
var obj = new Test(); 其相当于 obj.Test();

大饼卷馒头蘸米饭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS的this关键字

JavaScript中的this关键字是一个难以琢磨的概念，是一个依赖于它的执行环境而被解析的关键字。1,在JS文件中直接alert(this);this代表的是window,当前的执行环境是在JS的顶层域里面。2，下面这个例子中this指向的是调用该方法的对象，button标签。[html] view plaincopyprint?scripttype
复制链接

扫一扫

专栏目录