热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

深入解析JavaScript中this关键字的使用方法与技巧

本文深入探讨了JavaScript中`this`关键字的多种使用方法和技巧。首先,分析了`this`作为全局变量时的行为;接着,讨论了其在对象方法调用中的表现;然后,介绍了`this`在构造函数中的作用;最后,详细解释了通过`apply`等方法改变`this`指向的机制。文章旨在帮助开发者更好地理解和应用`this`关键字,提高代码的灵活性和可维护性。

目次

1、 this作为全局变量
2、 作为对象要领的挪用
3、 作为组织函数挪用
4、 apply挪用

this是Javascript言语的一个关键字。它代表函数运转时,自动天生的一个内部对象,只能在函数内部运用.跟着函数运用场所的差别,this的值会发生变化。然则有一个总的准绳,那就是this指的是,挪用函数的谁人对象。

1、 this作为全局变量

var name = "The Window";
var object = {
    name : "My Object",
    getNameFunc : function(){
      return function(){
        return this.name;
      };
    }
};
console.log(object.getNameFunc()()); //The Window

2、 作为对象要领的挪用

函数还能够作为某个对象的要领挪用,这时候this就指这个上级对象。

function test2(){
console.log("x的值",this.x);
  }
  var o = {};
  o.x = 1;
  o.m = test2;
  o.m(); // 1

当要领在某个对象的内部时,此时this就指的是此要领的上级对象,由此可知最外层要领的上级对象是window全局对象

3、 作为组织函数挪用

所谓组织函数,就是经由过程这个函数天生一个新对象(object)。这时候,this就指这个新对象。

function test3(){
    this.x = 1;
  }
  var o = new test3();
  console.log("x的值",o.x);// 1

4、 apply挪用

apply()是函数对象的一个要领,它的作用是转变函数的挪用对象,它的第一个参数就示意转变后的挪用这个函数的对象。因而,this指的就是这第一个参数。

var x = 0;
  function test4(){
    alert(this.x);
  }
  var o={};
  o.x = 1;
  o.m = test4;
  o.m.apply(); //0

apply()的参数为空时,默许挪用全局对象。因而,这时候的运转效果为0,证实this指的是全局对象。
假如把末了一行代码修改成o.m.apply(o); //1
运转效果就变成了1,证实了这时候this代表的是对象o。

注:在一般的函数挪用中,this是由激活高低文代码的挪用者来供应的,即挪用函数的父高低文(parent context )。this取决于挪用函数的体式格局。

为了在任何情况下准确无误的肯定this值,有必要明白和记着这主要的一点。恰是挪用函数的体式格局影响了挪用的高低文中的this值,没有别的什么(我们能够在一些文章,以至是在关于Javascript的书本中看到,它们宣称:“this值取决于函数怎样定义,假如它是全局函数,this设置为全局对象,假如函数是一个对象的要领,this将老是指向这个对象。–这相对不正确”)。继承我们的话题,能够看到,即使是一般的全局函数也会被挪用体式格局的差别情势激活,这些差别的挪用体式格局致使了差别的this值。

function foo() {
alert(this);
}
foo(); // global
alert(foo === foo.prototype.constructor); // true
// 然则同一个function的差别的挪用表达式,this是差别的
foo.prototype.constructor(); // foo.prototype

有能够作为一些对象定义的要领来挪用函数,然则this将不会设置为这个对象。

var foo = {
bar: function () {
alert(this);
alert(this === foo);
}
};
foo.bar(); // foo, true
var exampleFunc = foo.bar;
alert(exampleFunc === foo.bar); // true
// 再一次,同一个function的差别的挪用表达式,this是差别的
exampleFunc(); // global, false

参考地点:
深切明白Javascript系列(13):This? Yes,this!
Javascript的this用法


