认识上下文#

函数的上下文

• 函数中可以使用this关键字，它表示函数的上下文
• 与中文中“这”类似，函数中的this具体指代什么必须通过调 用函数时的“前言后语”来判断

函数中的this

1
var xiaoming = {
2
    nickname : '小明',
3
    age : 12,
4
    sayHello : function () {
5
        console.log('我是' + this.nickname + '，我' + this.age + '岁了');
6
    }
7
};
8
xiaoming.sayHello();//我是小明，我12岁了

函数被提出到外面执行：

1
var xiaoming = {
2
    nickname : '小明',
3
    age : 12,
4
    sayHello : function () {
5
        console.log('我是' + this.nickname + '，我' + this.age + '岁了');
6
    }
7
};
8
var sayHello = xiaoming.sayHello;//将函数“提”出来，单独存为变量
9
sayHello();//直接圆括号调用这个函数而不是对象打点调用了   我是undefined，我undefined岁了

• 同一个函数，用不同的形式调用它，则函数的上下文不同

• 情形1：对象打点调用函数，函数中的this指代这个打点的对象

  1
  xiaoming.sayHello();

• 情形2：圆括号直接调用函数，函数中的this指代window对象

  1
  var sayHello = xiaoming.sayHello;
  2
  sayHello();

函数的上下文由调用方式决定

1
var obj = {
2
    a: 1,
3
    b: 2,
4
    function () {
5
        console.log(this.a + this.b);//不知道，因为没有调用，函数只有被调用，它的上下文才能被确定
6
    }
7
};

例子1：

1
var obj = {
2
    a: 1,
3
    b: 2,
4
    fn: function () {
5
        console.log(this.a + this.b);
6
    }
7
};
8
obj.fn();//this指向obj

例子2：

1
var obj = {
2
    a: 1,
3
    b: 2,
4
    fn: function () {
5
        console.log(this.a + this.b);
6
    }
7
};
8
var fn = obj.fn;
9
fn();this指向window

上下文规则#

函数的上下文由调用函数的方式决定

• 函数的上下文（this关键字）由调用函数的方式决定， function是“运行时上下文”策略
• 函数如果不调用，则不能确定函数的上下文

规则1

• 规则1：对象打点调用它的方法函数，则函数的上下文是这 个打点的对象

  1
  对象.方法()

  1
  function fn() {
  2
    console.log(this.a + this.b);
  3
  }
  4
  var obj = {
  5
    a: 66,
  6
    b: 33,
  7
    fn: fn,
  8
  };
  9
  obj.fn(); //99

  1
  var obj1 = {
  2
    a: 1,
  3
    b: 2,
  4
    fn: function () {
  5
      console.log(this.a + this.b);
  6
    },
  7
  };
  8
  var obj2 = {
  9
    a: 3,
  10
    b: 4,
  11
    fn: obj1.fn,
  12
  };
  13
  obj2.fn(); //7

  1
  function outer() {
  2
    var a = 11;
  3
    var b = 22;
  4
    return {
  5
      a: 33,
  6
      b: 44,
  7
      fn: function () {
  8
        console.log(this.a + this.b);
  9
      },
  10
    };
  11
  }
  12
  outer().fn(); //77

  1
  function fun() {
  2
    console.log(this.a + this.b);
  3
  }
  4
  var obj = {
  5
    a: 1,
  6
    b: 2,
  7
    c: [
  8
      {
  9
        a: 3,
  10
        b: 4,
  11
        c: fun,
  12
      },
  13
    ],
  14
  };
  15
  var a = 5;
  16
  obj.c[0].c(); //7

  展开收起

规则2

• 圆括号直接调用函数，则函数的上下文是window对 象

  1
  函数()

  1
  var obj1 = {
  2
    a: 1,
  3
    b: 2,
  4
    fn: function () {
  5
      console.log(this.a + this.b);
  6
    },
  7
  };
  8
  var a = 3;
  9
  var b = 4;
  10
  var fn = obj1.fn;
  11
  fn();//7

  1
  function fun() {
  2
    return this.a + this.b;
  3
  }
  4
  var a = 1;
  5
  var b = 2;
  6
  var obj = {
  7
    a: 3,
  8
    b: fun(),//3
  9
    fun: fun,//obj.fun === window.fun true
  10
  };
  11
  var result = obj.fun();//6，一个铁律：函数只有在调用的时候才能确定上下文  obj.a + obj.b 3+3
  12
  console.log(result);//6

规则3

• 数组（类数组对象）枚举出函数进行调用，上下文 是这个数组（类数组对象）

  1
  数组[下标]()

  1
  var arr = [
  2
    'A',
  3
    'B',
  4
    'C',
  5
    function () {
  6
      console.log(this[0]);
  7
    },
  8
  ];
  9
  arr[3]();'A'

类数组对象

• 什么是类数组对象：所有键名为自然数序列（从0开始）， 且有length属性的对象

