js中this关键字探讨

1.this的作用

我们经常在构造函数中使用this为new出来的一个新对象绑定他们的属性，比如现在有个Person对象，该对象一般会有firstName、lastName、age、gender等属性，另外还有say、walk等行为，下面我将直接写代码实现一个Person对象。

function Person(){
  this.fname = ‘jixiang’;
  this.lname = ‘lu’;
  this.age = ‘22’;
  this.gender = ‘male’;
}

OK，现在有了一个Person的构造函数，可以new出来一个真实的Person对象：

var man = new Person();

有了man这个对象，就能访问它的属性了：

alert("I am " + man.fname + " " + man.lname + "," + man.age + "," + man.gender);

运行结果：

经过上面的规范步骤（创建构造函数----->new 一个对象----->访问属性），我们得到了想要的结果，但是，现在我不通过new一个对象而是直接使用Person对象（js中一切皆对象）去访问fname、lname等属性，看看会发生什么：

alert("I am " + Person.fname + " " + Person.lname + "," + Person.age + "," + Person.gender);

运行结果：

通过直接使用Person去访问fname、lname并未成功，"undefined"意为“未定义”，这说明Person对象并没有fname等属性，但是我们的确是在Person构造函数体内定义的fname等属性，自然而然的我们注意到了this关键字，因为自定义fname和lname时，都对它们使用了关键字this。Ok，现在必须先搞清楚this到底是个神马东西，直接上代码：

function Person(){
	
  this.fname = 'jixiang';
  this.lname = 'lu';
  this.age = '22';
  this.gender = 'male';
  
  alert("this是：" + this);
}	

Person();

运行结果：

通过直接运行Person函数，发现原来this是window对象，那就相当于我们把fname、lname等属性绑定到window对象上了，我们现在验证一下：

alert("I am " + window.fname + " " + window.lname + "," + window.age + "," + window.gender);

运行结果：

通过alert结果验证了我们的猜想，但是为什么呢？其实在直接运行Person()函数时，等同于window.Person()，定义的全局函数都会绑定到window这个global对象上，所以this指向了window，我们可以试试改变this：

function Person(){
	
  this.fname = 'jixiang';
  this.lname = 'lu';
  this.age = '22';
  this.gender = 'male';
  
  alert(this)
  
}	

function p(){
	
}
p.method = Person;
p.method();

运行结果：

定义P函数对象，将method属性赋值为Person，运行method方法，打印this，得到了p对象，所以改变了this的指向。

2.一个对象new的过程

本文中第一个例子演示了如何通过new一个构造函数生成一个对象，并且如何访问该对象，同样的我们在构造函数中也使用了this关键字，但是new出来的对象却可以进行访问，通过上面大篇幅的讲解，我们猜测应该是new的过程中改变了this的指向，但是它是怎么改变的呢？其实很简单：

在js中改变js方式有两种，一种是call方法，另一种是apply方法，new的过程可以分成两个步骤：

第一步：创建一个对象var man = {},

第二步：调用call方法或apply方法将Person的属性绑定到man对象上，即将this指向man，Person.call(man)；

至于第二步中到时是使用了call方法还是apply方法无法知道，而且可能并不是单纯调用了call或apply方法，因为涉及到prototype时new的情况就稍微复杂了（本文暂不涉及prototype），但是我们可以上面两步模拟this指向了man对象，表明了new的过程其实是也是改变this指向的过程，这样本文的目的也就达到了。

OK，接下来的一篇文章我将讲解prototype、this、new三者复杂的关系。

👉👉👉 自己搭建的租房网站：全网租房助手，m.kuairent.com，每天新增 500+房源