[英]Unable to add a property to an object using either the dot notation or the indexer notation?
I am trying to add a property named params
to a property named url
of a class named Page
. 我试图将名为
params
的属性添加到名为Page
的类的url
的属性中。 The property params
must be assigned the return value of an anonymous function. 必须为属性
params
分配匿名函数的返回值。
The function runs just fine. 该功能运行正常。
However, after assigning the return value of the function, when I check to see if the property params
has been assigned to, I see no such property in the watches window or in the console. 但是, 在分配了函数的返回值之后 ,当我检查是否已分配了属性
params
,在监视窗口或控制台中都没有看到此类属性。 When I try to read back the property params
from the url
property, I get undefined
. 当我尝试从
url
属性读回属性params
,得到undefined
。
Why is that? 这是为什么? This happens whether I use the dot notation or the indexer notation to write / assign a value to the property.
无论我使用点表示法还是索引器表示法向属性写入/分配值,都会发生这种情况。 Below is my code:
下面是我的代码:
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
};
};
Assigning properties to primitive string values does not cause an error. 将属性分配给原始字符串值不会导致错误。 Instead it internally promotes the string type to a String object, performs the assignment and then discards the String object.
相反,它在内部将字符串类型提升为String对象,执行分配,然后丢弃String对象。
The reason for doing this is to enable the use of String.prototype getters and methods on primitive string values. 这样做的原因是允许对原始字符串值使用String.prototype getter和方法。 (Similar considerations apply to using Number.prototype methods on primitive number type values)
(类似的考虑适用于在原始数字类型值上使用Number.prototype方法)
In your case 就你而言
this.url = window.location.href;
sets this.url
to a primitive string value. this.url
设置为原始字符串值。 Then when you set url.params
to a function it is internally and effectively treated as 然后,当您将
url.params
设置为函数时,它将在内部被有效地视为
new String(this.url).params = function () ....
for the purposes of the assignment, but the String object created gets discarded after the statement has been executed. 出于赋值目的,但是创建的String对象在执行语句后被丢弃。 The primitive value in
this.url
does not gain properties - it is not an object data type and doesn't have properties. this.url
中的原始值不会获得属性-它不是对象数据类型,并且没有属性。
You just forgot to add the return statement of the function. 您只是忘了添加函数的return语句。 Fix that and your code will work pretty well :D
修复此问题,您的代码将运行良好:D
First, the bind syntax/call is wrong. I made this work by just passing the 首先,绑定语法/调用是错误的。 You actually don't need to use
bind
function to do something like this. 您实际上不需要使用
bind
函数来执行类似的操作。 Is there a specific reason you are using bind
? 您使用
bind
是否有特定原因? window.location.href
to the url.params
assignment function; 我只是通过将
window.location.href
传递给url.params
赋值函数来完成这项工作的; also I've changed the url
to initialize as an empty object this.url = {};
另外,我还更改了
url
以将其初始化为空对象this.url = {};
. 。
My full working code: 我完整的工作代码:
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"
};
};
You can check the debugger and the console after you resume the debugger breakpoint (example with ?some=1&url=2&vars=3
url query string): 恢复调试器断点后,可以检查调试器和控制台(例如带有
?some=1&url=2&vars=3
url查询字符串的示例):
Object
params: Object
some: "1"
url: "2"
vars: "3"
And you can check my working example here: http://zikro.gr/dbg/html/js-bind.html?some=1&url=2&vars=3 您可以在这里查看我的工作示例:http: //zikro.gr/dbg/html/js-bind.html?some=1&url=2&vars=3
EDIT 编辑
It appears that your code works quite well. 看来您的代码运行良好。 You just have to initialize
this.url
to be an object like this.url = {};
您只需将
this.url
初始化为this.url = {};
类的对象this.url = {};
and then just return the p
array inside the binded function like this: 然后只需在绑定函数内部返回
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;
};
};
The problem, as pointed out by @baao in the comments to the question is -- you may not add custom properties to a string literal but you can, to a String
object. @baao在问题注释中指出的问题是-您不能将自定义属性添加到字符串文字中,但是可以将自定义属性添加到
String
对象中。 There is a difference between the two. 两者之间有区别。
The code snippet below proves this. 下面的代码片段证明了这一点。
var foo = "foo"; var bar = new String("bar"); foo.foo = "foo"; bar.bar = "bar"; alert(foo.foo); alert(bar.bar);
The fix, which was obvious, was to change the url
to being an object. 显而易见的解决方法是将
url
更改为对象。 This has also been demonstrated by @Christos Lytras and suggested by @baao in the comments to the original question. @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() {
...
};
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.