JS面向对象--4函数的上下文之五规律

函数的上下文就是指this是谁
规律1：函数用圆括号直接调用，函数的上下文是window对象

`function fun(){
  var a =100;
  alert(this.a);
}

var a =200;
fun();  //200

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

所有的全局变量都是window对象的属性，而函数里面的局部变量，不是window的属性，不是任何东西的属性，它就是一个变量

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

function fun(){
  var a =888;
  alert(this.a);
}
var obj ={
  "a" :10,
  "b" :20,
  "c" :fun    //给这个对象增加一个方法 值是fun函数
}

obj.c()   //10  不是圆括号直接执行，而是这个对象打点调用这个函数执行，所以函数的上下文是obj对象 。

function fun(){
  var a =888;
  alert(this.a);
}
var obj ={
  "a" :10,
  "b" :20,
  "c" :fun    //给这个对象增加一个方法 值是fun函数
}
var fff= obj.c;
fff();    //undefined

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

#box,#box1{
  width:100px;
  height:100px;
  background:red;
}
<div id="box"></div>
<div id="box1"></div>
function fun(){
  this.style.background ="orange";
}
var box = document.getElementById("box");
var box = document.getElementById("box1");
//把同一个函数绑定给不同的对象 this点击谁就是谁
box.onclick =fun;
box1.onclick =fun;

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

function fun(){
  alert(this.a);
}
var a =888;
setInterval(fun,1000);   //每秒弹出888

举例：点击一个小盒子，2秒变红

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

box1.onclick = function(){
  setTimeout(function(){
     this.style.background = "red";  //这里的this是window对象 window对象没有背景颜色属性，document.body有

  },2000)
}

报错
改写

box1.onclick = function(){
  var self = this;   //this备份
  //var that = this    //备份this  备份上下文方法
  //var _this = this
  setTimeout(function(){
    self.style.background = "red";  //

  },2000)
}

在定时器外面的事件处理函数中，this就是box1这个元素，此时我们可以备份上下文，把this存为变量self,后面的程序就用self指代box1

规律5：数组中存放的函数被数组索引调用 this就是这个数组

function fun0(a,b,c,d,e){
  alert(this === arr);   //true
  alert(this.length); 
}
var arr = [fun0;"东风","晶晶"];
var length = 10;
arr[0]();  //3

一定要敏感：
arr[0]() ;
此时这个函数是从数组中枚举出来然后加圆括号执行的，所以最终调用者可以认为是这个数组，上下文就是这个数组
例

function fun0(a,b,c,d,e){
  alert(this.length); 
}

var length = 10;
fun0();  //10    这里圆括号直接调用  this 是window

最后编辑于：2017.11.30 13:09:55