函数的上下文规律 ----this指向

Posted 2020-10-12 Joyce前端

首先说下什么是函数的上下文呢？简单来说就是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 呢  那就是形参个数。