web前端

今天，我们学习一下JavaScript中的this。我们从什么是this,ES5及ES6中this的几种情况进行学习。让this变的so easy，我们这里说的都是非严格模式下。

什么是this

this表示当前行为执行的主体，在javaScript中this不是函数独有的，但是我们主要研究的是函数中的this,为了方便大家理解我们举个例子。

小明今天项目成功上线了，提前下班，不用加班了，奖励自己去肯德基吃一个汉堡，对于这句话我们简单的分析下：

在哪里吃：肯德基

谁吃：小明

在这里肯德基是吃的环境，小明是当前吃这个行为的主体。

ES5中this的几种情况

1.全局作用域下的this是window

前边的我们说过this代表当前行为执行的主体,在全局作用域下所有的属性和方法都是window的属性和方法，并且window是可以省略的。那么也就是说我们去调用一个方法在全局作用域下，谁调用的也就是window调用，那么window就是当前行为执行的主体,和去肯德基吃汉堡是一样的谁吃小明，那么小明就是当前行为执行的主体。

1. //全局作用域下
2. Var myBody = document.body;
3. //window是可以省略的 当前body元素的宽度都会被输出
4. console.log(window.getComputedStyle(myBody).width;);//726px
5. console.log(getComputedStyle(myBody).width;);//726px
6. //我们在这里输出this ->window
7. console.log(this);//window

2.自执行函数中的this是window

在javaScript中我们主要研究的是函数中的this,自执行函数中的this永远是window，因为函数就是一个方法，一种行为，这个行为是直接执行的，那么执行的主体就是window。

1. //这里我们写两个自执行函数
2. ~function(){
3. console.log(this); //->window
4. }();
6. (function (){
7. console.log(this);//->window
8. })();

3.当前函数执行就看前面有没有点(.),点前面是谁this就是谁，和当前函数在哪里定义的及在哪里执行的没有关系,没有点就是window.

还是一样的道理，.前面就表示当前行为执行的主体。如果没有依然当前行为执行的主体是window.

1. //定义一个函数
2. function hello(){
3. console.log(this);
4. }
5. hello();//this->window
6. //定义一个对象设置属性为hello值是对应的那个函数
7. Var obj = {hello:hello};
8. //我们再去调用的时候 发现是obj这个对象调用的这个函数 那么obj就是当前行为执行的主体 和这个函数在哪里定义是没有关系的。
9. Obj.hello(); //this->obj

4.call,apply,bind改变this指向问题就看方法中的第一个参数是谁this就是谁。

首先call,apply,bind这三个方法都是用来改变this的指向，其实本质就是改变当前行为执行的主体。由于这个三个方法第一个参数传递都是当前行为执行的主体。所以就看第一个参数即可。

1. //定义一个函数
2. function world(){
3. console.log(this);
4. }
5. //定义一个对象
6. Var obj = {name:”哈哈”};
7. //将obj变为这个方法行为执行的主体
8. World.call(obj);//this->obj
9. //apply和bind同理只是传递参数和使用方式略有不同

ES6中this的几种情况

1.箭头函数是没有自己this的，this是继承它的宿主环境(上级作用域) 宿主环境不是执行的环境，而是定义的环境。

1. let fn = () => {
2. console.log(this);
3. }
5. fn();//this->window
6. let obj = {
7. name: "obj",
8. sum: function () {
9. fn(); //在widnow下定义的，所以它的宿主环境是widnow而不是sum
10. }
11. };

2. ES6类构造器中的this是当前这个实例，而原型上的函数中的this指向调用者。

1. //类中的this
2. class Btn {
3. constructor(tagName) {
4. this.btn = document.querySelector(id);
5. thisthis.btn.onclick = this.click;
6. console.log(this); //this->这个类的实例
7. }
8. click() {
9. // 方法里的this指向调用者
10. console.log(this); //this->btn这个元素
11. }
12. }
13. var btn = new Btn('input');