尝试重新使用“;这个“;属性，则它将失去作用域

Error when trying to re-use the "this" property in an object, it loses scope

本文关键字：作用域 失去 这个 新使用 属性      更新时间：2024-05-13

给定以下对象：

var data = {
    el : $('.element'),
    value1 : this.el.data('value1')
}

为什么this失去作用域？然后抛出错误？

我可以只做以下操作，但效率不高，因为我基本上要选择两次div：

var data = {
    el : $('.element'),
    value1 : $('.element').data('value1')
}

这适用于以下功能：

    var data = {
        el : $('.element'),
       test : function () {
       console.log(this.el) // works
    }
}

试试这个：

var $element = $('.element');
var data = {
    el : $element,
    value1 : $element.data('value1')
}

this不属于jQuery，当你用jQuery选择一个元素时，它不会改变你所在范围内this的值。this基本上是包含你所在的函数的对象。有时有jQuery方法会把this变成DOM元素，无论你使用什么方法，你都需要阅读文档。我们无法从这段代码中确定this是什么，因为它不包含函数。

另一个选项，我想是这样的：

var data = { e : $('.element'), value1: function(){return this.e.data();} }

我对这个解决方案并不满意，但它将完全封装数据中的所有内容

以下是我刚才尝试的内容：

你觉得怎么样？

var data = {
   el : $('.element'),
   initialize: function() {
     this.mydata = this.el.data('mydata');
   }
}

执行此

el = $('.element');
var data = {
    el : el,
    value1 : el.data('value1')
}

无论如何，这看起来很奇怪，也许更多的上下文可以帮助它看起来更好（当你可以从jQuery对象中获得值时，为什么要在对象上传递jQuery对象及其值？）

像一样使用它

var data = {
    el : $('.element'),
    value1 : function () {
       return this.el.data('value1')    
    }
}
console.log(data.value1());//foobar 
console.log(data.value1.call({}));//error
var data = {
    el : $('.element'),
    value1 : function () {
       return data.el.data('value1')    
    }
}
console.log(data.value1());//foobar 
console.log(data.value1.call({}));//foobar

在第二种方法中，即使您在任何作用域

中调用函数，该值也将始终引用数据
相关文章：