全局向对象添加属性/方法

Adding properties/methods to an object globally?

本文关键字：方法 属性 添加 对象 全局      更新时间：2023-09-26

我一直在分析一些javscript源代码，发现一个对象的声明与正常过程略有不同，然后如何在程序中使用它。它是这样宣布的

window.ext = {};

并且它的属性是在像这样的常见过程中添加的 

ext.webRequest = {
    Property1/function2 : Property
    Property2/function2: function()
   }

我的怀疑是

  • 省略window.ext.webrequest并简单地调用ext.webrequest是正常的吗？
    • 声明
  • 这样的对象有什么隐藏的原因/优势吗？

全局变量存储在全局对象中（这是根据 ECMA 脚本规范调用它的方式）。

在大多数 Web 浏览器中，它们调用全局对象window，无需指定其名称即可访问。

所以最终：

window.ext = {}; 和 ext = {}; 是等效的（当且仅当您在同一全局范围内而不是在嵌套作用域（即函数或对象作用域）中调用它们时）。

声明

这样的对象有什么隐藏的原因/优势吗？

优点/原因是声明这样的对象使它们可以在所有级别访问，因为它们将在全局范围内声明。

省略 window.ext.webrequest 并简单地调用是否正常 ext.webrequest？

不，有差异。

窗口是全局对象，也是主机对象。如果您没有为像obj.ext.webrequest这样的属性提供窗口上下文（或全局），则JS引擎将

  • 首先在本地上下文中查找此对象，然后查找父对象，直到全局上下文。上下文是在函数级别而不是在块级别定义的。

  • 如果上下文在本地可用，它将使用该值，而不是 window.ext.webrequest 值。

声明

这样的对象有什么隐藏的原因/优势吗？

我观察到的一个优点是，当您想从 onclick 属性调用方法时，例如

<div onclick="method1()">Click here</div>

这将在全局上下文中自动查找此方法。

但是通常我们要等待 dom 被加载（就像在 JS 小提琴中它是默认设置），在这种情况下，您的方法定义被包装在事件处理程序函数document.onload例如

document.onload = function(){
   var method1 = function ()
   { 
     //some action here
   }
};

现在，此method1函数在全局上下文中不可见，因此 onclick 事件将无法找到此方法。

但是，如果您将此方法分配给这样的全局上下文

document.onload = function(){
   window.method1 = function ()
   { 
     //some action here
   }
};

现在，它将可用于onclick活动。

相关文章：