解析js中的this对象

时间 2019-11-07 标签解析对象

前言

（几天以前写了源码分析以后，感受太疲惫了，写一些相对轻巧的内容调剂一下，但愿喜欢的同窗能够点个赞和收藏~）
进入正题，this对象在js中是很常见，可是在这里也常常会出错，本文将对常见的this对象的状况作一些总结es6

正文

this对象是在函数运行时，基于函数的执行环境绑定的。

其实这句话的本质就是，谁调用了函数，this就指向谁app

具体的来讲，一般有如下几种状况：函数

全局函数

在全局环境中，this指向Window源码分析

//例子1
  function A() {
    console.log(this)
  }
  A();//Window

上面的例子很简单，函数A在全局环境中执行，也就是全局对象Window调用了函数。此时this指向Windowthis

对象方法

做为对象方法调用时，this指向调用该方法的对象code

//例子2
var  b = {
    getThis:function(){
        console.log(this)
    }
}
b.getThis()//b

到这里咱们举的例子都比较简单易懂，接下来来一个有意思的：对象

//例子3
  var c = {
    getFunc:function(){
      return function(){
        console.log(this)
      }
    }
  }
  var cFun = c.getFunc()
  cFun()//Window

这个例子和前一个例子不同，运行c.getFunc()时，首先返回的是一个匿名函数，咱们将这个函数赋值给cFun，接着在全局环境中调用了cFun()，因此此时this指向的仍是Window。内存

若是咱们必定要让这里返回的是c对象呢？在开头咱们说过，this对象是在函数执行时肯定的，在例子3中，执行c.getFunc()时，this对象指向的仍是c，因此咱们只要保持住这个this就行了,对上面的代码稍微改动：字符串

//例子4
  var c = {
    getFunc:function(){
        var that = this //在这里保留住this
      return function(){
        console.log(that)
      }
    }
  }
  var cFun = c.getFunc()
  cFun()//c

这也就是咱们常常能够在一些代码中看到var self = this或者var that = this之类的缘由了。get

call和apply

此时this对象一般指向函数中指定的this值(注意这里的一般2字，考试要考的)

call和apply算是老生常谈，但仍是稍微介绍下，怕新同窗可能没接触过（实际上是为了凑点字数），拿call来讲，语法是这样的

fun.call(thisArg, arg1, arg2, ...)

这个方法怎么用呢，看下面的例子：

//例子5
var d = {
    getThis:function(){
        console.log(this)
    }
}
var e = {
   name:'e'//(给e写个`name`属性只是由于以为孤零零的太难看了~~)
}
d.getThis.call(e)//e

在这里咱们就能够看出call函数的意思了:指定一个对象o1去调用其余对象o2的方法，此时this对象指向o1

好了，那为何前面咱们说一般呢？由于，有2种例外的状况:

thisArg指定为null和undefined时，this指向window。
thisArg指定为原始值(数字，字符串，布尔值),this会指向该原始值的自动包装对象（这一点感谢评论区的读者补充）。请看：

//例子6
var d = {
    getThis:function(){
        console.log(this)
    }
}
  d.getThis.call(null)//Window
  d.getThis.call(undefined)//Window
  d.getThis.call(1) //Number
  d.getThis.call("hello") //String
  d.getThis.call(true) //Boolean

番外：基本包装类型

既然讲到包装类型，那这里顺便补充介绍一下基本包装类型：基本包装类型（包括Boolean,String,Number）是一类特殊的引用类型，它们具备引用类型的基本特征，还具备对应的基本类型的特殊行为，举个例子：

//基本包装类型
var str = "hello World";
var str2 = s1.substring(2);

首先，str是字符串，字符串是基本数据类型，可是在第二行代码中，str.substring(2)调用了str的方法，咱们知道，基本数据类型不是对象，原本是是不该该有方法的，可是实际上咱们知道string，number类型都有对应的方法，由于从内存中访问str时，访问进入了一种读取模式，在后台自动作了如下转换：

建立一个String类型的实例
在实例上调用相应方法
销毁该实例

特色：自动建立的基本包装类型的对象只存在于执行代码的瞬间，而后当即销毁。
那么能够手动建立基本包装类型吗？固然能够：

var  str = new String("Hello")//注意这里是new一个实例，而不是用String类型转换函数
typeof(str)//object
var str2 = String(222)//若是使用类型转换函数获得的仍是类型
ypeof(str2)//string

此时的str就是一个显式建立的基本包装类型对象，只是通常来讲不多这样去使用

箭头函数

es6中的箭头函数如今也用的比较频繁，可是有个须要注意的点是：

函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

其实出现这种状况的根本缘由是:箭头函数没有this对象，因此箭头函数的this就是外层代码的this

//例子7
  var f = {
      getThis:()=>{
          console.log(this)
      }
  }
  f.getThis()//Window

这个例子和前面例子2是基本同样的，只是把普通函数改写成箭头函数，可是此时的this对象已经指向了外层的Window。

考虑到这一点可能很差理解，咱们再看几个例子:

//例子8
  var g = {
    getThis:function(){
      return function(){console.log(this)}
    }
  }
  var h = {
    getThis:function(){
      return ()=> console.log(this)
    }
  }
  g.getThis()()//Window
  h.getThis()()//h

这个例子里，g的getThis写法就和以前的例子3同样，因为函数在全局环境中运行，因此此时this指向Window；h的getThis使用了箭头函数，因此this指向了外层代码块的this因此，此时this指向的是h。

总结

小结一下，

通常状况下this对象指向调用函数的对象，全局环境中执行函数this对象指向Window
在call和apply函数中this指向指定的对象，若是指定的对为undefined或者null，那么this对象指向Window
在箭头函数中，this对象等同于外层代码块的this

而后依然是每次都同样的结尾，若是内容有错误的地方欢迎指出；若是对你有帮助，欢迎点赞和收藏，转载请征得赞成后著明出处，若是有问题也欢迎私信交流，主页添加了邮箱地址~溜了