向函数添加属性并设置其原型

时间:2018-04-30 13:06:40

标签: javascript prototype

我必须处理以下代码:

id      organisation_name       report_date_year        Dimension                       Value
-------------------------------------------------------------------------------------------------------
351     Aviva Plc               2016                    gross_written_premiums          25380997.000
351     Aviva Plc               2017                    gross_written_premiums          17385704.462

这段代码有一个函数function Vector(x, y) { this.x = x || 0; this.y = y || 0; } Vector.add = function(a, b) { return new Vector(a.x + b.x, a.y + b.y); }; Vector.sub = function(a, b) { return new Vector(a.x - b.x, a.y - b.y); }; Vector.scale = function(v, s) { return v.clone().scale(s); }; Vector.random = function() { return new Vector( Math.random() * 2 - 1, Math.random() * 2 - 1 ); }; Vector.prototype = { set: function(x, y) { if (typeof x === 'object') { y = x.y; x = x.x; } this.x = x || 0; this.y = y || 0; return this; }, add: function(v) { this.x += v.x; this.y += v.y; return this; }, sub: function(v) { this.x -= v.x; this.y -= v.y; return this; }, scale: function(s) { this.x *= s; this.y *= s; return this; }, length: function() { return Math.sqrt(this.x * this.x + this.y * this.y); }, lengthSq: function() { return this.x * this.x + this.y * this.y; }, normalize: function() { var m = Math.sqrt(this.x * this.x + this.y * this.y); if (m) { this.x /= m; this.y /= m; } return this; }, angle: function() { return Math.atan2(this.y, this.x); }, angleTo: function(v) { var dx = v.x - this.x, dy = v.y - this.y; return Math.atan2(dy, dx); }, distanceTo: function(v) { var dx = v.x - this.x, dy = v.y - this.y; return Math.sqrt(dx * dx + dy * dy); }, distanceToSq: function(v) { var dx = v.x - this.x, dy = v.y - this.y; return dx * dx + dy * dy; }, lerp: function(v, t) { this.x += (v.x - this.x) * t; this.y += (v.y - this.y) * t; return this; }, clone: function() { return new Vector(this.x, this.y); }, toString: function() { return '(x:' + this.x + ', y:' + this.y + ')'; } }; ,并且这个函数附加了一个属性Vector。但是,在Vector.add之后的几行,然后定义Vector.prototype

所以此时我们addVectorVector.add,我不太确定调用它们时有什么区别。

如需完整参考,我尝试重做的代码来自Gravity Points CodePen,因此您可以查看整个代码及其用法。

然而,对我来说,作为主要使用ECMAScript 6的人,这个代码看起来很奇怪,至少可以说。

2 个答案:

答案 0 :(得分:1)

这是类级别函数和实例函数之间的区别,这意味着您应该能够使用Vector.add 而不使用实例,而另一个使用实例

答案 1 :(得分:1)

有关静态与原型方法的更多信息,您可以read this answer here。在你的情况下:

静态调用通过将两个向量添加到一起来返回新的Vector。 v1v2保持不变。

let v1 = new Vector(1, 1);
let v2 = new Vector(2, 2);
let v3 = Vector.add(v1, v2);

v1.toString(); // (x:1, y:1)
v2.toString(); // (x:2, y:2)
v3.toString(); // (x:3, y:3)

原型调用将两个向量相加但不创建新的向量;相反,x的{​​{1}}和y属性已添加到v2

v1

请注意,prototype方法返回对其调用的实例的引用,以便后续调用可以链接:

let v1 = new Vector(1, 1);
let v2 = new Vector(2, 2);
v1.add(v2);

v1.toString(); // (x:3, y:3)
v2.toString(); // (x:2, y:2)