简单来说函数上下文就是函数里面的this是谁。【上下文就是this的指向】
(1)函数执行时,函数的上下文是window。
var a = 200;
function func(){
var a = 100;
console.log(this.a) // window.a
}
func();
(2)函数作为对象的方法,对象调用方法时,函数的上下文即为这个对象。
function say() {
console.log(this.name) // obj.name
}
var obj = {
name:'Jane Doe',
sayHi:say
}
obj.sayHi()
(3)函数作为事件处理函数,函数的上下文就是这个事件触发的对象
function changeColor(){
this.style.background = 'pink';
}
var box = document.getElementById('box1');
box.onclick = changeColor;
(4)计时器,函数的上下文是window
<div id = 'box'> </div>
var box = document.getElementById('box');
box.onclick = function () {
var self = this;
setInterval(function () {
self.style.background = 'pink'
},1000)
}
(5)函数作为数组的元素,被引用出来执行时,函数的上下文属于该数组
function func(){
console.log(this === array) // true
}
var array = [func,1,2,3,4]
array[0]()
(6)apply,call通常用来修改函数的上下文,函数中的this指针将被替换为call或apply
的第一个参数。
function sum(a,b,c,d) {
console.log(a+b+c+d);
console.log(this === Car)
}
var Car = {
name:'Benz'
};
//sum.call(Car,1,2,3,4)
sum.apply(Car,[1,2,3,4]) // 后面参数必须是数组
(7)自执行函数,this的指针是window,自执行函数被window调用
function say() {
(function() {
console.log(this);
})();
};
new say(); //① window
say(); //② window
(8)闭包可使得context稳定
function say() {
var _this = this;
setTimeout(function() {
console.log(_this);
}, 0);
};
new say(); //①
say(); //②
或
function say() {
(function(_this) {
console.log(_this);
})(this);
};
new say(); //①
say(); //②
(9)bind改变函数的context
function say() {
setTimeout(function() {
console.log(this);
}.bind(this), 0);
};
new say(); //①
say(); //②
(10)ES6的箭头函数
箭头函数采用词法作用域
function say() {
setTimeout(() => {
console.log(this);
}, 0);
};
new say(); //say{}
say(); //window