call,apply和bind的用法及区别

看过太多如此的文章,终究还是没能深深留在脑海。
JavaScript有两个隐藏的变量:argument、this
改变this指向的方法:

一、 call()和apply()
区别是传参

//call 的传参和apply的传参
function say(arg1,arg2){
  console.log(this.name,arg1,arg2);
};
var obj = {
  name : 'tom',
  say : function(){
    console.log(this.name);
  }
}
say.call(obj,'one','two');//tom one two
say.spply(obj,['one','two']);//tom one two  效果一样

二、 bind
作用:bind()方法会创建一个新函数,称为绑定函数,当调用这个绑定函数时,绑定函数会以创建它时传入 bind()方法的第一个参数作为 this,传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

var foo = {
    bar : 1,
    eventBind: function(){
        $('.someClass').on('click',function(event) {
            /* Act on the event */
            console.log(this.bar);      //1
        }.bind(this));//这里的this是eventBind的this,即指向的是foo
    }
}

注意:多次bind无效,按第一次算
总结一下

  1. apply 、 call 、bind 三者都是用来改变函数的this对象的指向的;
  2. apply 、 call 、bind 三者第一个参数都是this要指向的对象,也就是想指定的上下文;
  3. apply 、 call 两者都可以利用后续参数传参; 但是传参的方式不一样,apply是数组,call是正常传参形式
  4. bind 是返回对应函数,便于稍后调用;apply 、call 则是立即调用 。

三、new
new 运算原理:

new Animal('cat') = {//类似这样
    var obj = {};//先定义一个空对象
    obj.__proto__ = Animal.prototype;//把 obj 的__proto__ 指向构造函数 Animal 的原型对象 prototype,此时便建立了 obj 对象的原型链:obj->Animal.prototype->Object.prototype->null
    var result = Animal.call(obj,"cat");//改变this指向,从Animal改变到obj上
return typeof result === 'object'? result : obj; //返回
}

用法:

function Fn(){
    this.user = "追梦子";
}
var a = new Fn();//this指向a
console.log(a.user); //追梦子

四、return
在构造函数的时候,使用return进行返回一个Object的时候,当去new一个实例对象的时候,会将this指向改变为return的Object;

用法:

function fn()  
{  
    this.user = '追梦子';  
    return {
        "user" : "111"
    };  
}
var a = new fn;  
console.log(a.user); //111

你可能感兴趣的:(JavaScript知识)