Js中this的用法

最新推荐文章于 2022-01-29 17:29:26 发布

原创最新推荐文章于 2022-01-29 17:29:26 发布 · 115 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

javaScript 专栏收录该内容

10 篇文章

订阅专栏

1,我们先看看this是个什么东西

那么，我们就直接：alert(this);看看这个this指的是什么东西

<script type="text/javascript">  
    alert(this);//object window,window 是js老大  
    //window.alert(this);     
</script>

这个时候就知道this是object window 。alert(1);是window.alert(1);的简写。所以alert(1);这里前面有个默认的window所以这里的this指向的是object window.

在举个例子

<script type="text/javascript">  
    function fn1(){  
        alert(this);  
    }  
    window.fn1();  
    //fn1();  
</script>

在函数里面的this也指的是window。

这个时候我们就可以理解this：指的是调用当前方法（函数）的那个对象

函数的执行有 fn1();还有点击等事件的时候让函数执行

如：

<input type="button" id="btn1" value="button" />  
<script>  
    var oBtn = document.getElementById("btn1");  
    oBtn.onclick = fn1;//这个函数静静的躺在那里，谁让函数动了，弹出来的就是谁。  
</script>

this对当前看的特别重要

<input type="button" id="btn1" value="button" />  
    <!--alert(this)指的是button，fn1()；指的是window-->  
<script>  
  
function fn1(){  
    alert(this);  
}  
    var oBtn = document.getElementById("btn1");  
          
    oBtn.onclick = function(){  
        //alert(this);//这里的this指的就是button按钮本身  
        fn1();//这样的话，前面有个老大哥window这种调用方式就是window。  
}  
</script>

还有一种情况是在元素上直接加事件或者函数，这种情况现在已经是不推荐使用的，但是我们介绍下主要了解this的指向：

如：

<input type="button" id="btn2" onclick="alert(this);" value="button2" />

所以这个里面this是指button

<input type="button" id="btn2" onclick="fn1();" value="button2" />  
//fn1()就是上面的一个函数

所以这个里面的this指的是window

这个时候我们总结一下：

<!DOCTYPE HTML>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<title>无标题文档</title>  
  
<script>  
  
// this : 这个  
// this： 指的是调用 当前 方法（函数）的那个对象  
  
function fn1(){  
    // this  
}  
// fn1();           this => window  
// oDiv.onclick = fn1;          this => oDiv  
/*  
oDiv.onclick = function (){  
    fn1();                  fn1() 里的this => window  
};  
  
<div onclick="    this     fn1();      "></div>     fn1(); 里的 this 指的是 window  
*/  
  
  
// alert( this );       // object window  
  
// window 是 JS “老大”  
// window.alert( this );  
  
function fn1(){  
    alert( this );              // window  
}  
// fn1();  
// window.fn1();  
</script>  
  
</head>  
  
<body>  
  
<input id="btn1" type="button" value="按钮" />  
  
<input id="btn2" type="button" onclick=" fn1(); " value="按钮2" />  
  
<script>  
var oBtn = document.getElementById('btn1');  
// oBtn.onclick = fn1;  
oBtn.onclick = function (){  
    // this  
    fn1();  
};  
</script>  
  
</body>  
</html>