Javascript的this用法
阿新 • • 發佈：2018-06-22
怎麽 對象 ret 函數調用 define func 作用 new tex
1.純粹的函數調用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--這是函數的最通常用法，屬於全局性調用，因此this就代表全局對象Global。
請看下面這段代碼，它的運行結果是1-->
</body>
<script type="text/javascript">
function
2.作為對象方法的調用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--函數還可以作為某個對象的方法調用，這時this就指這個上級對象。-->
</body>
<script type="text/javascript">
function
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用法