this
Opened this issue · 0 comments
incuisting commented
先看一下这个例子:
var obj = {
foo: function(){
console.log(this)
}
}
var bar = obj.foo
obj.foo() // 打印出的 this 是 obj
bar() // 打印出的 this 是 window
简单的解释就是:谁调用,this就指向谁。
obj.foo()
就是obj调用foo()
bar()
打印出了window ,那么直接调用就是window直接调用bar()
但是谁调用,this就指向谁这个解释还是有点太片面。所以还有一个办法,就是把函数的调用转化为call()
或者apply()
调用的方式。
以call()
为例子
fn.call(context,p1,p2,p3.....)
这里的context 就是this
后面接的是传进去的参数
所以
bar()
//相当于
bar().call(undefined)
obj.foo()
//相当于
obj.foo().call(obj)
浏览器有一条规则:如果你传的 context 就 null 或者 undefined,那么 window 对象就是默认的 context(严格模式下默认 context 是 undefined)
this对象的指向是可变的,但是在ES6中箭头函数的this的指向是固定,绑定到定义时所在的作用域
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
var id = 21;
foo.call({ id: 42 });
// id: 42
上面代码中,setTimeout的参数是一个箭头函数,这个箭头函数的定义生效是在foo函数生成时,而它的真正执行要等到100毫秒后。如果是普通函数,执行时this应该指向全局对象window,这时应该输出21。但是,箭头函数导致this总是指向函数定义生效时所在的对象(本例是{id: 42}),所以输出的是42。
参考文章:阮一峰es6