【Web前端培训基础知识】ES5及ES6this详解

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

　　什么是this

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

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

　　在哪里吃：肯德基

　　谁吃：小明

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

　　//全局作用域下

　　Var myBody = document.body;

　　//window是可以省略的 当前body元素的宽度都会被输出

　　console.log(window.getComputedStyle(myBody).width;);//726px

　　console.log(getComputedStyle(myBody).width;);//726px

　　//我们在这里输出this ->window

　　console.log(this);//window

　　ES5中this的几种情况

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

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

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

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

　　//这里我们写两个自执行函数

　　~function(){

　　console.log(this); //->window

　　}();

　　(function (){

　　console.log(this);//->window

　　})();

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

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

　　//定义一个函数

　　function hello(){

　　console.log(this);

　　}

　　hello();//this->window

　　//定义一个对象设置属性为hello值是对应的那个函数

　　Var obj = {hello:hello};

　　//我们再去调用的时候 发现是obj这个对象调用的这个函数 那么obj就是当前行为执行的主体 和这个函数在哪里定义是没有关系的。

　　Obj.hello(); //this->obj

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

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

　　//定义一个函数

　　function world(){

　　console.log(this);

　　}

　　//定义一个对象

　　Var obj = {name:”哈哈”};

　　//将obj变为这个方法行为执行的主体

　　World.call(obj);//this->obj

　　//apply和bind同理只是传递参数和使用方式略有不同

　　ES6中this的几种情况

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

　　let fn = () => {

　　console.log(this);

　　}

　　fn();//this->window

　　let obj = {

　　name: "obj",

　　sum: function () {

　　fn(); //在widnow下定义的，所以它的宿主环境是widnow而不是sum

　　}

　　};

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

　　//类中的this

　　class Btn {

　　constructor(tagName) {

　　this.btn = document.querySelector(id);

　　thisthis.btn.onclick = this.click;

　　console.log(this); //this->这个类的实例

　　}

　　click() {

　　// 方法里的this指向调用者

　　console.log(this); //this->btn这个元素

　　}

　　}

　　var btn = new Btn('input');