Home >Web Front-end >JS Tutorial >In-depth understanding of objects in JavaScript_Basic knowledge

In-depth understanding of objects in JavaScript_Basic knowledge

WBOYOriginal: 2016-05-16 15:56:471146browse

JavaScript is an object-oriented programming (OOP) language. A programming language can be called object-oriented and provides four basic capabilities to developers:

Encapsulation - stores relevant information, whether it is data or methods, or objects
Aggregation - Store one object inside another object
Inheritance - the ability of a class to depend on another class (or classes) for some of its properties and methods
Polymorphism - writing functions or methods that work in a variety of different ways

Objects are made up of properties. If a property contains a function, it is considered a method of an object, otherwise, the property is considered a property.
Object properties:

The properties of an object can be of any of the three basic data types, or any abstract data type, such as another object. Object properties are usually variables used internally by methods of the object, but can also be variables that are used globally and visible throughout the page.

The syntax for adding attributes is:

objectName.objectProperty = propertyValue;

Example:

The following is a simple example to illustrate how to use the "title" property of the file object to get the document title:

var str = document.title;

Object methods:

Methods tell an object to do something. There is little difference between a function and a method, except that a function statement is an independent unit and the method is attached to the object and can be referenced through this keyword.

Methods can be useful for everything from displaying an object's on-screen content to performing complex mathematical operations on a local set of properties and parameters.
Example:

Here is a simple example to illustrate how to use the write() method of the document object to write any content in the document:

document.write("This is test");

User-defined objects:

All user-defined objects and built-in objects are called descendants of objects.
new operator:

The new operator is used to create instances of objects. To create an object, the new operator is followed by the constructor method.

In the following example, the constructor methods Object(), Array(), and Date(). These constructors are built-in JavaScript functions.

var employee = new Object();
var books = new Array("C++", "Perl", "Java");
var day = new Date("August 15, 1947");

Object() constructor:

Constructor is a function used to create and initialize objects. JavaScript provides a special constructor called Object() to construct objects. The return value of the Object() construct is assigned to a variable.

The variable contains a reference to the new object. Properties assigned to this object are invariants and are not defined using the var keyword.
Example 1:

This example demonstrates how to create an object:

<html>
<head>
<title>User-defined objects</title>
<script type="text/javascript">
var book = new Object();  // Create the object
  book.subject = "Perl"; // Assign properties to the object
  book.author = "Mohtashim";
</script>
</head>
<body>
<script type="text/javascript">
  document.write("Book name is : " + book.subject + "<br>");
  document.write("Book author is : " + book.author + "<br>");
</script>
</body>
</html>

Example 2:

This example demonstrates how to create an object and a user-defined function. Here the this keyword is used to refer to the object that has been passed to the function:

<html>
<head>
<title>User-defined objects</title>
<script type="text/javascript">
function book(title, author){
  this.title = title; 
  this.author = author;
}
</script>
</head>
<body>
<script type="text/javascript">
  var myBook = new book("Perl", "Mohtashim");
  document.write("Book title is : " + myBook.title + "<br>");
  document.write("Book author is : " + myBook.author + "<br>");
</script>
</body>
</html>

Object defining method:

The previous example demonstrates how a constructor creates an object and assigns properties. However, we need to use the allocation method to complete the definition of an object.
Example:

Here is a simple example to illustrate how to add a function with an object:

<html>
<head>
<title>User-defined objects</title>
<script type="text/javascript">

// Define a function which will work as a method
function addPrice(amount){
  this.price = amount; 
}

function book(title, author){
  this.title = title; 
  this.author = author;
  this.addPrice = addPrice; // Assign that method as property.
}

</script>
</head>
<body>
<script type="text/javascript">
  var myBook = new book("Perl", "Mohtashim");
  myBook.addPrice(100);
  document.write("Book title is : " + myBook.title + "<br>");
  document.write("Book author is : " + myBook.author + "<br>");
  document.write("Book price is : " + myBook.price + "<br>");
</script>
</body>
</html>

with keyword:

The with keyword is used as a shorthand to refer to the properties or methods of an object.

The object specified as a parameter becomes the default object for the duration of the following block. Properties and methods for objects can be found on unnamed objects.
Grammar

with (object){
  properties used without the object name and dot
}

Example:

<html>
<head>
<title>User-defined objects</title>
<script type="text/javascript">

// Define a function which will work as a method
function addPrice(amount){
  with(this){
    price = amount; 
  }
}
function book(title, author){
  this.title = title; 
  this.author = author;
  this.price = 0;
  this.addPrice = addPrice; // Assign that method as property.
}
</script>
</head>
<body>
<script type="text/javascript">
  var myBook = new book("Perl", "Mohtashim");
  myBook.addPrice(100);
  document.write("Book title is : " + myBook.title + "<br>");
  document.write("Book author is : " + myBook.author + "<br>");
  document.write("Book price is : " + myBook.price + "<br>");
</script>
</body>
</html>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of the use of while loop in JavaScript_Basic knowledgeNext article：Detailed explanation of the use of while loop in JavaScript_Basic knowledge

See more

In-depth understanding of objects in JavaScript_Basic knowledge

Related articles