如何在JavaScript中不在函数内部使用对象字面量的属性

Question

我创建了一个JS对象字面量，但是想在不在函数中的情况下访问属性。每当我尝试时，我没有得到任何结果，或者它返回null。

JS:

var settings = {
        prev: '#prev',
        next: '#next',
        slides: '#slides',
        crslContainer: '#carousel',

        //I'm trying to access the 'slides' by using 'this.slides'
        inDent: $(this.slides).find('li').outerWidth(),
        fx: 'rotate',

        myFunction: function () {
          console.log(settings.inDent); //This shows null in the console, why??
        }
    }

在上面的代码中，我试图使用this.slides访问slides，都在同一个对象内部，但控制台显示为null。但是当我执行方法inDent：$（'#slides'）.find（'li'）.outerWidth（）时，它就可以正常工作了。为什么会这样？我认为它与在函数内使用this关键字使用这些属性相同，显然不是这种情况。我只想将该对象属性的值即字符串传递给另一个不是函数的属性。

非常感谢

- Shaoz

Answer 1

在对象字面量中，您无法引用“正在定义的对象”。也就是说，没有办法让正在构建的对象的属性值表达式引用对象本身以便访问另一个（可能已经定义好的）属性。

不过，您可以在定义后向对象中添加属性。

 var obj = { a: 0 };
 obj.b = (obj.a ? 1 : 2);

在你的情况下：

 var settings = { ... };
 settings.inDent = ($(settings.slides).find('li').outerWidth());

- Pointy

---

非常感谢您的回答。您的方法可行。他们应该使对象字面量更加灵活，这样我们就可以像构造函数一样在任何地方传递变量，但是生活中没有什么是完美的...哈哈。还是谢谢。 - Shaoz

Answer 2

你需要使用

标签。

this.inDent

inDent 字段只能在 settings 对象定义之外通过 settings.inDent 访问。

- scibuff

---

非常感谢您的回答@scibuff。我知道我可以使用this.inDent，但我只能在函数内部这样做。 - Shaoz

这并没有回答问题，因为他们无法在settings对象的静态声明中成功使用this或this.inDent。 - jfriend00

@jfriend00 当然可以使用 this，试试这个 - var s = { x: 'foo', y:function(){ console.log(this.x); }}; s.y(); // 输出 'foo' - scibuff

@scibuff - 这是在一个函数内部。这显然与 OP 所问的不同。OP 询问的是他们有如下行：inDent: $(this.slides).find('li').outerWidth()，其中一个静态声明参考了另一个不可能的声明。 - jfriend00

@scibuff：你刚才用console.log演示的东西，我已经知道了，也就是在函数内部使用this。但是我想在声明变量时也能使用this。我知道在函数内部可以使用this，但我的问题是这样使用this：var obj = { foo: '#id', bar: $(this.foo) }; 这里我想要在bar中使用foo的值，这是我的问题，但答案是我们不能在对象字面量中使用这种技术。但还是谢谢你的努力，我非常感激。我还在学习中... - Shaoz

@Shaoz，抱歉我最初可能误解了你的问题 - 但你仍然可以做你想做的事情 - 请阅读我上面关于闭包的答案。 - scibuff

Answer 3

使用闭包，例如

var settings = function(){
    var private = {};
    private.slides = '#slides';

    var public = {}
    public.inDent = ($(private.slides).find('li').outerWidth());
    public.doSomething = function(){
        console.log( public.inDent );
    }

    return public;
}();

这样做的好处还在于它免费为您提供了“封装”

顺便说一句，您不应该依赖任何公开可用的东西，因为它可能会被更改，例如settings.inDent = null，然后settings.doSomething()可能不再正确地运行。正确的方法是以下方式：

...
private.inDent = ($(settings.slides).find('li').outerWidth());

public.inDent = private.inDent;
public.doSomething = function(){
    console.log( private.inDent );
}

即使有人执行了 settings.inDent = null，只要你始终从 settings 中使用 private.inDent，就不会影响到 private.inDent 的内部实现。可以将 inDent 值设置为“只读”，这样在 settings 对象之外就无法更改其内部实现。因此，即使有人执行了 settings.inDent = null，settings.doSomething(); 仍然能够正常运行。

- scibuff