javascript - 原型(prototype)继承和静态方法

标签 javascript static-methods ecmascript-5 prototypal-inheritance

我正在努力适应 JavaScript (ECMAScript 5) 的“真正”原型(prototype)继承,但不知何故,我的思想似乎陷入了经典的继承模式。

我想创建一个 Vector 对象,它执行简单的操作,例如加法、减法等。

现在有两种情况:

  • #1:将向量 B 添加到向量 A(向量 A 被修改)
  • #2:将向量 B 添加到向量 B(创建一个新的向量 C,它是 A 和 B 的总和)

在经典继承中,我会为场景 #1 创建一个实例方法,为场景 #2 创建一个静态方法,但在原型(prototype)继承中似乎没有静态函数。

那么,实现这两个场景的简洁方法是什么?

这是我到目前为止所得到的:

var Vector = {

  x: 0,
  y: 0,
  z: 0,

  initialize: function(x,y,z) {
    this.x = x;
    this.y = y;
    this.z = z;
    return this;
  },

  add: function(vec) {
    this.x += vec.x;
    this.y += vec.y;
    this.z += vec.z;
    return this;  
  },

  print: function() {
    console.log('x:', this.x, 'y:', this.y, 'z:', this.z);
  }
};

var firstVector = Object.create(Vector).initialize(1,2,3);
var secondVector =  Object.create(Vector).initialize(4,5,6);

firstVector.print();  // Outputs: x:1, y:2, z:3
secondVector.print(); // Outputs: x:4, y:5, z:6

firstVector.add(secondVector); 
firstVector.print(); // Outputs: x:5,y:7,z:9


// What I'm looking for:

var thirdVector = Vector.add(firstVector, secondVector);

感谢您的任何建议!

更新:

这是我尝试使用 Paul 的建议(谢谢!)实现静态函数:

var vectorPrototype = {
  hello: function() { console.log('hello I am the prototype'); }
};

var Vector = Object.create(vectorPrototype);

Vector.hello = function() { console.log('hello I am the static function'); };

Vector.init = function() {
  return Object.create(vectorPrototype);
}

var vec1 = Vector.init();

vec1.hello(); // says: 'hello I am the prototype'
Vector.hello(); // says: 'hello I am the static function'

最佳答案

您的 Vector 对象实际上只是原型(prototype)。您可以将它与 Object.create 函数一起使用来创建您的 Vector 基类/子类。然后将静态属性粘贴到新创建的 Vector 类中。看这里:http://jsfiddle.net/agYNc/1/

var vectorPrototype = {

  x: 0,
  y: 0,
  z: 0,

  initialize: function(x,y,z) {
    this.x = x;
    this.y = y;
    this.z = z;
    return this;
  },

  add: function(vec) {
    this.x += vec.x;
    this.y += vec.y;
    this.z += vec.z;
    return this;  
  },

  print: function() {
    console.log('x:', this.x, 'y:', this.y, 'z:', this.z);
  }
};

//create your base Vector type
var Vector = Object.create( vectorPrototype );


//Your static functions here
Vector.staticFunction = function ( vec1, vec2 ) {};


var firstVector = Object.create(Vector).initialize(1,2,3);
var secondVector =  Object.create(Vector).initialize(4,5,6);

firstVector.print();  // Outputs: x:1, y:2, z:3
secondVector.print(); // Outputs: x:4, y:5, z:6

firstVector.add(secondVector); 
firstVector.print(); // Outputs: x:5,y:7,z:9​

这是一个很好的例子,它使用Object.create 继承、静态和实例属性。 https://github.com/webadvanced/takeCommand/blob/master/src/takeCommand.module.js

关于javascript - 原型(prototype)继承和静态方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12118107/

相关文章:

javascript - 是否可以在注入(inject)服务的方法上使用 spyOn?

javascript - Nodejs swig、子字符串或限制字符

php - 在 PHP 中使用带有作用域解析运算符的变量

javascript - sveltejs - 组件的静态属性

javascript - 在 ES6 之前的 JavaScript 中,我们可以只使用 "if (a === undefined)"来处理默认参数值吗?

Javascript:(ES5)数组迭代权威指南

javascript - 提交表单时转到新的 html 页面

javascript - 如何在 3 个 js 中依次使用 2 个不同的动画对 2 个对象进行动画处理?

java - 编译报错ConcurrentModificationException,试图使用移除同名的方法

javascript - Element.appendChild 在 Chrome 上表现异常