如何治疗JavaScript中的this？

观感度：🌟🌟🌟🌟🌟

口味：清爽绿豆

烹饪时间：15min

你皮任你皮，我当你瓜皮。

众所周知，this在JavaScript中的指向一直很难让人理解，想要学好JavaScript，this也是咱们必需要搞清楚的。其实，this并无那么难，本文将力争带你治疗this的“皮”。

首先，来科普三个问题！

this是什么？

this是声明函数时附加的参数，指向特定的对象，也就是隐藏参数。

好比LOL中各类隐藏的彩蛋，当水晶先锋斯卡纳在草丛里停留超过15秒不动，会模仿宠物小精灵。

“皮卡！皮卡！皮卡丘！”

“斯卡！斯卡！斯卡纳！”

好，相信你们已经理解什么是this了，就是个隐藏参数，没有多么的神奇，其实 每一个函数均可以访问this。

为何要使用this？

this提供了一种更加优雅的方式来隐式的传递对象引用。

通俗地说：就是说咱们能够把API设计的更加简洁并且易于复用。

说人话：那就是this能够帮咱们省略参数。

this的指向

只须要理解并记住一句话，外加几种小状况，你们就能够完彻底全的理解this。

好，注意听讲。

这句话就是“this的指向在函数声明的时候是不会被肯定的，只有函数执行的时候才被肯定，this最终指向的是调用它的对象”。

有人说这也太长了，记不住。

好，那缩短点。

一句话。

“this的指向决定于函数的调用方式”。

总结：

1. this是声明函数时附加的参数，指向特定的对象，也就是隐藏参数。

2.this能够帮咱们省略参数。

3.this的指向决定于函数的调用方式。

是否是很简单，搞清楚了这三点，咱们下面将从八种状况来完全理解this的指向问题。

直接上代码。

1、直到世界尽头

对，没错，有没有想起灌篮高手主题曲

咱们首先要了解一下世界观，分为三种状况。

1.在非严格模式下，浏览器中的尽头固然就是 window。

2.在严格模式下也就是开启了"use strict"的状况下，尽头就是undefined。

3.node的全局环境中尽头是global。

下文中状况主要从第一种非严格模式下来对this的指向进行解释和说明。

// 咱们来看下面的两个🌰。

function demo(){
  var user = “前端食堂”;
  console.log(this.user);   // undefined
  console.log(this);       // window
}

demo();

// 这里的函数demo其实是被window对象使用点语法所点出来的，以下：

function demo(){
    var user = “前端食堂”;
    console.log(this.user);    // undefined
    console.log(this);        // window
}

window.demo();

// 能够发现和上面的代码结果同样

2、画龙点睛

var obj = {
  user:”前端食堂”,
  fn:function(){
     console.log(this.user);   // 前端食堂
  }
}

obj.fn();

// 这里的this指向对象obj
// 注意看最后一行调用函数的代码
// obj.fn();

// 重要的事情说两遍！！
// this的指向在函数建立时是决定不了的
// 在调用的时候才能够决定，谁调用就指向谁

// this的指向在函数建立时是决定不了的
// 在调用的时候才能够决定，谁调用就指向谁

3、点石成金

// 其实以上两点说的还不够准确，咱们接着往下看

var obj = {
  user:”前端食堂”,
  fn:function(){
     console.log(this.user); // 前端食堂
  }
}
window.obj.fn(); 

// 这段代码跟上面的代码几乎是同样的
// 可是这里为何没有指向window呢？
// 按你上面说的不是window调用的方法吗？
// 你们先停下来打个debugger思考一下为何
// 想不明白不要紧咱们带着疑问来看下段代码

var obj = {
    a:1,
    b:{
        a:2,
        fn:function(){
            console.log(this.a); // 2
        }
    }
}

obj.b.fn();

// 这里执行的时候一样是对象obj经过点语法进行的执行
// 可是this一样没有指向window，这是为何呢？

// 好，咱们有几种状况须要记住：

// 1.若是一个函数中有this
// 可是它没有被上一级的对象所调用
// 那么this就会指向window（非严格模式下）

// 2.若是一个函数中有this
// 这个函数又被上一级的对象所调用
// 那么this就会指向上一级的对象

// 3.若是一个函数中有this
// 这个函数中包含多个对象
// 尽管这个函数是被最外层的对象所调用
// this却会指向它的上一级对象

