1-1 函数中this指向
函数正常调用的时候this指向: window
定时器: window
构造函数:实例化对象
var name = "张三"
function show(){
console.log(this.name);
}
function go(){
var name = "李四"
show()
}
go() // "张三" // window.go()
function go(){
var name = "李四"
console.log(this.name); // window.name
}
go() // "张三" window.go()
1-2 改变函数中this指向
1-2-1 call
语法: funName.call(obj,arg1,arg2...)
var name="王五"
var obj = { name:"李四" }
function go(){
console.log(this.name);
}
go() // 王五
go.call(obj) // 李四
1-2-2 apply
语法:funName.call(obj,[arg1,arg2...])
call,apply的区别:
应用场景:传递多个参数的情况
call依次去传递
apply 需要传递数组
var name="window"
var zhang={
name:"张三"
}
function show(a,b){
console.log(this.name);
console.log(a+b);
}
show(1,2)
show.call(zhang,2,3)
show.apply(zhang,[1,2])
1-2-3 bind
bind 绑定的函数不会马上执行,只是改变了函数上下文的执行环境
call,apply调用的时候马上执行
var name = "window"
var zhang = {
name:"张三"
}
var show = function (a,b){
console.log(this.name);
console.log(a+b);
}.bind(zhang)
show(2,3) // zhang 5
使用场景
- 解决定时器中this的指向问题 ```javascript
解决
1.使用bind解决
btn.onclick = function(){
setTimeout(function(){
console.log(this.id);
}.bind(btn),1000)
}
/* btn.onclick = function(){
var self = this
setTimeout(function(){
console.log(this.id);
}.bind(self),1000)
}
btn.onclick = function(){
setTimeout(function(){
console.log(this.id);
}.bind(this),1000)
}
*/
2.使用箭头函数解决
btn.onclick = function(){ setTimeout(()=>{ console.log(this.id); },1000) } ```