JS Tutorial
JS Version
JS Objects
JS Function
JS Classes
JS Async
JS HTML DOM
JS Browser BOM
JS Web API
JS AJAX
JS JSON
JS vs JQUERY
JS Graphics
Object Methods
Example
<!DOCTYPE html>
<html>
<body>
<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example, <b>this</b> refers to the <b>person</b> object.</p>
<p>Because <b>fullName</b> is a method of the person object.</p>
<p id=”demo”></p>
<script>
// Create an object:
const person = {
firstName: “John”,
lastName: “Doe”,
id: 5566,
fullName : function() {
return this.firstName + ” ” + this.lastName;
}
};
// Display data from the object:
document.getElementById(“demo”).innerHTML = person.fullName();
</script>
</body>
</html>
Output
The JavaScript this Keyword
In this example, this refers to the person object.
Because fullName is a method of the person object.
John Doe
What is this?
In JavaScript, this keyword refers to an object.
This keyword refers to different objects depending on how it is used:
- In an object method, this refers to the object.
- this refers to the global object.
- In a function, this refers to the global object.
- In a function, in strict mode, this is undefined.
- In an event, this refers to the element that received the event.
- Methods like call(), apply(), and bind() can refer to any object.
JavaScript Methods
JavaScript methods are defined as actions that can be performed on objects.
A JavaScript method is a property that consists of a function definition.
Property | Value |
firstName | John |
lastName | Doe |
age | 50 |
eyeColor | blue |
fullName | function() {return this.firstName + ” ” + this.lastName;} |
Accessing Object Methods
You access an object method with the following syntax:
objectName.methodName()
You will typically describe fullName() as a method of the person object, and fullName as a property.
The fullName property is executed (as a function) when it is invoked with ().
This example accesses the fullName() method of a person object:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p>Creating and using an object method.</p>
<p>A method is actually a function definition stored as a property value.</p>
<p id=”demo”></p>
<script>
const person = {
firstName: “John”,
lastName: “Doe”,
id: 5566,
fullName: function() {
return this.firstName + ” ” + this.lastName;
}
};
document.getElementById(“demo”).innerHTML = person.fullName();
</script>
</body>
</html>
Output
JavaScript Objects
Creating and using an object method.
A method is actually a function definition stored as a property value.
John Doe
If you access the fullName property, without (), it returns the function definition:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p>An object method is a function definition stored as a property value.</p>
<p>If you access it without (), it will return the function definition:</p>
<p id=”demo”></p>
<script>
const person = {
firstName: “John”,
lastName: “Doe”,
id: 5566,
fullName: function() {
return this.firstName + ” ” + this.lastName;
}
};
document.getElementById(“demo”).innerHTML = person.fullName;
</script>
</body>
</html>
Output
JavaScript Objects
An object method is a function definition stored as a property value.
If you access it without (), it will return the function definition:
function() { return this.firstName + " " + this.lastName; }
Adding a Method to an Object
Adding a new method to an object is easy:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p id=”demo”></p>
<script>
const person = {
firstName: “John”,
lastName: “Doe”,
id: 5566,
};
person.name = function() {
return this.firstName + ” ” + this.lastName;
};
document.getElementById(“demo”).innerHTML =
“My father is ” + person.name();
</script>
</body>
</html>
Output
JavaScript Objects
My father is John Doe
Using Built-In Methods
This example uses the toUpperCase() method of the String object, to convert a text to uppercase:
let message = “Hello world!”;
let x = message.toUpperCase();
The value of x, after execution of the code above, will be:
HELLO WORLD!
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p id=”demo”></p>
<script>
const person = {
firstName: “John”,
lastName: “Doe”,
id: 5566,
};
person.name = function() {
return (this.firstName + ” ” + this.lastName).toUpperCase();
};
document.getElementById(“demo”).innerHTML =
“My father is ” + person.name();
</script>
</body>
</html>
Output
JavaScript Objects
My father is JOHN DOE