var obj = {
  a:1;
  b:{
    // a:2,
    fn:function(){
       console.log(this.a);   // undefined
    }
  }
}
obj.b.fn();

// 咱们能够看到，对象b中没有属性a，这个this指向
// 的也是对象b，由于this只会指向它的上一级对象
// 无论这个对象中有没有this要的东西

// 咱们再来看一种状况

var obj = {
    a:1,
    b:{
        a:2,
        fn:function(){
            console.log(this.a);  // undefined
            console.log(this);   // window
        }
    }
}
var demo = obj.b.fn;
demo();

// 在上面的代码中，this指向的是window
// 大家可能会以为很奇怪
// 实际上是这样的，有一句话很关键，再次敲黑板

// this永远指向的都是最后调用它的对象
// 也就是看它执行的时候是谁调用的

// 上面的例子中虽然函数fn是被对象b所引用了
// 可是在将fn赋值给变量demo的时候并无执行
// 因此最终this指向的是window

4、两小无猜

function returnThis(){
  return this;
}
var user = {name:"前端食堂"};

returnThis();            // window
returnThis.call(user);   // 前端食堂
returnThis.apply(user) ; // 前端食堂

// 这里就是Object.prototype.call
// 和Object.prototype.apply方法
// 他们能够经过参数来指定this

5、矢志不渝

function returnThis(){
  return this;
}

var user1 = {name:"前端食堂"};
var user1returnThis = returnThis.bind(user1);
user1returnThis();             // 前端食堂
var user2 = {name:"前端小食堂"};
user1returnThis.call(user2);   // still 前端食堂

// Object.prototype.bind经过一个新函数来提供了永久的绑定
// 并且会覆盖call和apply的指向

6、乾坤大挪移

function Fn(){
  this.user = "前端食堂";
}
var demo = new Fn();
console.log(demo.user);  // 前端食堂

// 这里new关键字改变了this的指向
// new关键字建立了一个对象实例
// 因此能够经过对象demo点语法点出函数Fn里面的user
// 这个this指向对象demo

// 注意：这里new会覆盖bind的绑定
function demo(){
  console.log(this);
}

demo();             // window
new demo();         // demo
var user1 = {name:"前端食堂"};
demo.call(user1);   // 前端食堂

var user2 = demo.bind(user1);
user2();            // 前端食堂
new user2();        // demo

7、爱转角赶上return

// 当this赶上return时
function fn(){
  this.user = "前端食堂";
  return{};
}
var a = new fn;
console.log(a.user);  // undefined

function fn(){
  this.user = "前端食堂";
  return function(){};
}
var a = new fn;
console.log(a.user);  // undefined

function fn(){
  this.user = "前端食堂";
  return 1;
}
var a = new fn;
console.log(a.user); // 前端食堂

function fn(){
  this.user = "前端食堂";
  return undefined;
}
var a = new fn;
console.log(a.user); // 前端食堂

// 总结：若是返回值是一个对象
// 那么this指向就是返回的对象
// 若是返回值不是一个对象
// 那么this仍是指向函数的实例

// null比较特殊，虽然它是对象
// 可是这里this仍是指向那个函数的实例

function fn(){
  this.user = "前端食堂";
  return null;
}
var a = new fn;
console.log(a.user); // 前端食堂

8、英雄登场

// 最后咱们介绍一种在ES6中的箭头函数
// 这个箭头函数中的this被加里奥的英雄登场锤的不行
// 皮不起来了
// 并且，在代码运行前就已经被肯定了下来
// 谁也不能把它覆盖

// 这样是为了方便让回调函数中this使用当前的做用域
// 让this指针更加的清晰
// 因此对于箭头函数中的this指向
// 咱们只要看它建立的位置便可

function callback(qdx){
  qdx();
}
callback(()=>{console.log(this)});        // window

var user = {
    name:"前端食堂",
    callback:callback,
    callback1(){
      callback(()=>{console.log(this)});
    }
}
user.callback(()=>{console.log(this)});  // still window
user.callback1(()=>{console.log(this)}); // user

怎么样？this其实不过如此吧。再皮也要治住他~

交流

欢迎来个人我的公众号交流，优质原创文章将同步推送。后台回复福利，便可领取福利，你懂得~

你的前端食堂，记得按时吃饭。