• arguments对象是最常见的类数组对象，它是函数的实参列 表

  1
  function fun() {
  2
    arguments[3]();
  3
  }
  4
  fun('A', 'B', 'C', function () {
  5
    console.log(this[1]);
  6
  });//’B‘

规则4

• IIFE中的函数，上下文是window对象

  1
  (function() {
  2
  })();

  1
  var a = 1;
  2
  var obj = {
  3
    a: 2,
  4
    fun: (function () {
  5
      var a = this.a;//1  IIFE中的函数，上下文是window对象所以这里this指向全局a 即1
  6
      return function () {
  7
        console.log(a + this.a);//这里的this取决于调用，obj.fun()，所以this是obj，即a等于2 ，1+2=3
  8
      };
  9
    })(),
  10
  };
  11
  obj.fun();//3

规则5

• 定时器、延时器调用函数，上下文是window对象

  1
  setInterval(函数, 时间);
  2
  setTimeout(函数, 时间);

  1
  var obj = {
  2
    a: 1,
  3
    b: 2,
  4
    fun: function () {
  5
      console.log(this.a + this.b);
  6
    },
  7
  };
  8
  var a = 3;
  9
  var b = 4;
  10
  setTimeout(obj.fun, 2000);//定时器、延时器调用函数，上下文是window对象，所以这里指向的不是obj，虽然是obj调用，但是是setTimeout里面调用所以是window对象，所以是7，注意这里obj.fun并没有执行，而是2秒后执行

  1
  var obj = {
  2
    a: 1,
  3
    b: 2,
  4
    fun: function () {
  5
      console.log(this.a + this.b);
  6
    },
  7
  };
  8
  var a = 3;
  9
  var b = 4;
  10
  setTimeout(function () {
  11
    obj.fun();//这里已经执行，函数这里指向obj，所以是3，2秒后也是3
  12
  }, 2000);

规则6

• 事件处理函数的上下文是绑定事件的DOM元素

  1
  DOM元素.onclick = function () {
  2
  };

• 请实现效果：点击哪个盒子，哪个盒子就变红，要求使用同 一个事件处理函数实现

1
<style>
2
      .box {
3
        width: 100px;
4
        height: 100px;
5
        border: 1px solid #000;
6
        margin: 10px;
7
        display: inline-block;
8
      }
9
    </style>
10
  </head>
11
  <body>
12
    <div class="box"></div>
13
    <div class="box"></div>
14
    <div class="box"></div>
15
    <div class="box"></div>
16
    <script>
17
      var boxes = document.querySelectorAll('.box');
18

19
      for (var i = 0; i < boxes.length; i++) {
20
        boxes[i].onclick = changeColor;
21
      }
22

23
      function changeColor() {
24
        this.style.backgroundColor = 'red';
25
      }
26
    </script>
27
  </body>

• 请实现效果：点击哪个盒子，哪个盒子在2000毫秒后就变红 ，要求使用同一个事件处理函数实现

  1
  var boxes = document.querySelectorAll('.box');
  2
  
  3
  for (var i = 0; i < boxes.length; i++) {
  4
    boxes[i].onclick = changeColor;
  5
  }
  6
  
  7
  function changeColor() {
  8
    var that = this; // 保存当前点击的盒子
  9
  
  10
    setTimeout(function () {
  11
      that.style.backgroundColor = 'red';
  12
    }, 2000);
  13
  }

call和apply#

call和apply能指定函数的上下文

先来看个例子：

1
function sum() {
2
  alert(this.chinese + this.math + this.english);
3
}
4
var xiaoming = {
5
  chinese: 80,
6
  math: 95,
7
  english: 93,
8
};
9
//想用xiaoming调用sum，就需要sum成为xiaomin的上下文也就是下面
10
var xiaoming = {
11
  chinese: 80,
12
  math: 95,
13
  english: 93,
14
  sum:sum
15
};

但是现在有更简单的方式：

1
sum.call(xiaoming);
2
sum.apply(xiaoming);

就可以让sum的上下文成为xiaomin对象的上下文

1
function sum() {
2
  // alert(this.chinese + this.math + this.english);
3
  console.log(this.chinese + this.math + this.english);
4
}
5
var xiaoming = {
6
  chinese: 80,
7
  math: 95,
8
  english: 93,
9
};
10
sum.call(xiaoming);
11
sum.apply(xiaoming);

call和apply的区别

1
function sum(b1, b2) {
2
  alert(this.c + this.m + this.e + b1 + b2);
3
}
4
sum.call(xiaoming, 5, 3);//call要用逗号罗列参数
5
sum.apply(xiaoming, [5, 3]);//apply要把参数写到数组中

到底使用call还是apply？

1
function fun1() {
2
  fun2.apply(this, arguments);//arguments是类数组，所以只能使用apply
3
}
4
function fun2(a, b) {
5
  console.log(a + b);
6
}
7
fun1(33, 44);//77

上下文规则总结