堆栈内存溢出
  繁体   English   中英

"哪些技术可用于在 JavaScript 中定义一个类，它们的取舍是什么？"

[英]What techniques can be used to define a class in JavaScript, and what are their trade-offs?

 原文  2008-12-22 23:07:04  5   19    javascript/ oop/ class

问题描述

我更喜欢在大型项目中使用 OOP，比如我现在正在做的项目。 我需要在 JavaScript 中创建几个类，但如果我没记错的话，至少有几种方法可以做到这一点。 语法是什么，为什么要这样做？

我想避免使用第三方库——至少一开始是这样。
在寻找其他答案时，我找到了文章Object-Oriented Programming with JavaScript, Part I: Inheritance - Doc JavaScript<\/a><\/em> ，它讨论了 JavaScript 中的面向对象编程。 有没有更好的继承方式？

19 个解决方案

解决方案1
 748 已采纳  2008-12-22 23:16:04

这是不使用任何外部库的方法：

// Define a class like this
function Person(name, gender){

   // Add object properties like this
   this.name = name;
   this.gender = gender;
}

// Add methods like this.  All Person objects will be able to invoke this
Person.prototype.speak = function(){
    alert("Howdy, my name is" + this.name);
};

// Instantiate new objects with 'new'
var person = new Person("Bob", "M");

// Invoke methods like this
person.speak(); // alerts "Howdy, my name is Bob"

解决方案2
 214  2008-12-23 16:44:21

在 JavaScript 中定义类的最好方法是不定义类。

严重地。

面向对象有几种不同的风格，其中一些是：

  • 基于类的 OO（首先由 Smalltalk 引入）<\/li>
  • 基于原型的 OO（Self 首次引入）<\/li>
  • 基于多方法的 OO（我认为是由 CommonLoops 首次引入的）<\/li>
  • 基于谓词的 OO（不知道）<\/li><\/ul>

    可能还有其他我不知道的。

    JavaScript 实现了基于原型的 OO。 在基于原型的 OO 中，通过复制其他对象（而不是从类模板实例化）来创建新对象，并且方法直接存在于对象中而不是类中。 继承是通过委托完成的：如果一个对象没有方法或属性，则在它的原型（即它被克隆的对象）上查找它，然后是原型的原型等等。

    换句话说：没有类。

    JavaScript 实际上对该模型进行了很好的调整：构造函数。 您不仅可以通过复制现有对象来创建对象，还可以“凭空”构建它们，可以这么说。 如果您使用new<\/code>关键字调用函数，则该函数将成为构造函数，并且this<\/code>关键字不会指向当前对象，而是指向新创建的“空”对象。 因此，您可以以任何您喜欢的方式配置对象。 通过这种方式，JavaScript 构造函数可以承担传统基于类的 OO 中类的角色之一：充当新对象的模板或蓝图。

    现在，JavaScript 是一种非常强大的语言，因此如果您愿意，可以很容易地在 JavaScript<\/em>中实现基于类的 OO 系统。 但是，只有在确实需要它时才应该这样做，而不仅仅是因为 Java 就是这样做的。

解决方案3
 86  2015-06-08 04:46:28

ES2015 课程<\/h1>

在 ES2015 规范中，您可以使用类语法，它只是原型系统的糖。

好处<\/h2>
主要好处是静态分析工具更容易定位这种语法。 其他来自基于类的语言的人也更容易将该语言用作多语种。
注意事项<\/h2>
警惕其当前的局限性。 要实现私有属性，必须使用 Symbols 或 WeakMaps<\/a> 。 在未来的版本中，很可能会扩展类以包含这些缺失的功能。
支持<\/h2>目前浏览器支持<\/a>不是很好（除了 IE 之外几乎所有人都支持），但是你现在可以通过像Babel<\/a>这样的编译器来使用这些功能。
资源<\/h2>

解决方案4
 56  2010-09-16 22:14:51

我更喜欢使用 Daniel X. Moore 的{SUPER: SYSTEM} 。 这是一门提供诸如真实实例变量、基于特征的继承、类层次结构和配置选项等好处的学科。 下面的例子说明了真实实例变量的使用，我认为这是最大的优势。 如果您不需要实例变量并且只对公共或私有变量感到满意，那么可能会有更简单的系统。

function Person(I) {
  I = I || {};

  Object.reverseMerge(I, {
    name: "McLovin",
    age: 25,
    homeState: "Hawaii"
  });

  return {
    introduce: function() {
      return "Hi I'm " + I.name + " and I'm " + I.age;
    }
  };
}

var fogel = Person({
  age: "old enough"
});
fogel.introduce(); // "Hi I'm McLovin and I'm old enough"

哇，这本身并不是很有用，但看看添加一个子类：

function Ninja(I) {
  I = I || {};

  Object.reverseMerge(I, {
    belt: "black"
  });

  // Ninja is a subclass of person
  return Object.extend(Person(I), {
    greetChallenger: function() {
      return "In all my " + I.age + " years as a ninja, I've never met a challenger as worthy as you...";
    }
  });
}

