脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js的this指向

JavaScript中的this关键词指向

 更新时间：2022年05月25日 08:23:34   作者：​ SilentLove   ​  
本文介绍了JavaScript中的this关键词指向，this是JavaScript的一个关键字，他是函数执行过程中，自动生成的一个内部对象，指当前的对象，只在当前函数内部使用，更多相关资料需要的小伙伴可以参考下面文章内容

1、es5中的this的指向

  • this是JavaScript的一个关键字，他是函数执行过程中，自动生成的一个内部对象，指当前的对象，只在当前函数内部使用。
  • 在es5中this的指向取决于函数运行时的环境。
  • 没有直接挂载者(或称调用者)的函数中this，非严格模式下指向window，在use strict严格模式下，默认为undefined。以下都是在非严格模式下讨论
var name = 'hello window!';
var obj = {
  name: 'hello obj!',
  fn: function() {
    console.log(this.name);
  }
};
var fn = obj.fn;
fn();     // hello window!
obj.fn(); // hello obj!

obj.fn()在执行时，fn中的this指向的是当前的调用对象obj。fn()执行时，this指向的是window对象。

var fn = obj.fn; // 等价于 window.fn = obj.fn;
fn();            // 等价于 window.fn();

匿名函数的执行环境是全局的

var name = 'hello window!';
var obj = {
  name: 'hello obj!',
  fn: function() {
    console.log(this.name); // 'hello obj!'
    return function() {
      console.log(this.name); // 'hello window!'
    };
  }
};
obj.fn()();

2、es6中的this

  • es6箭头函数的特点
  • 箭头函数没有自己的this
  • 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象，即外层代码的this引用。
  • 不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
  • 没有arguments对象。如果要用，可以用Rest参数代替。
  • 不可以使用yield命令，因此箭头函数不能用作Generator函数

示例说明，修改上述示例代码中的函数为箭头函数：

// 示例代码1
var name = 'hello window!';
var obj = {
  name: 'hello obj!',
  fn: () => {
    console.log(this.name);  // 这里的this指向的外层的this,即window对象，想当于上打印的是console.log(window.name);
  }
};
var fn = obj.fn;
fn();       // hello window!
obj.fn();   // hello window!

// 示例代码2
var name = 'hello window!';
var obj = {
  name: 'hello obj!',
  fn: function() {
    console.log(this.name);   // hello obj!
    return () => {
      console.log(this.name); // hello obj!  // this指向外层的this，即obj对象
    };
  }
};
obj.fn()();

总结：

  • es5中的this主要看运行的环境，指向的是调用它的对象。
  • 箭头函数中的this是在一开始就固定的，并不受调用对象

到此这篇关于JavaScript中的this关键词指向的文章就介绍到这了,更多相关js的this指向内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • TypeScript在Vuex4中使用TS实战分享

    TypeScript在Vuex4中使用TS实战分享

    这篇文章主要介绍了TypeScript在Vuex4中使用TS实战分享，vuex4类型 Api分析和vuex4实战两部分讲述，需要的小伙伴可以参考一下
    2022-06-06
  • 惰性函数定义模式 使用方法

    惰性函数定义模式 使用方法

    惰性函数定义模式 使用方法...
    2007-09-09
  • 二级域名或跨域共享Cookies的实现方法

    二级域名或跨域共享Cookies的实现方法

    适用于Asp。 在主域名设置的Cookie，在各子域名共用；适用于博客等提供二级域名。这个问题，以网上有众多帖子，可惜都没有完整解决。
    2008-08-08
  • 小议javascript 设计模式 推荐

    小议javascript 设计模式 推荐

    最近重新温习了一次《javascript设计模式》，确实是一本好书，每次看都有不同的领悟，每次领悟到的都受益匪浅，无怪古圣人都说学无止镜了，仅以“加油，好吗？”共勉！
    2009-10-10
  • 详解RequireJs官方使用教程

    详解RequireJs官方使用教程

    RequireJS以一个相对于baseUrl的地址来加载所有的代码。接下来通过本文给大家分享RequireJs官方使用教程，感兴趣的朋友一起看看吧
    2017-10-10
  • JS实现吸顶特效

    JS实现吸顶特效

    这篇文章主要为大家详细介绍了JS实现吸顶特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-01-01
  • webpack如何自动生成网站图标详解

    webpack如何自动生成网站图标详解

    这篇文章主要给大家介绍了关于webpack如何自动生成网站图标的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-01-01
  • 实现51Map地图接口(示例代码)

    实现51Map地图接口(示例代码)

    这篇文章主要介绍了实现51Map地图接口的示例代码。需要的朋友可以过来参考下，希望对大家有所帮助
    2013-11-11
  • 比较搞笑的js陷阱题

    比较搞笑的js陷阱题

    今天看到一段代码，比较有意思，本周就再多加一问。
    2010-02-02
  • JS中获取 DOM 元素的绝对位置实例详解

    JS中获取 DOM 元素的绝对位置实例详解

    这篇文章主要介绍了JS中获取 DOM 元素的绝对位置，详细介绍了各种获取dom元素绝对位置的方法及对应的兼容性，需要的朋友参考下吧
    2018-04-04

最新评论