美文网首页
this、call、apply、bind

this、call、apply、bind

作者: 人间四月天i | 来源:发表于2019-10-22 17:56 被阅读0次

this的指向(this永远指向最后调用它的那个对象)

改变this指向

  • ES6函数箭头
  • 在函数内部使用 var _this=this
  • 使用call、apply、bind
  • new实例化一个对象
  • apply
  • bind 接收多个参数
  • call
//箭头函数   前
var name="window"
var a={
    name:"hello",
    fun1:function(){
        console.log(this.name)
    },
    fun2:function(){
        setTimeout(function(){
            this.fun1()
        },1500)
    }
}
a.fun2()     // this.fun1 is not a function
//后
var name="window"
var a={
    name:"hello",
    fun1:function(){
        console.log(this.name)
    },
    fun2:function(){
        setTimeout(()=>{      //  或者 var _this=this
            this.fun1()
        },1000)
    }
}
a.fun2()
//apply   fun.apply(thisArg,[argsArray])
var a ={
  name : "lili",
  fn : function (a,b) {
   console.log( a + b)
  }
 }
 var b = a.fn;
 b.apply(a,[1,2])  // 3
 
var a={
    name:"hello world!",
    fun1:function(){
        console.log(this.name)
    },
    fun2:function(){
        setTimeout(function(){
        this.fun1()
        }.apply(a),1000)
    }
}
a.fun2()     // hello world!
//call   fun.call(thisArg[,arg1[,arg2[,...]]])
var a ={
  name : "lili",
  fn : function (a,b) {
   console.log( a + b)
  }
 }
 var b = a.fn;
 b.call(a,1,2)  // 3
 
var a={
    name:"hello world!",
    fun1:function(){
        console.log(this.name)
    },
    fun2:function(){
        setTimeout(function(){
            this.fun1()
        }.call(a),1000)
    }
}
a.fun2()     // hello world!
//bind
var a ={
  name : "lili",
  fn : function (a,b) {
   console.log( a + b)
  }
 }
 var b = a.fn;
 b.bind(a,1,2)()   // 3
 
var a={
    name:"hello world!",
    fun1:function(){
        console.log(this.name)
    },
    fun2:function(){
        setTimeout(function(){
            this.fun1()
        }.bind(a)(),1000)
    }
}
a.fun2()    // hello world!

相关文章

网友评论

      本文标题:this、call、apply、bind

      本文链接:https://www.haomeiwen.com/subject/wnqcvctx.html