vl - more on prototypes

Prototype Object in JavaScript

• Functions as Objects

  • In JavaScript, functions are treated as objects.

  • Functions can have properties and methods.

• Link Property

  • There is a property called length that indicates the number of arguments a function can accept.

  • Example: If a function is defined to take two arguments, the result of functionName.length will yield 2.

• Prototype Property

  • Every function has a .prototype property, which is initially an empty object.

  • Accessing Prototype: Using typeof foo.prototype returns object, indicating it is an object type.

  • Properties and methods can be added to this prototype.

• Using Prototype in Constructors

  • For any properties or methods added to the prototype to be effective, the function must be called as a constructor (using new keyword).

  • Example: Create a function named gadget that accepts parameters name and color.

  • Adding properties: Gadget.prototype.price = 100;

  • Adding methods: Gadget.prototype.getInfo = function() {...}.

  • When an instance is created using the new keyword, it can access prototype properties and methods.

  • Example: var newToy = new Gadget();

  • Accessing price: newToy.price would return 100.

• Live Nature of Prototypes

  • The prototype is 'live,' meaning changes to the prototype will affect all existing instances, even those created before changes were made.

  • If a new method is added to the prototype, it will be available on all existing instances of the object type.

• Checking Prototypes - isPrototypeOf Method

  • To determine if a prototype is used by an object, the isPrototypeOf method can be employed.

  • Example:

  • Create a constructor function called human that takes one argument, name.

  • Set the prototype of human to another object (e.g., monkey).

  • When creating a new human object, the statement monkey.isPrototypeOf(george) returns true if 'george' is an instance of human.

• Prototype Chain

  • If a property or method isn’t found on an object, JavaScript checks the prototype chain to find it.

  • Example: If developer does not have a toString method, the engine will check human, then monkey, and finally object for that method.

• Creating Instances and Adding Properties

  • Properties can also be added directly to object instances.

  • Example: Define a new object developer as an instance of human.

  • Example of adding property: developer.drinks = 'Red Bull';

    • If drinks does not exist on human, prototype inheritance allows it to be accessed if defined on monkey.

• Modifying Built-in Objects

  • JavaScript allows you to augment built-in types by adding methods to their prototypes. This can enhance functionality.

  • Example: Add a method to the Array.prototype for searching within arrays.

  • Define Array.prototype.contains = function(needle) { ... }; to check for an item in the array.

  • Use a loop, ensuring to minimize performance overhead by storing this.length in a variable rather than calling this.length repeatedly.

• Caution on Prototype Modifications

  • Although enhancing prototypes can be powerful, it should be done carefully and judiciously.

  • Use this technique sparingly, especially when beginning, to avoid unintended consequences.

• Conclusion

  • Future discussions will cover actual inheritance in JavaScript, building on these principles.