理解JavaScript中的this关键字

JavaScript中this关键字理解

在爬虫的过程中遇到了前端的js代码，对于this关键字理解的不是很清楚，所以写下这篇笔记，不足之处，希望得以改之。

this的指向在函数定义的时候无法确定，只有在函数执行的时候确定this的指向

这句话其实有部分干扰性，具体最后在进行总结this关键字的理解

demo01

function printName(){
  var userName = "追梦者";
  console.log(this.userName);  // undefined
  console.log(this);  // wimdow
}
printName();

说明：可以看到当调用func函数的时候，发现出现了undefined和window本身，可以这样说：这个printName的函数实际是被window对象所点出来的

function printName(){
  var userName = "追梦者";
  console.log(this.userName); // undefined
  console.log(this); // window
}
window.printName();

可以发现调用这个函数的本身就是我们的 window对象，所以这里的this关键字所指的就是window 。所以第一个则未被定义，第二个就是window本身。

userName = "梦想实现者";
function printName(){
  var userName = "追梦者";
  console.log(this.userName); // 梦想实现者
  console.log(this); // window
}
window.printName();

此时，this.userName调用的是window的属性值

demo02

var object = {
  userName:"追梦者",
  printName:function(){
    console.log(this.userName); // 追梦者
  }
};
object.printName();

这里的this关键字指向的对象是object, 调用是object进行调用的。

demo03

var object = {
  userName:"追梦者",
  printName:function(){
    console.log(this.userName); // 追梦者
  }
};
window.object.printName();

demo03和demo02中的案例是一样的，只是调用者不同，但是this指向的还是object对象。

说明：

window是JavaScript中的全局对象，我们创建的变量实际上是给window添加属性，所以这里可以用window.对象。

var object = {
  numA:10,
  funcB:{
  	numA:12,
  	printNum:function(){
      console.log(this.numA); // 12
    }
	}
}
object.funcB.printNum();

这里使用object对象进行调用的，那么为什么没有输出的值是 10？

补充:

1. 如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window

2. 如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。

3. 如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象

所以在来看上面的一个案例，就会发现 此时的this指向就是funcB

var object = {
  numA:10,
  funcB:{
  	printNum:function(){
      console.log(this.numA); // undefined
    }
	}
}
object.funcB.printNum();

为什么是undefined的？

在对象funcB中发现没有属性numA，这个this指向指的是对象funcB，所有出现了undefined。

demo04

var object = {
  numA:10,
  funcB:{
    numA:12,
  	printNum:function(){
      console.log(this.numA); // undefined
      console.log(this);// window
    }
	}
}
var o = object.funcB.printNum;
o();

是不是有蒙圈了？

注意： 调用者是一个变量，虽然函数printNum是被对象funcB所引用，但是在将printNum赋值给变量o的时候并没有执行所以最终指向的是window

可以进行分析：

// 控制台进行输出：
window.o;

ƒ (){
      console.log(this.numA); // 
      console.log(this);//
}

是不是发现这个 f 就是我们的 printNum 函数。

构造函数的this关键字

function Fn(){
	this.userName = "追梦者";
}
var User = new Fn;
console.log(User.userName);

此时的this关键字指向的就是 User。对象User可以点出函数Fn里面的userName是因为new关键字可以改变this的指向，将这个this指向对象User，为什么我说User是对象，因为用了new关键字就是创建一个对象实例。

this遇到return的时候

function Fn(){
  this.userName = "追梦者";
  return {};
}
var User = new Fn;
console.log(User.userName); // undefined

function Fn(){
  this.userName = "追梦者";
  return function(){};
}
var User = new Fn;
console.log(User.userName); // undefined

function Fn(){
  this.userName = "追梦者";
  return 1;
}
var User = new Fn;
console.log(User.userName); // 追梦者

说明：如果返回值是一个对象，那么this指向的就是那个返回的对象，如果返回值不是一个对象那么this还是指向函数的实例。

补充说明

1. 在严格版中的默认的this不再是window，而是undefined。

2. new操作符会改变函数this的指向问题，虽然我们上面讲解过了，但是并没有深入的讨论这个问题，网上也很少说，所以在这里有必要说一下。

function fn(){
  this.num = 1;
}
var a = new fn();
console.log(a.num); // 1

为什么this会指向a？

new关键字会创建一个空的对象，然后会自动调用一个函数apply方法，将this指向这个空对象，这样的话函数内部的this就会被这个空的对象替代。