vl - this and construcotr functions

Understanding Object Creation in JavaScript

Introduction to Objects

  • Objects in JavaScript are fundamental data structures that hold key-value pairs.

  • Accessing values in an object requires the object variable name followed by the property name.

Previous Example of a Hero Object

  • Created a hero object previously, accessing its values through specified variable names.

  • Example: When using the variable name hero to access the name property:

    • hero.name returns the value Leonardo.

Using this Keyword

  • Definition: The this keyword refers to the current instance of an object within a method of a class.

  • Implication: Avoid hard coding variable names into the program since a variable name may change.

    • Benefits of using this: Makes code reusable and adaptable to different object instances.

  • Example: If a variable hero is defined, a method can use this.name instead:

    • Instead of return hero.name, you can use return this.name for a more robust syntax.

  • Conclusion: Always use this to reference attributes of the object that the method belongs to.

Object Creation Methods

  • Discusses two primary methods for object creation: Object Literal Syntax and Constructor Functions.

Object Literal Syntax

  • Simplicity in creating single objects but not suitable for larger-scale object creation.

  • Issue: Tediousness when creating multiple instances, e.g., creating 100 albums.

Constructor Functions

  • Definition: Constructor Functions create multiple object instances from a blueprint.

  • May be defined using the function keyword but with an important distinction: starts with an uppercase letter.

    • Example: function Hero()

  • Object attributes are defined using the this keyword:

    • Example:
      this.occupation = 'ninja';

  • To create an instance of a Hero:

    • var hero1 = new Hero();

    • Example access: hero1.occupation returns 'ninja'.

  • Each time a constructor function is invoked with the new keyword, a new object is created with its own properties.

Constructor Function with Parameters

  • Constructor functions can accept parameters to provide values while creating object instances:

    • Example Definition:
      javascript function Hero(name, occupation) { this.name = name; this.occupation = occupation; }

  • Created heroes with different properties:

    • var h1 = new Hero('Michelangelo', 'ninja');

    • h1.name will return 'Michelangelo'; h1.occupation will return 'ninja'.

    • If no occupation is passed, h1.occupation would return undefined by default.

Multiple Instances

  • You can create separate instances of objects even if using the same constructor function:

    • Example:

    • var h2 = new Hero('Leonardo', 'cook');

    • Access properties: h2.name could return 'Leonardo' and h2.occupation will return 'cook'.

  • Importance of keeping each object independent with unique properties.

Conclusion

  • Understanding the use of the this keyword and the capabilities of constructor functions is key in efficiently creating and managing objects in JavaScript.

  • The next session will address global logic and how to further enhance object handling in JavaScript.

Call to Action

  • Encourage further study and practice with object creation in JavaScript, using both Object Literal and Constructor Function methods.