Use the extends keyword or spread syntax to extend the object in JavaScript. Do extend the classes to create a child of another class.
class childclass extends parentclass {
...}
class parentclass extends in-built object {
...}JavaScript extends Object
For simple example code child class uses properties of the parent class using the keyword extends and by creating objects of the child class.
<!DOCTYPE html>
<html>
<body>
<script>
class Profile {
constructor(name, age) {
this.name = name;
this.age = age;
}
getName() {
return this.name;
}
getAge() {
return this.age;
}
getClass() {
return this;
}
}
class Student extends Profile {
constructor(name, age, languages) {
super(name, age);
this.lang = [...languages];
}
getDetails() {
console.log("Name : " + this.name);
console.log("Age : " + this.age);
console.log("Languages : " + this.lang);
}
}
// Creating object
var s1 = new Student("John", 25,
['Java', 'Python', 'PHP', 'JS']);
s1.getDetails();
</script>
</body>
</html>
Output:
Using spread syntax to extend two objects into one
<script>
// Creating first object
var obj1 = {
name: 'John',
age: 25
};
// Creating second object
var obj2 = {
name: 'Steve',
marks: 50
};
var object = {
...obj1,
...obj2
};
console.log(object);
</script> Output: Object { name: “Steve”, age: 25, marks: 50 }
Use jQuery’s $.extend
var BI = BI || {};
BI = {
firstInit: function () {
console.log('I am first init');
}
}
$.extend(BI, {
init: function () {
console.log('I am init');
}
});
console.log(BI);Inheritance (prototype-based): JavaScript uses a prototype-based inheritance model. You can extend objects by creating a new object that inherits from an existing one.
// Parent object
function Animal(name) {
this.name = name;
}
// Adding a method to the parent object
Animal.prototype.sayHello = function() {
console.log(`Hello, I'm ${this.name}`);
};
// Child object inheriting from the parent
function Dog(name, breed) {
Animal.call(this, name); // Call the parent constructor
this.breed = breed;
}
// Inherit the prototype from the parent
Dog.prototype = Object.create(Animal.prototype);
// Adding a method to the child object
Dog.prototype.bark = function() {
console.log("Woof!");
};
// Creating instances
const myAnimal = new Animal("Generic Animal");
const myDog = new Dog("Buddy", "Golden Retriever");
myAnimal.sayHello(); // Output: Hello, I'm Generic Animal
myDog.sayHello(); // Output: Hello, I'm Buddy
myDog.bark(); // Output: Woof!
Adding Properties and Methods to an Object: You can also extend an object by directly adding properties or methods to it:
// Existing object
const myObject = {
name: "My Object",
sayHello: function() {
console.log(`Hello, I'm ${this.name}`);
}
};
// Adding a new property
myObject.age = 25;
// Adding a new method
myObject.greet = function() {
console.log("Greetings!");
};
myObject.sayHello(); // Output: Hello, I'm My Object
console.log(myObject.age); // Output: 25
myObject.greet(); // Output: Greetings!
In the examples above, you can see how objects can be extended either through inheritance or by directly adding properties and methods to them. Choose the method that best fits your use case.
Comment if you have any doubts or suggestions on this Js object topic.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version