var resig = Ninja({name: "John Resig"});

resig.introduce(); // "Hi I'm John Resig and I'm 25"

另一个优点是能够拥有基于模块和特征的继承。

// The Bindable module
function Bindable() {

  var eventCallbacks = {};

  return {
    bind: function(event, callback) {
      eventCallbacks[event] = eventCallbacks[event] || [];

      eventCallbacks[event].push(callback);
    },

    trigger: function(event) {
      var callbacks = eventCallbacks[event];

      if(callbacks && callbacks.length) {
        var self = this;
        callbacks.forEach(function(callback) {
          callback(self);
        });
      }
    },
  };
}

具有 person 类的示例包括可绑定模块。

function Person(I) {
  I = I || {};

  Object.reverseMerge(I, {
    name: "McLovin",
    age: 25,
    homeState: "Hawaii"
  });

  var self = {
    introduce: function() {
      return "Hi I'm " + I.name + " and I'm " + I.age;
    }
  };

  // Including the Bindable module
  Object.extend(self, Bindable());

  return self;
}

var person = Person();
person.bind("eat", function() {
  alert(person.introduce() + " and I'm eating!");
});

person.trigger("eat"); // Blasts the alert!

披露：我是 Daniel X. Moore，这是我的{SUPER: SYSTEM} 。 这是在 JavaScript 中定义类的最佳方式。

解决方案5
 41  2009-07-23 04:46:05

var Animal = function(options) {
    var name = options.name;
    var animal = {};

    animal.getName = function() {
        return name;
    };

    var somePrivateMethod = function() {

    };

    return animal;
};

// usage
var cat = Animal({name: 'tiger'});

解决方案6
 37  2013-03-04 06:49:01

以下是我目前使用的在 javascript 中创建对象的方法

示例 1：

obj = new Object();
obj.name = 'test';
obj.sayHello = function() {
    console.log('Hello '+ this.name);
}

解决方案7
 23  

我认为您应该阅读 Douglas Crockford 的Prototypal Inheritance in JavaScript<\/a>和Classical Inheritance in JavaScript<\/a> 。

他页面中的示例：

Function.prototype.method = function (name, func) {
    this.prototype[name] = func;
    return this;
};

解决方案8
 16  2008-12-28 22:11:29

因为我不会承认 YUI\/Crockford 工厂计划，并且因为我喜欢让事物保持自包含和可扩展性，所以这是我的变体：

function Person(params)
{
  this.name = params.name || defaultnamevalue;
  this.role = params.role || defaultrolevalue;

  if(typeof(this.speak)=='undefined') //guarantees one time prototyping
  {
    Person.prototype.speak = function() {/* do whatever */};
  }
}

var Robert = new Person({name:'Bob'});

解决方案9
 14  2008-12-22 23:22:24

如果您想要简单，您可以完全避免使用“new”关键字，而只使用工厂方法。 有时我更喜欢这个，因为我喜欢使用 JSON 来创建对象。

function getSomeObj(var1, var2){
  var obj = {
     instancevar1: var1,
     instancevar2: var2,
     someMethod: function(param)
     {  
          //stuff; 
     }
  };
  return obj;
}

var myobj = getSomeObj("var1", "var2");
myobj.someMethod("bla");

不过，我不确定大型对象的性能影响是什么。

解决方案10
 12  2016-03-15 09:47:43

var Student = (function () {
    function Student(firstname, lastname) {
        this.firstname = firstname;
        this.lastname = lastname;
        this.fullname = firstname + " " + lastname;
    }

    Student.prototype.sayMyName = function () {
        return this.fullname;
    };

    return Student;
}());

var user = new Student("Jane", "User");
var user_fullname = user.sayMyName();

解决方案11
 9  2013-04-07 00:43:50

您可能希望使用折叠模式创建一个类型：

    // Here is the constructor section.
    var myType = function () {
        var N = {}, // Enclosed (private) members are here.
            X = this; // Exposed (public) members are here.

        (function ENCLOSED_FIELDS() {
            N.toggle = false;
            N.text = '';
        }());

        (function EXPOSED_FIELDS() {
            X.count = 0;
            X.numbers = [1, 2, 3];
        }());

        // The properties below have access to the enclosed fields.
        // Careful with functions exposed within the closure of the
        // constructor, each new instance will have it's own copy.
        (function EXPOSED_PROPERTIES_WITHIN_CONSTRUCTOR() {
            Object.defineProperty(X, 'toggle', {
                get: function () {
                    var before = N.toggle;
                    N.toggle = !N.toggle;
                    return before;
                }
            });

            Object.defineProperty(X, 'text', {
                get: function () {
                    return N.text;
                },
                set: function (value) {
                    N.text = value;
                }
            });
        }());
    };

    // Here is the prototype section.
    (function PROTOTYPE() {
        var P = myType.prototype;

        (function EXPOSED_PROPERTIES_WITHIN_PROTOTYPE() {
            Object.defineProperty(P, 'numberLength', {
                get: function () {
                    return this.numbers.length;
                }
            });
        }());

        (function EXPOSED_METHODS() {
            P.incrementNumbersByCount = function () {
                var i;
                for (i = 0; i < this.numbers.length; i++) {
                    this.numbers[i] += this.count;
                }
            };
            P.tweak = function () {
                if (this.toggle) {
                    this.count++;
                }
                this.text = 'tweaked';
            };
        }());
    }());

