如何正确创建Javascript原型,以使类变量在实例化之间不持久?

琼琳

我在JavaScript原型开发方面苦苦挣扎;我似乎不明白我何时应该在原型vs实例化中声明一个属性。特别是,我不明白,为什么在所附的代码(构建一个小的Router类以将文档更像是应用而不是页面的基础上进行的基本练习)中,实例化设置的属性仍然存在,从而积累了我的意图完全是分开的对象。

通常,这是一个学习练习,但是我已经缩减了一些原始代码,以帮助进行上下文混淆*。

代码在这里:http : //codepen.io/anon/pen/xGNmWM

基本上,每次您单击链接时,data-route都应该在事件监听器上选择元素上属性,并Route实例化一个新对象(并传递有关预期路线的信息);最后,该Router班级实际上应该“启动”路线,即。发出ajax请求或执行一些文档内操作,无论如何。

Route.url.url我明显的错误理解而言,现在应该每次都重新创建属性,然后通过传递的数据来通知属性。不知何故,此属性将持续存在,并因此累积每次点击传递的信息。

我真的不明白为什么

**我没有删除任何会影响我的问题的内容;确实可以进一步削减它,但是我意识到问题的完整性取决于原始代码的合理传真。

猩红

你有两个问题。

按值vs按引用

在Javascript基本类型中,将数字,布尔值和字符串作为类型传递给另一个函数或通过值设置为另一个变量。这意味着将其值复制(克隆)。

对象类型,如对象,数组和函数,将通过引用传递给另一个函数或设置为另一个变量。这意味着这种类型的变量只是对内存内容的引用。然后,将对象设置为变量时,仅复制其内存地址。

当您传递“ route_data”时,其引用将被复制。然后,Route构造函数将对路由器持有的相同变量进行操作。如果在通过之前克隆对象,则问题将得到解决。

...
var route_data = this.route_data[ route_name ];
route_data = $.extend(true, {}, route_data);  // Clone object using jQuery
var route = new Route( route_name, route_data, request_obj);
...

原型

Javascript具有原型继承性,这意味着每个对象都指向其原型即另一个对象。

var obj = { name: 'John' };
console.log(obj.__proto__);

默认情况下,所有对象的根原型都是Javascript对象。如上面的示例所述。

function Person(name) {
    this.name = name;
}

Person.prototype = {
    getName: function() {
        return this.name;
    }
}

var obj = new Person('John');

console(obj.getName());
console(obj.__proto__);
console(obj.__proto__.__proto__);

使用new新的空对象时,将其创建并绑定this到指定的函数。另外,它的对象原型将指向在调用函数的原型上指定的对象。

在进行获取操作时,JavaScript引擎将搜索整个原型链,直到找到指定的字段。

但是在设置操作中,如果当前对象上不存在指定字段,则会创建一个新字段。

当您定义该url字段时,Route它应该是静态的,因为当您尝试更改它时,会创建一个新字段。

如果您验证Route实例,您会注意到您已经创建了重复的url字段。一个在对象本身上,另一个在原型上。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章