Which Javascript Prototype Definition Method is Better: Named Function Expression or Object Literal Assignment?

Defining a Javascript Prototype: A Comparison of Two Methods

When defining prototypes in Javascript, developers have two primary options: using a named function expression or an object literal assignment. These methods serve different purposes and have varying implications on the inheritance of prototype members.

Option 1: Named Function Expression

Person.prototype.sayName = function(name) {
   alert(name);
}

This syntax extends the existing prototype object by adding a new property called sayName. If instances of the Person class already exist, they will inherit this new method. However, pre-existing prototype members remain unaffected.

Option 2: Object Literal Assignment

Person.prototype = {
   sayName: function(name) {
      alert(name);
   }
}

Unlike Option 1, this method overwrites the entire prototype object with a new object literal. Consequently, any pre-existing prototype members are lost, including the default constructor function. This can lead to unexpected behavior if there are already instances of the class relying on those members.

Functional Differences

The primary functional difference between the two methods is that Option 1 modifies the prototype of all existing instances, while Option 2 only affects instances created after the overwriting.

Benefits of Choosing One Over the Other

Option 1 is considered cleaner and more efficient, as it allows for targeted extension of the prototype object without altering its existing members. Option 2, on the other hand, has the risk of accidentally overwriting important prototype functions.

For extending foreign or native prototypes, Option 1 is recommended to avoid unexpected consequences. If the object literal syntax is preferred, Object.assign() or similar utility functions can be used to safely extend the prototype:

Object.assign(Person.prototype, {
   sayName: function(name) {
      alert(name);
   }
});

The above is the detailed content of Which Javascript Prototype Definition Method is Better: Named Function Expression or Object Literal Assignment?. For more information, please follow other related articles on the PHP Chinese website!