在JavaScript中，似乎有许多不同的实现面向对象编程的方法。
我喜欢：
function ClassA(){};
ClassA.prototype={
someFunc:function(a,b,c){},
otherFunc:function(){}
}
var c=new ClassA();
我从未使用过这提供的以外的功能（尽管我是一个熟练的面向对象程序员）。我怀疑这是老派的，因为我偶尔会看到新的花哨变种，这让我想知道我是否选择了最佳方法。例如，在构造函数中可以执行魔法来创建私有变量和访问器方法，这是我曾经认为不可能的事情（直到最近）。子类化呢？我不知道如何实现这一点，但现在肯定有某种常见模式。
您如何做到这一点以及为什么？
function foo() {
var bar = function() { console.log("i'm a private method"); return 1; };
var iAmAPrivateVariable = 1;
return {
publicMethod: function() { alert(iAmAPrivateVariable); },
publicVariable: bar()
}
}
//usage
var thing = foo()
这被称为函数式方法，因为您实际上正在利用闭包进行封装（这是在JavaScript中唯一的方法）。
总的来说，在JavaScript中不应该使用面向对象编程，由于很多原因它并不是一个很好的语言。将其视为带有花括号和分号的Scheme（一种Lisp方言），您将开始像专业人士一样编写代码。尽管如此，有时候面向对象编程更适合某些情况。在这些情况下，通常以上述方法为最佳选择。
编辑：将继承加入此混合中
function parent() {
return { parentVariable: 2 };
}
function foo() {
var bar = function() { console.log("i'm a private method"); return 1; };
var iAmAPrivateVariable = 1;
me = parent();
me.publicMethod = function() { alert(iAmAPrivateVariable); };
me.publicVariable = bar();
return me;
}
function Superclass() { }
Superclass.prototype.someFunc = function() { };
function Subclass() { }
Subclass.prototype = new Superclass();
Subclass.prototype.anotherFunc = function() { };
var obj = new Subclass();
obj -> Subclass.prototype -> Superclass.prototype -> Object.prototype构建一个“原型链”。function C(){}; function clone(obj){C.prototype=obj, return new C}; Subclass.prototype=clone(Superclass.prototype);... 这样父构造函数就不会被调用，这可能会产生不必要的副作用。 - Dagg NabbitJavaScript中的对象与几乎所有其他高级语言都不同。它们不像Java、C++、PHP等等那样是基于类的，而是基于原型的。因此，面向对象编程的基本范式必须被大幅修改。那些无法或不想重新思考这一点，并坚持使用基于类的思维方式的人，必须在JavaScript中构建基于类的逻辑，或者使用已经构建好的来自他人的代码。
我喜欢做类似于
// namespace "My"
var My = new function {
// private methods
/**
* Create a unique empty function.
* @return {Function} function(){}
*/
function createFn () {return function(){}}
/** A reusable empty function. */
function emptyFn () {}
/**
* Clone an object
* @param {Object} obj Object to clone
* @return {Object} Cloned object
*/
function clone (obj) { emptyFn.prototype=obj; return new emptyFn() }
// public methods
/**
* Merge two objects
* @param {Object} dst Destination object
* @param {Object} src Source object
* @param {Object} [options] Optional settings
* @return {Object} Destination object
*/
this.merge = function (dst, src, options) {
if (!options) options={};
for (var p in src) if (src.hasOwnProperty(p)) {
var isDef=dst.hasOwnProperty(p);
if ((options.noPrivate && p.charAt(0)=='_') ||
(options.soft && isDef) ||
(options.update && !isDef)) continue;
dst[p]=src[p];
}
return dst;
}
/**
* Extend a constructor with a subtype
* @param {Function} superCtor Constructor of supertype
* @param {Function} subCtor Constructor of subtype
* @param {Object} [options] Optional settings
* @return {Function} Constructor of subtype
*/
this.extend = function (superCtor, subCtor, options) {
if (!subCtor) subCtor=createFn();
if (!options) options={};
if (!options.noStatic) this.merge(subCtor, superCtor, options);
var oldProto=subCtor.prototype;
subCtor.prototype=clone(superCtor.prototype);
this.merge(subCtor.prototype, oldProto);
if (!options.noCtor) subCtor.prototype.constructor=subCtor;
return subCtor;
}
}
然后就是类似这样的代码...
// namespace "My.CoolApp"
My.CoolApp = new function(){
// My.CoolApp.ClassA
this.ClassA = new function(){
// ClassA private static
var count=0;
// ClassA constructor
function ClassA (arg1) {
count++;
this.someParam=arg1;
}
// ClassA public static
My.merge(ClassA, {
create: function (arg1) {
return new ClassA(arg1);
}
}
// ClassA public
My.merge(ClassA.prototype, {
doStuff : function (arg1) {
alert('Doing stuff with ' + arg1);
},
doOtherStuff : function (arg1) {
alert('Doing other stuff with ' + arg1);
}
}
return ClassA;
}
// My.CoolApp.ClassB
this.ClassB = new function(){
My.extend(My.CoolApp.ClassA, ClassB);
// ClassB constructor
function ClassB () {
ClassA.apply(this, arguments);
}
return ClassB;
}
}
...clone 函数是实现继承的关键。简而言之：
JavaScript中的面向对象编程与Canvas
看看JavaScript中的面向对象编程在不同情况下可以有多么有用... 这让你可以将正方形和圆形作为对象绘制，以便您可以返回并循环或操纵它们。
function Shape(x,y,color){
this.x = x
this.y = y
this.color = color
}
function Square(height,width,color){
Shape.call(this, event.x, event.y, color)
this.height = height
this.width = width
this.x -= canvas.offsetLeft + (this.height/2)
this.y -= canvas.offsetTop + (this.width/2)
}
Square.prototype = new Shape();
Square.prototype.draw = function(color){
ctx.fillStyle = color
ctx.fillRect(this.x,this.y,this.height,this.width)
}
function Circle(color, width){
Shape.call(this)
this.x = event.x -60
this.y = event.y -60
this.width = width
}
Circle.prototype = new Shape();
Circle.prototype.draw = function(color){
ctx.beginPath()
ctx.arc(this.x,this.y,this.width,0,2*Math.PI, false);
ctx.fillStyle = color
ctx.fill()
}
bar将成为全局对象的属性 (window.bar)，因为它没有在foo函数的作用域中使用var语句进行声明。此外，在 ECMAScript 5 严格模式下，这将导致ReferenceError错误，因此请始终使用var来 声明 变量 ;) - Christian C. Salvadófoo的实例。 - casablanca