Asked  6 Months ago    Answers:  5   Viewed   32 times

I prefer to use OOP in large scale projects like the one I'm working on right now. I need to create several classes in JavaScript but, if I'm not mistaken, there are at least a couple of ways to go about doing that. What would be the syntax and why would it be done in that way?

I would like to avoid using third-party libraries - at least at first.
Looking for other answers, I found the article Object-Oriented Programming with JavaScript, Part I: Inheritance - Doc JavaScript that discusses object-oriented programming in JavaScript. Is there a better way to do inheritance?

 Answers

97

Here's the way to do it without using any external libraries:

// 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"

Now the real answer is a whole lot more complex than that. For instance, there is no such thing as classes in JavaScript. JavaScript uses a prototype-based inheritance scheme.

In addition, there are numerous popular JavaScript libraries that have their own style of approximating class-like functionality in JavaScript. You'll want to check out at least Prototype and jQuery.

Deciding which of these is the "best" is a great way to start a holy war on Stack Overflow. If you're embarking on a larger JavaScript-heavy project, it's definitely worth learning a popular library and doing it their way. I'm a Prototype guy, but Stack Overflow seems to lean towards jQuery.

As far as there being only "one way to do it", without any dependencies on external libraries, the way I wrote is pretty much it.

Tuesday, June 1, 2021
 
shin
answered 6 Months ago
56

They might not classify as "simple frameworks" because they are third-party modules that need to be installed but there are two frameworks I often use:

  • simple_benchmark (I'm the author of that package)
  • perfplot

For example the simple_benchmark library allows to decorate the functions to benchmark:

from simple_benchmark import BenchmarkBuilder
b = BenchmarkBuilder()

import pandas as pd
import numpy as np
from numba import njit

@b.add_function()
def sum_pd(df):
    return df.groupby('Group').Value.sum()

@b.add_function()
def sum_fc(df):
    f, u = pd.factorize(df.Group.values)
    v = df.Value.values
    return pd.Series(np.bincount(f, weights=v).astype(int), pd.Index(u, name='Group'), name='Value').sort_index()

@njit
def wbcnt(b, w, k):
    bins = np.arange(k)
    bins = bins * 0
    for i in range(len(b)):
        bins[b[i]] += w[i]
    return bins

@b.add_function()
def sum_nb(df):
    b, u = pd.factorize(df.Group.values)
    w = df.Value.values
    bins = wbcnt(b, w, u.size)
    return pd.Series(bins, pd.Index(u, name='Group'), name='Value').sort_index()

Also decorate a function that produces the values for the benchmark:

from string import ascii_uppercase

def creator(n):  # taken from another answer here
    letters = list(ascii_uppercase)
    np.random.seed([3,1415])
    df = pd.DataFrame(dict(
            Group=np.random.choice(letters, n),
            Value=np.random.randint(100, size=n)
        ))
    return df

@b.add_arguments('Rows in DataFrame')
def argument_provider():
    for exponent in range(4, 22):
        size = 2**exponent
        yield size, creator(size)

And then all you need to run the benchmark is:

r = b.run()

After that you can inspect the results as plot (you need the matplotlib library for this):

r.plot()

enter image description here

In case the functions are very similar in run-time the percentage difference instead of absolute numbers could be more important:

r.plot_difference_percentage(relative_to=sum_nb) 

enter image description here

Or get the times for the benchmark as DataFrame (this needs pandas)

r.to_pandas_dataframe()
           sum_pd    sum_fc    sum_nb
16       0.000796  0.000515  0.000502
32       0.000702  0.000453  0.000454
64       0.000702  0.000454  0.000456
128      0.000711  0.000456  0.000458
256      0.000714  0.000461  0.000462
512      0.000728  0.000471  0.000473
1024     0.000746  0.000512  0.000513
2048     0.000825  0.000515  0.000514
4096     0.000902  0.000609  0.000640
8192     0.001056  0.000731  0.000755
16384    0.001381  0.001012  0.000936
32768    0.001885  0.001465  0.001328
65536    0.003404  0.002957  0.002585
131072   0.008076  0.005668  0.005159
262144   0.015532  0.011059  0.010988
524288   0.032517  0.023336  0.018608
1048576  0.055144  0.040367  0.035487
2097152  0.112333  0.080407  0.072154

In case you don't like the decorators you could also setup everything in one call (in that case you don't need the BenchmarkBuilder and the add_function/add_arguments decorators):

from simple_benchmark import benchmark
r = benchmark([sum_pd, sum_fc, sum_nb], {2**i: creator(2**i) for i in range(4, 22)}, "Rows in DataFrame")

Here perfplot offers a very similar interface (and result):

import perfplot
r = perfplot.bench(
    setup=creator,
    kernels=[sum_pd, sum_fc, sum_nb],
    n_range=[2**k for k in range(4, 22)],
    xlabel='Rows in DataFrame',
    )
import matplotlib.pyplot as plt
plt.loglog()
r.plot()

enter image description here

Thursday, June 10, 2021
 
keisar
answered 6 Months ago
81

There are various problems in your code. Let me try to explain them.

