一次按摸经历搞懂了js的this指向

目录

1、普通函数的this指向。

2、构造函数的this指向。

3、强势转换this指向。

---

作为一个写代码的，经常坐在办公室，时间久了就容易脖子酸痛，我们都喜欢去按摸店找小红做一下服务，我就以按摸来写一篇js的this指向问题。

假如你常去的怡红院的高级技师叫小红，而你老婆的名字也叫小红，那我们找小红按摩的时候必须找对小红，毕竟这是性命攸关的事。所以this就是帮我们找对指向的办法。

1、普通函数的this指向。

例子1：  调用对象是window对象，window是js的全局对象。

    var xiaoHong = "你tm敢让老娘帮你按摩？活腻了"; 
    function anMo() {
      var xiaoHong = "大爷，小红帮您按摩吧！"; 
      console.log(this.xiaoHong);
    }
    anMo();    //  你tm敢让老娘帮你按摩？活腻了

本来想让小红帮忙按摸一下，于是执行了anMo方法，但此时是在家里（window），anMo()相当于window.anMo（）。那怎么样才能让怡红院里温柔可爱的小红为我们服务呢？我们需要改一下调用对象（怡红院）。

    var xiaoHong = "你tm敢让老娘帮你按摩？活腻了";
    var yiHongYuan = {
      xiaoHong: "大爷，小红帮您按摩吧！",
      anMo() {
        console.log(this.xiaoHong);
      },
    };
    yiHongYuan.anMo();   //  大爷，小红帮您按摩吧！

我们找到了yiHongYuan这个对象，通过yiHongYuan调用anMo（），this就是指向怡红院的小红了，成功躲过老婆小红的追杀。

本次按摩结束了，但是舍不得温柔可爱的小红，于是向怡红院购买了服务，我们想把yiHongYuan.anMo带回家享受，可以吗？毕竟调用对象是yiHongYuan嘛。

    var xiaoHong = "你tm敢让老娘帮你按摩？活腻了";
    var yiHongYuan = {
      xiaoHong: "大爷，小红帮您按摩吧！",
      anMo() {
        console.log(this.xiaoHong);
      },
    };
    var jiaLi = yiHongYuan.anMo;    //  也就是这一句
    jiaLi();    // 你tm敢让老娘帮你按摩？活腻了

但是事实很残酷，jiaLi()的输出结果还是老婆小红？为什么呢？我已经让yiHongYuan调用anMo了。原因是yiHongYuan.anMo是赋值给jiaLi的，但是调用jiaLi的还是window，所以this指向window，当然找到的就是家里的小红了。。。。。所以同志们千万别把按摩带回家！

2、构造函数的this指向。

爱情是会淡的，你不再喜欢怡红院的小红，你决定换一个人为你服务。这个选择的过程就是一个this指向的问题。

    function selectGirl(girl) {
      this.girlName = girl;
    }
    var girl = new selectGirl("翠翠");
    console.log(girl.girlName);     // 翠翠

之所以girl能找到selectGirl中的this.girlName，是因为new关键字能把this指向new出来的对象girl，我们就能随便指定一个小姐姐帮我们按摸。比如：

    function selectGirl(girl) {
      this.girlName = girl;
    }
    var girl = new selectGirl("翠翠");
    console.log(girl.girlName);     // 翠翠
    var girl = new selectGirl("小花儿");
    console.log(girl.girlName);     // 小花儿

但是有一种特殊情况，我们选择了翠翠，但是翠翠的亲戚小姨妈来看她了，于是她给我返回了一个空对象，我就找不到她了。

    function selectGirl(girl) {
      this.girlName = girl;
      return {};    
      // 返回空对象 、 或者()=>{},return具体的对象不出现undefined的情况，例如1,undefined,null
    }
    var girl = new selectGirl("翠翠");
    console.log(girl.girlName); // undefined

3、强势转换this指向。

爱情这种事不能强人所难，于是我找到了小花儿的信息，打电话给小花。

    xiaoHua = {
      girlName: "小花儿",
    };
    function selectGirl() {
      console.log(this.girlName);
    }
    selectGirl.call(xiaoHua);      // 小花儿

call()可以切换函数执行的上下文环境，即改变this的指向，除call外，还有apply。

一场愉快的按摸服务就这样愉快的结束了。

参考链接：

彻底理解js中this的指向，不必硬背。

JavaScript的this关键字 - Web前端工程师面试题讲解