推荐阅读
  • 在处理木偶评估函数时,我发现可以顺利传递本机对象(如字符串、列表和数字),但每当尝试将JSHandle或ElementHandle作为参数传递时,函数会拒绝接受这些对象。这可能是由于这些句柄对象的特殊性质导致的,建议在使用时进行适当的转换或封装,以确保函数能够正确处理。 ... [详细]
  • 本文总结了JavaScript的核心知识点和实用技巧,涵盖了变量声明、DOM操作、事件处理等重要方面。例如,通过`event.srcElement`获取触发事件的元素,并使用`alert`显示其HTML结构;利用`innerText`和`innerHTML`属性分别设置和获取文本内容及HTML内容。此外,还介绍了如何在表单中动态生成和操作``元素,以便更好地处理用户输入。这些技巧对于提升前端开发效率和代码质量具有重要意义。 ... [详细]
  • JavaScript XML操作实用工具类:XmlUtilsJS技巧与应用 ... [详细]
  • 本文深入剖析了jQuery的架构设计与实现原理。jQuery的总体结构采用了一个自执行匿名函数的形式,该函数接收`window`和`undefined`作为参数,并在内部定义了一个局部的jQuery副本,以确保其内部变量和方法不会污染全局命名空间。这种设计不仅提高了代码的封装性和安全性,还使得jQuery能够更好地与其他JavaScript库兼容。通过详细分析这一架构,读者可以更好地理解jQuery的核心机制及其高效运行的原理。 ... [详细]
  • 如何在页面底部添加倾斜样式效果? ... [详细]
  • 本文详细介绍了 jQuery 的入门知识与实战应用,首先讲解了如何引入 jQuery 库及入口函数的使用方法,为初学者提供了清晰的操作指南。此外,还深入探讨了 jQuery 在实际项目中的多种应用场景,包括 DOM 操作、事件处理和 AJAX 请求等,帮助读者全面掌握 jQuery 的核心功能与技巧。 ... [详细]
  • 在第二课中,我们将深入探讨Scala的面向对象编程核心概念及其在Spark源码中的应用。首先,通过详细的实战案例,全面解析Scala中的类和对象。作为一门纯面向对象的语言,Scala的类设计和对象使用是理解其面向对象特性的关键。此外,我们还将介绍如何通过阅读Spark源码来进一步巩固对这些概念的理解。这不仅有助于提升编程技能,还能为后续的高级应用开发打下坚实的基础。 ... [详细]
  • 本文全面解析了JavaScript中的DOM操作,并提供了详细的实践指南。DOM节点(Node)通常代表一个标签、文本或HTML属性,每个节点都具有一个nodeType属性,用于标识其类型。文章深入探讨了DOM节点的创建、查询、修改和删除等操作,结合实际案例,帮助读者更好地理解和掌握DOM编程技术。 ... [详细]
  • 第六章:枚举类型与switch结构的应用分析
    第六章深入探讨了枚举类型与 `switch` 结构在编程中的应用。枚举类型(`enum`)是一种将一组相关常量组织在一起的数据类型,广泛存在于多种编程语言中。例如,在 Cocoa 框架中,处理文本对齐时常用 `NSTextAlignment` 枚举来表示不同的对齐方式。通过结合 `switch` 结构,可以更清晰、高效地实现基于枚举值的逻辑分支,提高代码的可读性和维护性。 ... [详细]
  • 深入理解JavaScript原型链机制与应用
    本文深入探讨了JavaScript中的原型链机制及其应用,详细解析了普通函数与构造函数之间的区别。通过实例分析,阐述了如何利用原型链实现面向对象编程,并介绍了原型链在继承和属性查找中的关键作用。 ... [详细]
  • 本文探讨了利用JavaScript实现集合的对称差集算法的方法。该算法旨在处理多个数组作为输入参数,同时保留每个数组中元素的原始顺序。算法不会移除单个数组内的重复元素,但会删除在不同数组之间出现的重复项。通过这种方式,能够有效地计算出多个数组的对称差集。 ... [详细]
  • 在使用 jQuery 的 `html()` 方法时,我发现了一个奇怪的现象:该方法无法完整地插入指定的字符串内容。具体来说,当尝试插入较长或包含特殊字符的字符串时,部分内容可能会被截断或丢失。这一问题可能与 jQuery 对字符串的处理方式有关,建议在实际应用中进行充分测试以确保数据完整性。 ... [详细]
  • 本文探讨了资源访问的学习路径与方法,旨在帮助学习者更高效地获取和利用各类资源。通过分析不同资源的特点和应用场景,提出了多种实用的学习策略和技术手段,为学习者提供了系统的指导和建议。 ... [详细]
  • 本文探讨了如何通过检测浏览器类型来动态加载特定的npm包,从而优化前端性能。具体而言,仅在用户使用Edge浏览器时加载相关包,以提升页面加载速度和整体用户体验。此外,文章还介绍了实现这一目标的技术细节和最佳实践,包括使用User-Agent字符串进行浏览器识别、条件加载策略以及性能监控方法。 ... [详细]
  • 在Bugku Web CTF实战演练中,通过细致的源代码检查,我们发现了一个隐藏的滑稽笑脸图标,进一步分析后成功找到了flag。此外,还探讨了如何利用计算器功能进行安全测试,提升了对Web漏洞的识别和利用技巧。 ... [详细]
author-avatar
冰凌清泽_712
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有