无法使用点符号或索引器符号向对象添加属性？

Question

我试图将名为params的属性添加到名为Page的类的url的属性中。 必须为属性params分配匿名函数的返回值。

该功能运行正常。

但是， 在分配了函数的返回值之后 ，当我检查是否已分配了属性params ，在监视窗口或控制台中都没有看到此类属性。 当我尝试从url属性读回属性params ，得到undefined 。

这是为什么？ 无论我使用点表示法还是索引器表示法向属性写入/分配值，都会发生这种情况。 下面是我的代码：

var app = 
{
    ...
};

$(document).ready(function() {
    var page = new Page(app);
    page.display();
});

var Page = function(app) {

    this.url = window.location.href;
    this.app = app;

    this.url.params = (function() {

        var p = { };

        if (this.indexOf('?') < 0) return p;

        var query = this.split('?')[1];

        var pairs = query.split('&');

        if (pairs === undefined || pairs.length == 0) return p;

        for(var i = 0; i < pairs.length; i++) {
            var pair = pairs[i].trim();

            if (pair.length == 0) continue;

            if (pair.indexOf('=') < 0) {
                p[pair[0]] = '';
            }
            else {
                var prop = pair.split('=');

                p[prop[0]] = prop[1];
            }
        }

    }.bind(this.url))();

    this.display = function() {

        debugger;

        // over here, when I watch 'url', it does
        // not have a 'params' property
    };
};

Answer 1

将属性分配给原始字符串值不会导致错误。 相反，它在内部将字符串类型提升为String对象，执行分配，然后丢弃String对象。

这样做的原因是允许对原始字符串值使用String.prototype getter和方法。 （类似的考虑适用于在原始数字类型值上使用Number.prototype方法）

就你而言

this.url = window.location.href;

this.url设置为原始字符串值。 然后，当您将url.params设置为函数时，它将在内部被有效地视为

new String(this.url).params = function () ....

出于赋值目的，但是创建的String对象在执行语句后被丢弃。 this.url中的原始值不会获得属性-它不是对象数据类型，并且没有属性。

Answer 2

您只是忘了添加函数的return语句。 修复此问题，您的代码将运行良好：D

Answer 3

首先，绑定语法/调用是错误的。 您实际上不需要使用bind函数来执行类似的操作。 您使用bind是否有特定原因？ 我只是通过将window.location.href传递给url.params赋值函数来完成这项工作的； 另外，我还更改了url以将其初始化为空对象this.url = {}; 。

我完整的工作代码：

var app = 
{
};

$(document).ready(function() {
    var page = new Page(app);
    page.display();
});

var Page = function(app) {

    //this.url = window.location.href;
    this.url = {};
    this.app = app;

    this.url.params = (function(url) {

        var p = { };

        if (url.indexOf('?') < 0) return p;

        var query = url.split('?')[1];

        var pairs = query.split('&');

        if (pairs === undefined || pairs.length == 0) return p;

        for(var i = 0; i < pairs.length; i++) {
            var pair = pairs[i].trim();

            if (pair.length == 0) continue;

            if (pair.indexOf('=') < 0) {
                p[pair[0]] = '';
            }
            else {
                var prop = pair.split('=');

                p[prop[0]] = prop[1];
            }
        }

        return p;

    })(window.location.href); //.bind(window.location.href /*this.url*/)();

    this.display = function() {

        debugger;

        console.log('display', this.url);

        // This url (http://zikro.gr/dbg/html/js-bind.html?some=1&url=2&vars=3)
        // Outputs in the console:
        // Object
        //  params: Object
        //    some: "1"
        //    url: "2"
        //    vars: "3"

    };
};

恢复调试器断点后，可以检查调试器和控制台（例如带有?some=1&url=2&vars=3 url查询字符串的示例）：

Object
 params: Object
   some: "1"
   url: "2"
   vars: "3"

您可以在这里查看我的工作示例：http: //zikro.gr/dbg/html/js-bind.html?some=1&url=2&vars=3

编辑

看来您的代码运行良好。 您只需将this.url初始化为this.url = {};类的对象this.url = {}; 然后只需在绑定函数内部返回p数组，如下所示：

var Page = function(app) {

    //this.url = window.location.href;
    this.url = {};
    this.href = window.location.href;
    this.app = app;

    this.url.params = (function(url) {

        var p = { };

        if (this.indexOf('?') < 0) return p;

        var query = this.split('?')[1];

        var pairs = query.split('&');

        if (pairs === undefined || pairs.length == 0) return p;

        for(var i = 0; i < pairs.length; i++) {
            var pair = pairs[i].trim();

            if (pair.length == 0) continue;

            if (pair.indexOf('=') < 0) {
                p[pair[0]] = '';
            }
            else {
                var prop = pair.split('=');

                p[prop[0]] = prop[1];
            }
        }

        return p;

    }.bind(this.href))();

    this.display = function() {
        debugger;
    };
};

Answer 4

@baao在问题注释中指出的问题是-您不能将自定义属性添加到字符串文字中，但是可以将自定义属性添加到String对象中。 两者之间有区别。

下面的代码片段证明了这一点。

 var foo = "foo"; var bar = new String("bar"); foo.foo = "foo"; bar.bar = "bar"; alert(foo.foo); alert(bar.bar); 

显而易见的解决方法是将url更改为对象。 @Christos Lytras也证明了这一点，@ baao在对原始问题的评论中也建议这样做。

var app = 
{
    ...
};

$(document).ready(function() {
    var page = new Page(app);
    page.display();
});

var Page = function(app) {

    this.url = { url : window.location.href };
    this.app = app;

    this.url.params = (function() {

        var p = { };

        if (this.indexOf('?') < 0) return p;

        var query = this.split('?')[1];

        var pairs = query.split('&');

        if (pairs === undefined || pairs.length == 0) return p;

        for(var i = 0; i < pairs.length; i++) {
            var pair = pairs[i].trim();

            if (pair.length == 0) continue;

            if (pair.indexOf('=') < 0) {
                p[pair[0]] = '';
            }
            else {
                var prop = pair.split('=');

                p[prop[0]] = prop[1];
            }
        }

        return p;

    }.bind(this.url.url))();

    this.url.getErrorMessage = function() {
        return this.params['error'];
    };

    this.url.getAccesToken = function() {
        return this.params['access_token'];
    };

    this.url.search = function(pattern) {
        return this.url.search(pattern);
    }

    this.display = function() {

        ...
    };
};