Web前端基础知识：ES5及ES6this详解

Posted 2021-06-12 程序员的小傲娇

今天，我们学习一下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’);

希望以上的分享能帮到大家。本文来自千锋教育，转载请注明出处。