资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/解析js中的this对象

解析js中的this对象

firim / 2733人阅读

摘要：指定为原始值数字，字符串，布尔值会指向该原始值的自动包装对象这一点感谢评论区的读者补充。

前言

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

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

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

具体的来说，通常有以下几种情况：

全局函数

在全局环境中，this指向Window

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

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

对象方法

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

//例子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之类的原因了。

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

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

GPU云服务器 云服务器 js中的this js中的this机制 js中的this与html js中的对象

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90657.html

相关文章

  • JS高级入门教程

    摘要：解析首先简称是由欧洲计算机制造商协会制定的标准化脚本程序设计语言。级在年月份成为的提议，由核心与两个模块组成。通过引入统一方式载入和保存文档和文档验证方法对进行进一步扩展。其中表示的标记位正好是低三位都是。但提案被拒绝了。 JS高级入门教程 目录 本文章定位及介绍 JavaScript与ECMAScript的关系 DOM的本质及DOM级介绍 JS代码特性 基本类型与引用类型 JS的垃...

    zsy888 评论0 收藏0

  • 浅谈细说 JS 函数(call,apply,重载)

    摘要：什么是函数引用的原话函数是一组可以随时随地运行的语句。函数是由这样的方式进行声明的关键字函数名一组参数，以及置于括号中的待执行代码。 什么是函数？ 引用 W3School 的原话: 函数是一组可以随时随地运行的语句。 函数是 ECMAScript 的核心。 函数是由这样的方式进行声明的：关键字 function、函数名、一组参数，以及置于括号中的待执行代码。 函数的基本语法是这样的：...

    U2FsdGVkX1x 评论0 收藏0

  • ECMA_作用域深入&This关键字

    摘要：预解析声明告知浏览器在全局作用域中有一个变量名为的变量。执行代码的就是栈内存，作用域也是栈内存。关键字在中主要研究都是函数中的中的代表的是当前行为执行的主体方法，函数，事件中的上下文代表的是当前行为执行的环境区域例如小明在沙县小吃吃蛋炒饭。 基本认识 数据类型 基本数据类型 string, number, null, boolean, undefined 引用数据类型 object: ...

    Harriet666 评论0 收藏0

  • FE.SRC-webpack原理梳理

    摘要：执行完成后会返回如下图的结果，根据返回数据把源码和存储在的属性上的回调函数中调用类生成，并根据生成依赖后回调方法返回类。 webpack设计模式 一切资源皆Module Module(模块)是webpack的中的关键实体。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块. 通过Loaders(模块转换器)，用于把模块原内容按照需求转换成新模块内容. 事件驱动架构 we...

    cfanr 评论0 收藏0

  • js中的Java式继承

    摘要：中有三种不同的对象，三种对象的属性和行为和下方的类似构造函数对象构造函数为的类定义名称，任何添加到这个构造函数对象中的属性都是类字段和类方法。 JavaScript中的Java式继承 区别 Java类似的强类型面向对象语言，类为 实例字段 他们是基于实例的属性或变量，用以保存独立对象的状态 实例方法 他们是类的所有实例所共享的方法，由每个独立的实例调用 类字段 这些属性或者变量是属于类...

    SillyMonkey 评论0 收藏0

  • 全面解析JS中的this

    摘要：当我们不想再对象内部间接包含引用函数，而像在某个对象上强制调用函数。我们可以用中内置的和的方法来实现，这两个方法的第一个参数是一个对象，是给准备的，接着再调用函数时将其绑定到。 this是什么 在javascript中，每个执行上下文可以抽象成一组对象showImg(https://segmentfault.com/img/bVuKR7); 而this是与执行上下文相关的特殊对象，任何...

    calx 评论0 收藏0

发表评论

登陆后可评论

0条评论

firim

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<