this指向解析

this:包含他的函数作为方法被调用时所属的对象

情况一:如果一个函数中有this,但是它没有被上一级的对象调用,那么this指向的就是window,这里需要说明的是在js的严格版中this指向的不是window,而是undefined

function a(){

  var user = "追梦子";

  console.log(this.user); //undefined

  console.log(this); //Window

}

a(); //相当于window.a();

//this最终指向的是调用它的对象,这里的函数a实际是被Window对象所点出来的

情况二:如果一个函数中有this,这个函数有被上一级的对象所调用,那么this指向的就是上一级的对象

var o = {

  user:"追梦子",

  fn:function(){

    console.log(this.user); //追梦子

     console.log(this); //{user: "追梦子", fn: ƒ}

  }

}

o.fn(); //this执行时被它的上一级对象o{user: "追梦子", fn: ƒ}调用

情况三:如果一个函数中有this,这个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是他上一级的对象

var o = {

  a:10,

  b:{

    //a:12,

    fn:function(){

       console.log(this.a); //undefind 有两个对象b和o,所以此this.a指向它的上一级

    }

   },

  fn1:function(){

    console.log(this.a); //10

  }

}

o.fn1();

o.b.fn();

还有两种特殊情况:

第一种:当 this遇到return

function fn() {

  this.user='追梦子';

  return{};

}

var a=new fn();

console.log(a.user);//undefined

function fn() {

  this.user='追梦子';

  return function(){};

}

var a=new fn;

console.log(a.user);//undefined

unction fn() {

  this.user='追梦子';

  return 1;

}

var a=new fn;

console.log(a.user);//追梦子

unction fn() {

  this.user='追梦子';

  return null;

}

var a=new fn;

console.log(a.user);//追梦子

总结:如果返回值是一个对象,那么this指向的就是那个返回的对象,如果返回值不是一个对象那么this还是指向函数的实例

还有一点:虽然null也是对象,但是在这里this还是指向那个函数的实例,因为null比较特殊

二.改变this的指向

第一种:new关键字改变this指向

//构造函数版this

function Fn(){

  this.user = "追梦子";

}

var a = new Fn();

console.log(a.user); //追梦子

用变量a创建了一个Fn的实例(相当于复制了一份Fn到对象a里面),此时仅仅只是创建,并没有执行,而调用这个函数Fn的是对象a,那么this指向的自然是对象a,那么为什么对象a中会有user,因为你已经复制了一份Fn函数到对象a中,用了new关键字就等同于复制了一份

第二种:call()

var a = {

  user:"追梦子",

  fn:function(){

    console.log(this.user); //追梦子

  }

}

var b = a.fn;

b.call(a); //若不用call,则b()执行后this指的是Window对象

第三种:apply()

var a = {

  user:"追梦子",

   fn:function(){

     console.log(this.user); //追梦子

  }

}

var b = a.fn;

b.apply(a);

apply和call方法类似,都可以改变this指向,也可以有多个参数,但是不同的是,apply第二个参数必须是数组

第四种:bind() 
bind方法和call、apply方法有些不同,如下:

var a = {

  user:"追梦子",

  fn:function(){

    console.log(this.user);

  }

}

var b = a.fn;

b.bind(a); //代码没有被打印

我们发现代码没有被打印,对,这就是bind和call、apply方法的不同,实际上bind方法返回的是一个修改过后的函数。

var a = {

  user:"追梦子",

  fn:function(){

    console.log(this.user); //追梦子

  }

}

var b = a.fn;

var c = b.bind(a);

c();

同样bind也可以有多个参数,并且参数可以执行的时候再次添加,但是要注意的是,参数是按照形参的顺序进行的。

总结: call和apply都是改变上下文中的this并立即执行这个函数,bind方法可以让对应的函数想什么时候调就什么时候调用,并且可以将参数在执行的时候添加,这是它们的区别

原文地址:https://www.cnblogs.com/110162-wsx/p/9176173.html