js 改变this指向的几种方法(个人学习笔记)

  1.call()和apply()

    两中方法都能改变this指向,很类似,区别主要是第二个以后参数,

      call():第一个参数表示要把this指向的新目标,第二个之后的参数其实相当于传参,参数以,隔开    (性能较apply略好)

        用法:a.call(b,1,2);   表示要把a函数的this指向修改为b的this指向,并且运行a函数,传进去的参数是(1,2)

      apply(): 第一个参数同上,第二个参数接受一个数组,里面也是传参,只是以数组的方式,相当于arguments

        用法:a.apply(b,[1,2]);  表示要把a函数的this指向修改为b的this指向,并且运行a函数,传进去的参数是(1,2)注意  :即使只有一个参数的话,也要是数组的形式

//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  效果一样

  2.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无效,按第一次算

   总结一下

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

  3.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); //追梦子

  4.return

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

     用法:

function fn()  
{  
    this.user = '追梦子';  
    return {
        "user" : "111"
    };  
}
var a = new fn;  
console.log(a.user); //111
posted @ 2018-05-27 16:11  前端__小川  阅读(9168)  评论(0编辑  收藏  举报