Home > Article > Web Front-end > Detailed explanation of object properties, methods, user-defined object definitions and usage in JavaScript

Detailed explanation of object properties, methods, user-defined object definitions and usage in JavaScript

伊谢尔伦Original: 2018-05-16 14:08:204660browse

Objects are composed 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 used globally and visible throughout the page.

The purpose syntax for adding attributes is:

objectName.objectProperty = propertyValue;

Example:

The following is a simple example to illustrate how to use the "title" attribute of the file object to obtain Document title:

var str = document.title;

Methods of objects:

Methods let objects 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 set of local 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 object :

All user-defined objects and built-in objects are called descendants of the object's 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:

The 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, 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>

The object on which the method is defined:

The previous example demonstrates how the constructor creates an object and Assign attributes. 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 Keywords:

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>

The above is the detailed content of Detailed explanation of object properties, methods, user-defined object definitions and usage in JavaScript. For more information, please follow other related articles on the PHP Chinese website!

JavaScript 数据类型 Array Object 运算符构造函数 date var function 对象 this

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 clone object/function code in javascriptNext article：Detailed explanation of clone object/function code in javascript

See more

Detailed explanation of object properties, methods, user-defined object definitions and usage in JavaScript

Related articles