zoukankan      html  css  js  c++  java
  • 我总结函数的上下文规律

    首先说下什么是函数的上下文呢?简单来说就是this指向,在日常工作我们会遇到this经常被修改成window 或者别的对象了,这都是怎么造成的呢。

    根据平常写代码的经验,我总结了以下几种规律。

    1.函数用圆括号调用,函数的上下文是window对象

    请看下面代码

    function fun(){
        var a = 200;
        alert(this.a);
    }
    
    var a = 6666;
    fun();

    这个fun函数的上下文是什么呢?这个弹出来什么取决于这个this是什么。

    这个函数是什么不重要,重要的是怎么调用的,用圆括号调用,此时上下文指的就是window。即弹出6666;

    2.如果函数作为一个对象的方法,对象打点调用,函数的上下文对象就是这个对象。

    请看下面代码

    function fun(){
        
        alert(this.a);
    }
    
    var obj = {
        "a" : 12,
        "b" : 2,
        "c" : fun
    }
    
    obj.c();

    对象.函数();

    这时函数的上下文是obj ,弹出12。

    3.函数是事件处理函数,函数的上下文就是这个触发事件的对象。

            
    <<script>
        //函数
        function fun(){
            this.style.background = "yellow";
        }
        var box1 = document.getElementById("box1");
        var box2 = document.getElementById("box2");
        var box3 = document.getElementById("box3");
        btn.onclick = fun;
    </script>

    这个函数只有点击的时候回执行,点击谁,谁就是this。

    4.定时器调用,函数的上下文是window。

    平常工作中经常用到定时器

    var a = 456;
    setInterval(function(){
       var a = 123;
        alert(this.a)
    }, 1000)

    此时弹出是456;

    在定时器外面的事件处理函数中,可以用var self= this,或者_this = this ,改变this指向。

    5.数组中存放的函数,被数组索引调用,那么这个上下文就是这个数组。

    function fun(){
    
        alert(this === arr);
        alert(arr.length);
    }
    var arr = [fun,2,3424,5];
    arr[0]();

    此时这个函数是从数组中枚举出来的,最终调用是这个数组,所以上下文就是这个数组。

    面试也经常考这类的题目

    比如

    function fun(m,n,o,p,q){
      alert(this.length);
        
    }
    
    function f(){
        arguments[0](1,2,3,4,5)
    }
    
    f(fun,5,6,7)
    4
    这个this 是调用这个函数的 argument, 弹出来就是实参个数 4。
    如果是arguments.callee 呢  那就是形参个数。
     
  • 相关阅读:
    sparql学习sparql示例、dbpedia在线验证
    中国绿卡
    逾期率的水有多深,你知道吗?
    ICO和区块链区别
    What are the benefits to using anonymous functions instead of named functions for callbacks and parameters in JavaScript event code?
    Link static data in sql source control
    sql data compare
    viewbag
    多态的实际使用
    win10 sedlauncher.exe占用cpu处理
  • 原文地址:https://www.cnblogs.com/joyce123/p/7754851.html
Copyright © 2011-2022 走看看