Home > Web Front-end > JS Tutorial > An in-depth analysis of the object concept in JavaScript programming_Basic knowledge

An in-depth analysis of the object concept in JavaScript programming_Basic knowledge

WBOY
Release: 2016-05-16 15:35:41
Original
1193 people have browsed it

Everything in JavaScript is an object: strings, numbers, arrays, functions...
Additionally, JavaScript allows custom objects.
Everything is an object
JavaScript provides several built-in objects, such as String, Date, Array, etc. Objects are just special data types with properties and methods.

  • Boolean type can be an object
  • Number type can be an object
  • A string can also be an object
  • Date is an object
  • Math and regular expressions are also objects
  • An array is an object
  • Even functions can be objects

JavaScript Object

Objects are just a special kind of data. Objects have properties and methods.
Accessing the properties of an object
Attributes are values ​​associated with objects.
The syntax for accessing object properties is:

objectName.propertyName
Copy after login


This example uses the length property of the String object to obtain the length of the string:

var message="Hello World!";
var x=message.length;
Copy after login


After the above code is executed, the value of x will be:

12
Copy after login

Methods to access objects
Methods are actions that can be performed on an object.
You can call methods with the following syntax:

objectName.methodName()
Copy after login


This example uses the String object’s toUpperCase() method to convert text to uppercase:

var message="Hello world!";
var x=message.toUpperCase();
Copy after login


After the above code is executed, the value of x will be:

HELLO WORLD!
Copy after login

Create JavaScript object
JavaScript enables you to define and create your own objects.
There are two different ways to create new objects:

  1. Define and create instances of objects
  2. Use functions to define objects and then create new object instances

Create a direct instance
This example creates a new instance of the object and adds four properties to it:
Example

person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue";
Copy after login


Alternative syntax (using object literals):
Example

person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};
Copy after login


Use object constructor
This example uses functions to construct objects:
Example

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
Copy after login

In JavaScript, this usually points to the function itself we are executing, or to the object to which the function belongs (runtime)
Create JavaScript object instance
Once you have the object constructor, you can create new object instances like this:

var myFather=new person("John","Doe",50,"blue");
var myMother=new person("Sally","Rally",48,"green");
Copy after login

Add properties to JavaScript objects
You can add new properties to an existing object by assigning a value to the object:
Assuming personObj already exists - you can add these new properties to it: firstname, lastname, age and eyecolor:

person.firstname="John";
person.lastname="Doe";
person.age=30;
person.eyecolor="blue";

x=person.firstname;
Copy after login


After the above code is executed, the value of x will be:

John
Copy after login

Add methods to JavaScript objects
Methods are nothing more than functions attached to an object.
Define object methods inside the constructor function:

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;

this.changeName=changeName;
function changeName(name)
{
this.lastname=name;
}
}

Copy after login

changeName() The value of function name is assigned to the lastname attribute of person.
Now you can try it:

myMother.changeName("Doe");
Copy after login

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template