Javascript的this用法
Posted llx8
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Javascript的this用法相关的知识，希望对你有一定的参考价值。
1.纯粹的函数调用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--这是函数的最通常用法，属于全局性调用，因此this就代表全局对象Global。 请看下面这段代码，它的运行结果是1--> </body> <script type="text/javascript"> function test() { this.x = 1; alert(this.x); } test(); // 1 // 为了证明this就是全局对象，我对代码做一些改变 var x = 1; function test() { alert(this.x); } test(); // 1 // 运行结果还是1。再变一下： var x = 1; function test() { this.x = 0; } test(); alert(x); //0 </script> </html>
2.作为对象方法的调用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--函数还可以作为某个对象的方法调用，这时this就指这个上级对象。-->
</body>
<script type="text/javascript">
function test() {
alert(this.x);
}
var o = {};
o.x = 1;
o.m = test;
o.m(); // 1
</script>
</html>
3.作为构造函数调用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--所谓构造函数，就是通过这个函数生成一个新对象（object）。这时，this就指这个新对象。-->
</body>
<script type="text/javascript">
function test() {
this.x = 1;
}
var o = new test();
alert(o.x); // 1
// 运行结果为1。为了表明这时this不是全局对象，我对代码做一些改变：
var x = 2;
function test() {
this.x = 1;
}
var o = new test();
alert(x); //2
// 运行结果为2，表明全局变量x的值根本没变
</script>
</html>
4.apply调用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--apply()是函数对象的一个方法，它的作用是改变函数的调用对象，
它的第一个参数就表示改变后的调用这个函数的对象。
因此，this指的就是这第一个参数-->
</body>
<script type="text/javascript">
var x = 0;
function test() {
alert(this.x);
}
var o = {};
o.x = 1;
o.m = test;
o.m.apply(); //0
// apply()的参数为空时，默认调用全局对象。因此，这时的运行结果为0，证明this指的是全局对象。
// 如果把最后一行代码修改为
o.m.apply(o); //1
// 运行结果就变成了1，证明了这时this代表的是对象o。
</script>
</html>
apply调用拓展
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
var x = 0;
function test() {
alert(this.x);
return x
}
var o = {};
o.x = 1;
o.m = test;
o.m.apply(); //0
alert(o.m())//1 & undefine
//加上return x后变成 //1 & 0
</script>
</html>
this在nodejs中的指向
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
// 上面这些规则在Nodejs上面好像不怎么准确。
// 比如：
var x = 1;
function test() {
console.log(this.x);
}
test(); //不是1，因为nodejs没有全局这个概念，在一个js文件里，
// 最上层的对象不是全局对象，而是对应于这个文件的module对象。所以在nodejs里面上面的规则就不适应了。
</script>
</html>
函数调用1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
function test() {
this.x = 1;
alert(this.x);
}
test(); // 1
alert(window.x)//1
</script>
</html>
函数调用2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
var x = 1;
function test() {
alert(this.x);
}
test(); // 1
</script>
</html>
函数调用3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
var x = 1;
function test() {
this.x = 0;
}
test();
alert(x); //0
</script>
</html>
对象方法的调用1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
function test() {
alert(this.x);
}
var o = {};
o.x = 1;
o.m = test;
o.m(); // 1
// 这里的this指向上级调用的这个对象
</script>
</html>
构造函数调用1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
function test() {
this.x = 1;
}
var o = new test();
alert(o.x); // 1
这里的this指向新的实例对象o
</script>
</html>
构造函数调用2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
var x = 2;
function test() {
this.x = 1;
}
var o = new test();
o.x = 3;
alert(o.x)
alert(x); //2
// 这里的this指向实例对象,全局属性x没有被改变
</script>
</html>
概念
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--this是Javascript语言的一个关键字。
它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。比如，-->
</body>
<script type="text/javascript">
function test() {
this.x = 1;
}
</script>
<!--随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，
那就是this指的是，调用函数的那个对象。-->
</html>
GitHub地址：https://github.com/lianglixiong
以上是关于Javascript的this用法的主要内容，如果未能解决你的问题，请参考以下文章