改变this指向以及call apply bind的区别

首先要说的是this,到底指向什么?

　　可能你也听说过  函数谁调用 this就指向谁. 但是随着js的发展,this指向我们也是可以做更改的.

先看一下简单的例子:

var name = '小王',age=15,
  obj={
    name:'小张',
    age:18,
    say:function (){
      return '姓名'+this.name+'年龄'+this.age
    }
  }
  console.log(name,obj.name,obj.say())

以上代码可能就比较好理解,运用谁调用指向谁的原理:

首先say这个函数是谁调用的     obj

那么obj里面是否有name和age属性   有

然后就返回了    小王,小张,姓名小张年龄18

这个应该没有问题,那么问题来了,我如果想让say里面的this指向window,该怎么做呢?

你可能会说我们有bind,call,apply可以使用,但是还有一种方法,就是我们所说的谁调用指向谁,那我们能直接让window调用say吗?当然也是有方法实现的,代码如下

var name = '小王',age=15,
  obj={
    name:'小张',
    age:18,
    say:function (){
      return '姓名'+this.name+'年龄'+this.age
    }
  }
  let s = obj.say
  console.log(name,obj.name,s())

这个时候,我们等于把say函数重新赋值了,就相当于s和say是相同的代码,那么我们再去调用s(),是不是就变成了window调用,就达到了我们的目的.

结果:姓名小王年龄15

下面说一下call  apply  bind的区别.

通过上面的案列就能看出this是可以通过js进行改变的,js也提供了三种方法,一下为三种方法的用法:

var name = '小王',age=15,
  obj={
    name:'小张',
    age:18,
    say:function (){
      console.log('姓名:'+this.name+',年龄:'+this.age)
    }
  },
  change={
    name:'改变',
    age:24
  };
 obj.say.bind(change)() //姓名:改变,年龄:25
 obj.say.call(change)   //姓名:改变,年龄:25

obj.say.apply(change)   //姓名:改变,年龄:25

这样我们就把say函数里面的this指向改到了change上,

以上是他们调用方式的不同,我们可以看出来 使用call和apply的时候基本是一样的调用方式,但是在使用bind的时候我们后面多加了(),这是因为我们使用bing的时候,返回的是一个函数,并不会执行,所以当我们要执行的时候就需要在后面再加一个().

上面说了调用方式的不同,下面说参数的不用

 var name = '小王',age=15,
  obj={
    name:'小张',
    age:18,
    say:function (w,g){
      console.log('姓名:'+this.name+',年龄:'+this.age+',来自:'+w+',去往:'+g)
    }
  },
  change={
    name:'改变',
    age:24
  };

 obj.say.bind(change,'河南','北京')() //姓名:改变,年龄:24,来自:河南,去往:北京
 obj.say.call(change,'河南','北京') //姓名:改变,年龄:24,来自:河南,去往:北京
 obj.say.apply(change,['河南','北京'])  //姓名:改变,年龄:24,来自:河南,去往:北京

上面就是传参的方式,我们可以看出来  传参的时候,当使用bind和call的时候都是一样的,就是绑定对象后面,一个一个输入参数就行了,但是到apply的时候就变了,它接收的是一个数组,数组里面的参数会被解析成一个一个的参数,更加的方便,

当然它的参数并不仅限制于字符串哦,各种类型都是可以的哦,有兴趣的自己尝试一下!