码迷,mamicode.com
首页 > 其他好文 > 详细

函数上下文的判断

时间:2017-12-03 21:40:32      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:1.0   images   var   get   doctype   元素   tps   https   height   

一、如果是函数名圆括号执行这个函数,函数的上下文就是window

 

<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属性;

           ②狭义对象没有函数的上下文之后

二、如果函数作为对象的方法,最后是某一个对象打点调用这个方法,函数的上下文就是这个对象

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

 

技术分享图片

注意:如果函数作为对象的方法,而且是某个函数最后打点调用,这个函数的上下文就是这个对象

三、如果函数作为定时器的回调函数,函数的上下文为window

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

</script>

 

技术分享图片

四、如果函数作为事件的处理函数,函数的上下文就是这个,触发这个事件的这个对象;

 

<!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>

 

提示:事件处理函数的上下文,当谁触发这个事件,函数的上下文就是这个对象

五、如果函数作为数组的元素,函数通过数组枚举出来圆括号执行,函数的上下文是这个数组

<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>

技术分享图片

 

函数上下文的判断

标签:1.0   images   var   get   doctype   元素   tps   https   height   

原文地址:http://www.cnblogs.com/smivico/p/7967238.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!