引用外部对象的 JavaScript 作用域

2024-02-29

基本上,我使用一个名为的元类框架Joose http://joose.it对于 Javascript,它允许我使用更优雅的类语法 - 但我不知道如何从类声明的更深层次方法中引用对象的范围。我还使用 require.js 进行依赖管理...

这是一个类定义示例:

   define([
      'jquery',
      'handlebars',
   ], function($, Handlebars){

      var MyClass = Class("MyClass", {

         //inheritance         
         isa: SuperClass,

         //instance vars
         has: {

            hello:{
               is: 'r',
               init: 'Hi There!',
            },

            someVarToBeSetUsingAjax:{
               is: 'rw',
               init: false,
            },
         },

         //methods
         methods: {

            init: function () {

               var self = this;
               self.getAjaxVar();

            },

            getAjaxVar: function() {

               var self = this;

               //HOW CAN I REFERENCE 'self' THROUGHOUT MY OBJECT?

               $.get('ajax/test.html', function(response) {
                 self.someVarToBeSetUsingAjax = response.value;
               });
            },

            //lots more methods...

         }
    });

   return MyClass;

});

好的,所以我的问题是 - 在 AJAX 函数中我必须编写 var self = this 才能将我的对象放入 AJAX 调用的范围 - 没问题。但是,我发现自己对类声明中的几乎每个方法都这样做!如何以干净、高效的方式在所有方法中引用 self?我知道你可以通过设置参数来使用 AJAX 中的作用域,假设它不仅仅是 AJAX,还有其他将作用域关闭到外部的函数。

Thanks.


每次嵌套函数时,你都必须考虑this。但是如果你不嵌套函数,或者该函数不使用this你不需要考虑它。

        init: function () {
           var self = this;
           self.getAjaxVar();
        },

所以在这种情况下没有必要。这是完全相同的:

        init: function () {
           this.getAjaxVar();
        },

但在这儿:

        getAjaxVar: function() {
           var self = this;

           $.get('ajax/test.html', function(response) {
             self.someVarToBeSetUsingAjax = response.value;
           });
        },

您创建了一个内部函数,并且需要对原始值的引用this,所以你必须别名this to self使其易于访问。

没有办法修复this班级各处的价值观。


也就是说,你确实有一些选择。

Function.prototype.bind()可以帮助。

var func = function() { return this.name };
var obj = { name: 'Bob' };
var boundFunc = func.bind(obj);
boundFunc(); // 'Bob'

bind将返回一个新函数this始终设置为特定对象。

So:

        getAjaxVar: function() {
           $.get('ajax/test.html', function(response) {
             this.someVarToBeSetUsingAjax = response.value;
           }.bind(this));
        },

请注意,并非所有浏览器都支持此功能,您可能需要旧浏览器的填充程序。

或者只是习惯self = this.


我也想对 CoffeeScript 表示一点点的认可,因为它支持在运行时不改变上下文的函数声明。

obj = {
  name: "bob"
  sayHello: ->
    doSomeAjax({
      success: =>
        alert "successfully made " + this.name + " say hello!"
    })
}

obj.sayHello()

->使功能正常。但粗箭头=>相反,将保留this函数内部和函数外部。它在实例方法中的回调中非常方便。当编译为 JS 时,它基本上做了一个self = this您的别名,使用self每次在内部函数内引用this。它非常光滑。

但在普通 JS 中,最常见的模式就是self = this, 坚持下去。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

