call()、apply()和bind()的异同

javascript 技术

JavaScript

2017-06-23 19:12:38

238

作者:黑夜男神

相同点:

var a = {
    name:"丸子",
    fn:function(){
        console.log(this.name);
    }
}
var b = a.fn;
b()//undefined
b.call(a);//丸子
b.apply(a);//丸子
b.bind(a);//没有被打印
不同点
    call和apply都是立即执行,而bind则是返回一个函数;

var a = {
    name:"丸子",
        fn:function(){
            console.log(this.name);
        }
    }
    var b = a.fn;
    b.bind(a)//没有被打印

    var c = b.bind(a)
    console.log(c);
        //function (){
        //console.log(this.name);
    //}

    c();//丸子
   如果call和apply的第一个参数写的是null,那么this指向的是window对象;

   var a = {
   name:"丸子",
   fn:function(){
       console.log(this);
       //Window {external: Object, chrome: Object, document: document, a: Object, speechSynthesis: SpeechSynthesis…}
       }
   }
   var b = a.fn;
   b()//this指向的是window对象
   b.call(null);//this指向的是window对象
   b.apply(null);//this指向的是window对象
   b.bind(null)//没有被打印
call和apply可以有多个参数,不同的是apply第二个参数必须是一个数组;
var a = {
    name:"丸子",
    fn:function(m,n){
        console.log(this.name);
        console.log(m+n);
    }
}
var b = a.fn;
b.call(a,6,6)
// 丸子 
// 12

b.apply(a,[6,4]);
// 丸子  
// 10
同样bind也可以有多个参数,并且参数可以执行的时候再次添加,但是要注意的是,参数是按照形参的顺序进行的。
var a = {
    name:"丸子",
    fn:function(m,n){
        console.log(this.name);
        console.log(m+n);
    }
}
var b = a.fn;
b.bind(a)//没有被打印

var c = b.bind(a,2)
console.log(c);
//function (m,n){
    //console.log(this.name);
    //console.log(m+n);
//}

c(3);
//丸子
//5

评论 (0)

用户名
邮箱
评论

    Copyright © 2020 darkNightMan All Rights Reserved Pro 黔ICP备20005477号