共计 2098 个字符，预计需要花费 6 分钟才能阅读完成。
明天，咱们学习一下 JavaScript 中的 this。咱们从什么是 this,ES5 及 ES6 中 this 的几种状况进行学习。让 this 变的 so easy，咱们这里说的都是非严格模式下。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 和 www.sangpi.combind 同理只是传递参数和应用形式略有不同
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.>
console.log(this); //this-> 这个类的实例
}
click() {
// 办法里的 this 指向调用者
console.log(this); //this->btn 这个元素
}
}
var btn = new Btn(‘input’);
心愿以上的分享能帮到大家！