引用外部对象的 JavaScript 作用域 的相关文章

  • Visual Studio 改变 Ctrl-K-D 的工作方式

    In Visual Studio I m using 2012 is there any way of editing the way that Ctrl K D combinations handles its Auto Formatti
  • WooCommerce 自定义产品类型选项不隐藏自定义产品选项卡

    我刚刚向我的 WC 管理产品页面添加了自定义产品类型选项 add filter product type options this filter product type options 99 1 public function filte
  • 使用 jQuery 保留切换状态[重复]

    这个问题在这里已经有答案了 可能的重复 带 Cookie 的 jQuery 切换 https stackoverflow com questions 2523189 jquery toggle with cookie 我有一个简单的切换 但
  • 如何在 jQuery 中将标题转换为 URL slug?

    我正在 CodeIgniter 中开发一个应用程序 我试图在表单上创建一个字段来动态生成URL slug 我想做的是删除标点符号 将其转换为小写 然后用连字符替换空格 例如 Shane s Rib Shack 将变成 shanes rib
  • 从对象中取出具有无效(NaN、空白等)值的键的最佳方法?

    我有一个供用户填写的简短搜索表单 将有多个搜索查询进入 MongoDB 该表单创建一个名为的变量searchParams可能看起来像这样 var searchParams city Springfield bedrooms 3 bathro
  • 在 jQuery 中获取 SELECT 的值和文本[重复]

    这个问题在这里已经有答案了 可能的重复 获取选择框中选定选项标签的值 https stackoverflow com questions 7380604 getting the value of the selected option ta
  • 为什么函数声明在不同浏览器中的处理方式不同?

    虽然我在谷歌中找不到对此的引用 但我熟悉这样一个事实 在 javascript 中 全局函数声明在执行任何代码之前都会被解释 换句话说 这工作得很好 f function f 但是 我注意到 chrome 和 firefox 对全局函数声明
  • 非法使用break语句; javascript

    当这个变量达到一定数量时 我希望循环停止 但我不断收到错误 未捕获的语法错误 非法的中断语句 function loop if isPlaying jet1 draw drawAllEnemies requestAnimFrame loop
  • Next.js:错误:React.Children.only 期望接收单个 React 元素子元素

    我有一个名为Nav inside components目录及其代码如下所示 import Link from next link const Nav gt return div a Home a a About a div export d
  • 如何在具有相同值的下拉菜单上触发 jQuery 更改事件

    即使用户选择相同的值 如何每次都触发 jQuery 更改事件 我需要刷新效果 例如如果用户选择Lawyer它会发出警报hello然后用户再次选择Lawyer从下拉菜单中 它应该发出警报hello 我怎样才能实现它 以下是代码 jQuery
  • 如何根据另一个下拉列表中的选择动态填充下拉列表中的选项?

    我有一个表 其中包含类别信息 例如产品 我已将它们列在下拉菜单中 现在 我需要做的是 在下一个下拉菜单中列出所选类别的子类别 我希望 javascript 是必需的 但我对 javascript 还不太熟悉 将非常感谢您的帮助 你应该使用
  • Riak 在 MapReduce 查询中失败。使用哪种配置?

    我正在与 riak riak js 结合开发一个 nodejs 应用程序 并遇到以下问题 运行此请求 db mapreduce add logs run 正确返回存储在存储桶日志中的所有 155 000 个项目及其 ID logs 1GXt
  • 嵌套 DIV 的类似斑马的 CSS 样式

    我嵌套了 DIV 元素 但我不知道嵌套的级别 我需要每个都有与其父级不同的背景 创建类似斑马的颜色 我只使用两种背景 深色和白色 效果需要类似于在容器中设置奇数和偶数子级的样式 但在我的例子中 子级是嵌套的 我可以使用每个嵌套元素的规则来做
  • AngularStrap 工具提示禁用我的自定义指令

    我正在尝试让 bs tooltip AngularStrap 指令与我自己的名为 checkStrength 的自定义指令一起使用 该指令检查密码的强度 单独使用这些指令中的任何一个时 它们都可以正常工作 但不能一起工作 This http
  • 在 Android Chrome 中隐藏 HTML5 音频/视频通知

    我的网络应用程序上有一个 HTML5 音频元素 在某些时候 我使用以下代码以编程方式停止播放 audioElement pause audioElement currentTime 0 播放音频时 我的 Android 设备 使用 Goog
  • 意外的令牌:尝试解析 JSON 字符串时

    我正在尝试解析这个 JSON 字符串 RESULTS name Thessaloniki GR type Sailing l sailing weather beach Porto 20Carras 20Marina 45904 name
  • Vue-Router 抽象父路由

    我正在尝试将当前网站迁移到 vuejs 站点地图必须是 login signup password reset browse search dozens of other routes 由于其中一些路线共享大量 fx 因此我将它们设为父路线
  • 如何为 jQuery 插件设置私有变量?

    我想创建一个简单的插件 它使用元素的文本作为默认值 或者您可以在调用插件时设置此值 但是 如果我不设置该值 并为多个元素调用插件 则默认值会成倍增加 function fn reText function options var setti
  • Chrome 调试器注入 javascript

    我有这样的好奇心 是否可以以某种方式在我的页面中注入 javascript 并执行它并调试它 正如您在控制台中所做的那样 但在控制台中您无法暂停并观察变量 是否可以调试我通过控制台输入的代码 为什么无法调试通过 XHR 接收的代码 Than
  • $ 在 JQuery 中意味着什么

    在下面的 var obj one 1 two 2 three 3 four 4 five 5 each obj function i val console log val 这里是什么意思 是对象吗 是一个别名jQuery对象 函数 它充当

随机推荐