开发者

How to declare a parent and child class in JavaScript?

开发者 https://www.devze.com 2023-03-19 12:28 出处:网络
The one thing I don\'t like about javascript is that there are hundreds of ways to do thing开发者_如何学Gos. What I want to know, is how do I declare a class? Do I use the function() approach? Do I ca

The one thing I don't like about javascript is that there are hundreds of ways to do thing开发者_如何学Gos. What I want to know, is how do I declare a class? Do I use the function() approach? Do I call Class.create()? What is 'standard practice'? What is 'standard practice' to declare member functions? Do I use a prototype? Do I use myClass.method()? And lastly, how do I do basic parent-child inheritance? The reason I am asking is because on the internet I have received many ways to do these things. I want to know what is 'standard practice'.


The reason there is no "standard practice" for declaring classes and particularly subclasses in Javascript is that Javascript doesn't actually have built-in syntactical language support for the typical classes one would find in C++. Instead, it has it's own bag of tricks for how you generate similar functionality and there are lots of different ways to express those tricks. There really is no standard way.

I find it best to use one of the more common javascript libraries (jQuery, Prototype, YUI, Closure, etc...) and then use the functions they provide for sub-classing which will give you your own "standard" way of doing it. If you don't want to use one of the libraries, they you'll need to borrow some code for sub-classing (the equivalent of YUI's extend() function) from somewhere and then decide what style you want to use.

I personally think it's a weakness of Javascript in larger projects, projects with multiple people working on them or projects meant to be extended by others that there's no language syntax for "the way" to declare classes and sub-classes. Instead, the only way to have a consistent code-base is to decide upon your own what style of declaration you're going to use and then enforce that as a coding standard in the project, much as one would do with brace style or indent style.


Definitely agree with the other posters on there not being a "standard practice" for what your describing. I'll share what I use now, which is similar to what Douglas Crawford uses in his book The Good Parts. I'm not claiming it's perfect, but I was frustrated for a long time with this question and this has been working well for me when I am looking to organize JS code in an OOP manner.

var ParentClass = function () {
  var my = {},  // store private member variables and functions
    that = {};  // store public member variables and functions
  my.privateVar = 0;
  that.publicVar = 7;

  // this won't be visible outside of parent class,
  // even to children unfortunately
  my.getPrivateVar = function () {
    return my.privateVar;
  };

  my.privateFunction = function () {
    // do stuff
  };

  // this will be visible to children classes and anyone
  // else using ParentClass
  that.parentFunction = function () {
    // here we can access private vars and functions
    my.privateVar++;
    my.privateFunction();
  };

  // and here we return the object that we created
  // to store the public member variables and functions
  return that;
};

var ChildClass = function () {
  var my = {}, // more private vars and functions will live here
    that = ParentClass();  // and here we subclass ParentClass;

  // here define more public, private methods as before
  that.childFunction = function () {
  };

  return that;
};

// test drive it
var cc = ChildClass();
cc.parentFunction();
cc.childFunction();
console.debug(cc.publicVar);
// console.debug(cc.privateVar);  // undefined


My recommendation is that you read JavaScript Patterns by Stoyan Stefanov. He covers this topic in detail.

Personally, I rather like the Module Pattern. It reduces global space pollution, and is easy to use.

Edit:

Other answers are leaving out the new keyword when instantiating their "classes". Please see answer 383503 for a thorough discussion on instantiating JavaScript "classes" properly.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号