解决方案12
 9  2008-12-22 23:33:03

简单的方法是：

function Foo(a) {
  var that=this;

  function privateMethod() { .. }

  // public methods
  that.add = function(b) {
    return a + b;
  };
  that.avg = function(b) {
    return that.add(b) / 2; // calling another public method
  };
}

var x = new Foo(10);
alert(x.add(2)); // 12
alert(x.avg(20)); // 15

解决方案13
 3  2016-08-15 23:42:49

@liammclennan答案的代码高尔夫。 

 var Animal = function (args) { return { name: args.name, getName: function () { return this.name; // member access }, callGetName: function () { return this.getName(); // method call } }; }; var cat = Animal({ name: 'tiger' }); console.log(cat.callGetName());

解决方案14
 2  2016-02-02 16:36:46

具有继承性的基于对象的类

var baseObject = 
{
     // Replication / Constructor function
     new : function(){
         return Object.create(this);   
     },

    aProperty : null,
    aMethod : function(param){
      alert("Heres your " + param + "!");
    },
}


newObject = baseObject.new();
newObject.aProperty = "Hello";

anotherObject = Object.create(baseObject); 
anotherObject.aProperty = "There";

console.log(newObject.aProperty) // "Hello"
console.log(anotherObject.aProperty) // "There"
console.log(baseObject.aProperty) // null

解决方案15
 2  2017-08-23 08:39:38

基于三联画的例子，这可能更简单：

    // Define a class and instantiate it
    var ThePerson = new function Person(name, gender) {
        // Add class data members
        this.name = name;
        this.gender = gender;
        // Add class methods
        this.hello = function () { alert('Hello, this is ' + this.name); }
    }("Bob", "M"); // this instantiates the 'new' object

    // Use the object
    ThePerson.hello(); // alerts "Hello, this is Bob"

这只会创建一个对象实例，但如果您想在一个类中封装一堆变量和方法的名称，它仍然很有用。 通常，构造函数不会有“Bob，M”参数，例如，如果方法将调用具有自己数据的系统，例如数据库或网络。

我对 JS 还是太陌生，不明白为什么这不使用prototype的东西。

解决方案16
 2  2009-05-30 02:22:36

MooTools （我的面向对象工具）以类的思想为中心。 您甚至可以通过继承来扩展和实现。

掌握后，它可以生成可笑的可重用、强大的 javascript。

解决方案17
 1  2017-07-18 11:22:20

一个基地

function Base(kind) {
    this.kind = kind;
}

解决方案18
 0  2008-12-22 23:32:28

JavaScript 是面向对象的<\/a>，但它与 Java、C# 或 C++ 等其他OOP<\/a>语言完全不同。 不要试图那样理解它。 扔掉那些旧知识，重新开始。 JavaScript 需要不同的想法。

我建议获得一本很好的手册或有关该主题的东西。 我自己发现ExtJS 教程<\/a>对我来说是最好的，尽管我在阅读它之前或之后都没有使用过这个框架。<\/s> 但它确实很好地解释了 JavaScript 世界是什么。<\/s> 抱歉，该内容似乎已被删除。 这是一个指向archive.org 副本<\/a>的链接。 今天上班。 :P

解决方案19
 0  2018-09-13 03:03:51

 \/\/new way using this and new function Persons(name) { this.name = name; this.greeting = function() { alert('Hi! I\\'m ' + this.name + '.'); }; } var gee=new Persons("gee"); gee.greeting(); var gray=new Persons("gray"); gray.greeting(); \/\/old way function createPerson(name){ var obj={}; obj.name=name; obj.greeting = function(){ console.log("hello I am"+obj.name); }; return obj; } var gita=createPerson('Gita'); gita.greeting();<\/code><\/pre>

"

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在 javascript 中，定义内联 function 与将其作为参考传递的权衡是什么？ 在向对象分配（或不分配）辅助函数时需要进行哪些权衡？ 为何选择GWT？使用此RIA框架的优势和权衡 此数组解析器使用了哪些JavaScript技术？ 骨干视图不知道他们的容器，通过AJAX获取的模型，没有UI / UX权衡和可维护的代码 JavaScript 中使用的“定义”是什么（除了显而易见的）？ javascript闭包可以用于什么？ 这两种JavaScript / JQuery技术之间有何区别？ Javascript-这两种技术之间最有效的方法是什么？ Javascript面向对象的编程技术，这叫什么？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM