• 函数的上下文就是函数里面的this是谁


     

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

    比如小题目:

    function fun(){

    var a = 888;

    alert(this.a); //实际上访问的是window.a

    }

    var a = 666;

    fun(); //弹出666

    函数function fun(){}的上下文是什么!不要看它怎么定义,要看它怎么调用!!此时是fun()函数名加上圆括号直接调用,此时上下文就是window对象!

    而我们知道:所有的全局变量都是window对象的属性,(注意:函数里面的局部变量,不是window的属性,不是任何东西的属性,它就是一个变量!!) 程序弹出666.

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

    比如下面的例子,我们把fun函数定义出来了,然后又把这个函数绑定给了obj对象的c属性:

    function fun(){

    alert(this.a); //相当于弹出obj.a

    }

    //对象

    var obj = {

    "a" : 10,

    "b" : 20,

    //给这个对象增加一个方法,值就是fun函数

    "c" : fun

    }

    //我们要看清楚函数执行的时候,是怎么执行的!!

    //现在不是圆括号直接执行!!而是一个对象打点调用这个函数执行,所以函数的上下文是obj对象!!!

    obj.c(); //弹出10

    调用的时候,是

    对象.函数()

    此时根据规律,函数里面的this是这个对象。所以能够弹出10。

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

    下面我们定义了一个fun,然后把这个fun当做了3个DOM元素的事件处理函数:

    //函数

    function fun(){

    this.style.background = "red";

    }

    var box1 = document.getElementById("box1");

    var box2 = document.getElementById("box2");

    var box3 = document.getElementById("box3");

    // 把同一个函数绑定给不同的对象

    // this就是点击谁就是谁

    box1.onclick = fun;

    box2.onclick = fun;

    box3.onclick = fun;

    函数不会执行,直到用户点击了某一个div标签。此时点击谁,this就是谁。

    规律4:定时器调用函数,上下文是window对象

    //函数

    function fun(){

    alert(this.a);

    }

    var a = 888;

    setInterval(fun,1000);

    函数fun被定时器调用,此时函数的上下文就是window对象。每秒钟能弹出888.

    做一个小例子吧,点击一个盒子,2秒钟之后变红:

    小明同学写的程序是错误的:

    var box1 = document.getElementById("box1");

    box1.onclick = function(){

    setTimeout(function(){

    this.style.background = "red";

    },2000);

    }

    这是因为我标蓝色的函数的最终调用者是定时器!所以函数的上下文是window对象。window对象没有背景颜色属性。

    怎么办?备份this!备份上下文!

    在定时器外面的事件处理函数中,this就是box1这个元素,此时我们可以备份上下文。把this存为局部变量self,后面的程序就用self指代box1。还可以用_this、that等等,我们一律使用self。

    var box1 = document.getElementById("box1");

    box1.onclick = function(){

    var self = this;

    setTimeout(function(){

    self.style.background = "red";

    },2000);

    }

    规律5:数组中存放的函数,被数组索引之后加圆括号调用,this就是这个数组

    比如:

    function fun(){

    alert(this === arr); //true

    alert(this.length); //3,因为数组的长度是3

    }

    var arr = [fun,"东风","五条"];

    arr[0]();

    一定要敏感:

    arr[0]();

    此时这个函数是从数组中枚举出来然后加圆括号执行的,所以最终调用者可以认为是这个数组,上下文就是这个数组。

  • 相关阅读:
    要加班了!
    项目经理的职责[转]
    用例图(User Case)
    c# 获取收藏夹目录到树型控件
    活动图(Activity Diagram)
    switch case重构事例[转]
    iframe 语法小结
    CSS入门
    Net中几种不同方式的文件下载
    网页效果集合
  • 原文地址:https://www.cnblogs.com/pms01/p/7123923.html
Copyright © 2020-2023  润新知