First it is highly recommended to not put opening block braces on a single line in JavaScript. Why you may ask? Well run those two code snippets:

// using "braces on same line" style
(function () {
  return {
    key: 'value'
  };
})();

// using "braces on line by themself"-style
(function ()
{
  return 
  {
    key: 'value'
  }
})();

Both snippets will return different results, allthough the only difference is positioning of braces. The reason for this is semicolon insertion. In JavaScript semicolons are optional. So if the parser finds a newline character and the construct infront of the newline makes sense, it will insert a semicolon. In the second example this is what happens after the return statement. If you place your braces on the same line as the previous statement, you can circumvent such bugs.

The next thing you got wrong is that JavaScript has classes. JavaScript is an object oriented language, but unlike most other object oriented languages it does not have classes. In JavaScript objects inherit directly from other objects (their so called prototypes). What you currently arre referring to as a class is in reality a constructor function, which when invoked using the new keyword will create a new object, that will inherit from whatever object is stored in the constructors prototype field.

var anObject = {
  key: 'value'
};
function MakeAnObject() {
}

MakeAnObject.prototype = anObject;

var o = new MakeAnObject();

console.log(o.key); // will output 'value'

If you set a property, the proerty will alwas be set on the object itself, it will never access the prototype chain, when setting a property.

If you read a property from an object, that does not have that property, JavaScript will search the objects prototype chain (that is all the objects that inherit from each other) for that property and returns it if found.

If an oject has a property itself, it's prototype chain will not be searched, so you can "override" an objects inherited properties by setting the porperty on the objects self.

Look at the following example:

function MakeThing() {
}

MakeThing.prototype = {
  key: 'value'
};

var o1 = new MakeThing(), o2 = new MakeThing();

console.log(o1); // will output 'value'
console.log(o2); // will output 'value'

o2.key = 'other';

console.log(o1); // will output 'value'
console.log(o2); // will output 'other'

MakeThing.prototype.key = 'changed';

console.log(o1); // will output 'changed'
console.log(o2); // will output 'other'

delete o2.key;

console.log(o1); // will output 'changed'
console.log(o2); // will output 'changed'

With all that in mind I will have to tell you: there is no such thing as public and private members on an object in JavaScript. Members will always be public. There are some patterns which try to hide away certain information in an object using closures, but they function very different than private members in a traditional programming language. And worse: those patterns are clunky, produce terrible and very bad performing code. I suggest do not use them if you do not absoltuely require to.

So, what does all this mean? Well firstly, if you want to share attributes and methods between multiple objects, they will have to inherit from the same prototype and that prototype must contain those attributes and methods. Secondly if you set something on this it will be set on the current instance, not on the prototype. Thirdly have priavte and public members only by convention. If you absolutely require certain information to be strictly hidden from a certain subsystem, there are patterns for this (Crockford sealer unsealer should yield useable results).

All that said here a quick try at fixing your objects:

function BaseAAR {
    this._arr = []; // note >this<. You created a global array in your code.
};

BaseAAR.prototype.add = function(arg) {
    var i, addAt;

    // always use identity (triple) operators when comparing to null!
    if (arg === null || (addAt = this.findEnterPos(arg))<0)
        return false;

// since adding and not deleting anything, nothing of value will be returned
    this._arr.splice(addAt, 0, arg);
    return true;
};
    // This finds the entry position for in
BaseAAR.prototype.findEnterPos = function() {
return (this._arr.length + 1);
};
BaseAAR.prototype.arrayGet = function(i) {
    return ((this._arr !== null && i >= 0 && i < this._arr.length) ? this._arr[i] : null);
};


function StringIdAAR(id, str) {
    BaseAAR.call(this); // invoke the constructor of the base object
    this.m_Id = id; // int
    this.m_String = str; // string
}

StringIdAAR.prototype = BaseAAR.prototype; // innherit from StringIdAAR prototype

I am not completely sure if this code actually still does what you want it to do, but you should get the point how object oriented patterns in JavaScript should look like. If you want to read more on how to write good JavaScript you should absolutely get the book "JavaScript: The Good Parts" by Douglas Crockford.

UPDATE: I also wrote an article on JavaScript object orientation and prototype based inheritance. This might be of interest for anybody passing by here.

Wednesday, August 11, 2021
 
Rudie
answered 4 Months ago
51

You can use the Android logging

#include <android/log.h>

#define APPNAME "MyApp"

__android_log_print(ANDROID_LOG_VERBOSE, APPNAME, "My Log");

Also Make sure you also link against the logging library, in your Android.mk file:

LOCAL_LDLIBS := -llog

It has already been discussed at Any simple way to log in Android NDK code?

Tuesday, September 14, 2021
 
Abdel
answered 3 Months ago
80
myObject.prototype.test = function() {
    // this works
    alert(this.name);
    var oThis = this;
    var intervalId = setInterval(function() {
        // this does not work
        alert(oThis.name);

        clearInterval(intervalId);
    },0);
}

This should work. The anonymous function's "this" is not the same "this" as your myObject's "this."

Monday, November 15, 2021
 
shin
answered 2 Weeks ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share