JS中的this到底是什么

如果没有零碎理解过，可能JavaScript中的this始终是个迷。

可能你在Vue中见过有数这样相似const that = this;的表达式

const that = this;const obj = {message: "I'm obj.",printThis: function(){console.log(this);},printThat: function(){console.log(that);},};obj.printThis();obj.printThat();

这里为什么肯定要应用const that = this;呢能力拿到正确的this呢？

是这样的，对于函数（也就是个对象）中的this，指向的是调用该函数的对象的。

举个????

function printThis(){console.log(this);}const obj = {message: "I'm obj.",printThis: printThis}printThis(); // 等同于 this.printThis(); 都是在window这个上下文下调用 this指向的是调用函数的对象: windowobj.printThis(); // 这个printThis是在obj的上下文下调用 this指向的是调用函数的对象: obj

所以能够做个小总结: this总是指向调用本函数（对象）的对象。

而在在构造函数内的this是指向哪里的呢？指向的也是调用构造函数的对象吗？

构造函数会在对象被实例化的时候被调用，会调用call()这个办法来指向该对象，故this指向的是对象自身。具体细节可自行查阅new一个对象的时候做了些什么。

所以就能够回到开始的问题了，为什么要用const that = this;呢？

const that = this;const obj = {message: "I'm obj.",printThis: function(){console.log(this);},printThat: function(){console.log(that);},};obj.printThis();obj.printThat();

其实也就是为了将内部的this保留到that，而后在函数中调用内部的this。

一句话：this就是调用本函数（对象）的对象。

JS中如何优雅的应用this

综合上述，想必应该大略理解了this是什么了。应用const that = this;这种语句必定不优雅，那么在我的项目中如何优雅的来应用this呢？

箭头函数

首先能够通过箭头函数来间接应用this，因为箭头函数是不会绑定指针域的，也就是说箭头函数内的this和箭头函数外层的this是一样的。

console.log(this); // 1 这里指向windowconst obj = {message: "I'm obj.",printThis: function(){console.log(this);},printThisWithArrowFunction: () => { console.log(this); }}obj.printThis(); // 2 这里指向 objobj.printThisWithArrowFunction(); // 3 这里和1一样指向window

所以能够通过箭头函数来很欢快的解决this指向不同问题。

手动扭转函数的this

JS中函数提供了三个办法来手动设定this的指向:call()、apply()和bind()。

通过调用这三个办法来间接调用函数就能够间接指定this，那为什么就指定this须要三个办法呢？

| 办法 | 参数 | 返回值 | 阐明

| call() | this, param1, param2, ... | undefined | 传入this指向和参数即可调用

| apply() | this,[param1, param2, ...] | undefined | 传入this指向和数组形参数即可调用

| bind() | this, param1, param2, ... | Function | 传入this指向和参数返回对应指向的函数

很容易能够发现，三个函数的作用简直是一样的，然而用法上稍有不同，举个????：

function printThis(a, b){console.log(this, a, b);}const obj = {message: "I'm obj."}[printThis.call](http://printthis.call/)(obj, 1, 2);printThis.apply(obj, [1, 2]); // 数组模式printThis.bind(obj, 1, 2)(); // 留神返回的是函数，还须要调用下返回值

更多

想必到当初应该对如何正当应用this大略了解了吧？那么有什么用途呢？

这里拿大家都晓得的数组裁剪举个????:

const arr = [1, 2, 3];arr.slice(1); // 去除第一个 这里的slice外部的 this 就指向的是arr!console.log(arr); // [2, 3]// 那么如何利用这个个性来将非个别数组类型切割呢?const obj = {0: 1,1: 2,2: 3,length: 3 // 肯定要有length属性};// 间接调用 obj.slice(1); 是不能够的因为对象的prototype没有这个办法// 能够通过人为扭转slice的this指针来实现console.log([Array.prototype.slice.call](http://array.prototype.slice.call/)(obj)); // 应用call办法将this指向了obj即可