函數上下文的判斷

時間 2019-12-07

標籤函數上下文判斷简体版

原文原文鏈接

1、若是是函數名圓括號執行這個函數，函數的上下文就是windowjavascript

<script type="text/javascript">
  var a=100;
  function myfun(a,b,c,d){
      console.log(this.a);//100
      var a=200;
      console.log(this.a)//100
      console.log(a); //200
  }
myfun();
</script>

提示：①必定要記住，誰纔有this的屬性；是函數對象纔有this屬性；css

②狹義對象沒有函數的上下文以後html

2、若是函數做爲對象的方法，最後是某一個對象打點調用這個方法，函數的上下文就是這個對象java

<script type="text/javascript">  
var people={
    'name':'小明',
    'age' :18,
    'sex':'男',
    'say':function(){
         console.log(this);  //people這個對象
         console.log(this.age); //18
     }
}
people.say();
</script>

注意：若是函數做爲對象的方法，並且是某個函數最後打點調用，這個函數的上下文就是這個對象數組

3、若是函數做爲定時器的回調函數,函數的上下文爲window函數

<script type="text/javascript">
  var a=100;
  setInterval(function(){
      a++;
      console.log(this);
      console.log(this.a);
  },1000)

</script>

4、若是函數做爲事件的處理函數，函數的上下文就是這個，觸發這個事件的這個對象；ui

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
    *{
        margin:0;
        padding:0;
    }
    p{
        height:20px;
        width:300px;
        background: pink;
        margin:10px 0;
    }
    </style>
</head>
<body>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</body>
</html>
<script type="text/javascript">
  var p0=document.getElementsByTagName('p')[0];
  var p1=document.getElementsByTagName('p')[1];
  var p2=document.getElementsByTagName('p')[2];
  var p3=document.getElementsByTagName('p')[3];
  function changeColor(argument) {
            this.style.background = "blue";
        }
       p0.onclick = changeColor;
       p1.onclick = changeColor;
       p2.onclick = changeColor;
       p3.onclick = changeColor;

</script>

提示：事件處理函數的上下文，當誰觸發這個事件，函數的上下文就是這個對象this

5、若是函數做爲數組的元素，函數經過數組枚舉出來圓括號執行，函數的上下文是這個數組spa

<script type="text/javascript">
var arr=[fn,1,2,3,4,5,6,7];
 function fn(){
     console.log(this);
     console.log(this.length);
    // console.log(arguments);
 }
arr[0]();
</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。