Objects In JavaScript

"If you are cautious at the beginning, nothing will be lost."

Understanding Objects

Before we start to learn how JavaScript treats objects, we should spend some time on an object-oriented paradigm.Like most programming paradigms, object-oriented programming (OOP) also emerged from the need to manage complexity. I can give you an example:

When you drive a car, you can operate on the interface -- the steering, brake, etc. Your view of using the car is limited by this interface, which makes it possible for us to drive the car. In fact, this interface is hiding all the complex systems that drive the car really. If you are a driver, you don't need to understant the working principle of the car. All you need to do is to operate the interface.

There are seven data types in JavaScript: undefined, null, boolean, number, string, symbol, and object. We can use that "typeof" function to check the data type of a data. "Typeof " operator can return any data type. I mainly introduce JavaScript Objects in this blog.

Everything is an object in JavaScript, including strings, numbers, arrays, dates, etc. In JavaScript, objects are data with attributes and methods.

Attributes and Methods

An attribute is a value related to object. A method is an action that can be performed in an object,

such as the attributes of cars:

car.name = fiat
car.model = 500
car.weight = 800kg
car.color = white

and the methods of cars:

car.start()
car.drive()
car.brake()

A Misunderstanding of Object

Many treat number, string, boolean, null, undefined, symbol data types as the non-object. Actually, these data types are object-like data.For example, when you declare a variable like this:

var docx = "hello！"

You have already created a string object in JavaScript. You can gets the string length via using the built-in "length" attribute. For the above string, the value of "length" attribute is 6. In addition, a string object also contain many built-in methods at the same time.

docx.indexOf()
docx.research()
docx.repalce()
...

How to create an object?

You can declare an object like this:

<!DOCTYPE html>
<html>
    <head>
        <title>How to creat an object?</title>
        <meta charset = "UTF-8"/>
     </head>
    <body>
        <script language = "javascript">
            var Person = new Object();
            Person.name = Gabriel Garcia Marquez;
            Person.age = 87;
            Person.occupation = writer;
        </script>
    </body>
</html>

In the example above, an object and a property are created. And this Person object contains name, age, occupation attributes.

Function

Any Function is an object. So creat a function is similar to creating an object. It is worth mentioning that the attribute value of an object can be of any data type, including an object naturally. Since it includes objects, it can also be a function. In JavaScript, when attribute value of an object is a function, we call it a method.

You can create a function like this:

<!DOCTYPE html>
<html>
    <head>
        <title>How to creat an obiect?</title>
        <meta charset = "UTF-8"/>
     </head>
    <body>
        <script language = "javascript">
            var fun = function(){
                document.write("123");
            };   //Because this is an equation, we need add a semicolon after braces to indicate the end of the sentence.
            //You can call the function you create like this:
            fun();
        </script>
    </body>
</html>

You can create a method like this:

<!DOCTYPE html>
<html>
    <head>
        <title>How to creat an obiect?</title>
        <meta charset = "UTF-8"/>
     </head>
    <body>
        <script language = "javascript">
            var Person = new Object();
            Person.name = Gabriel Garcia Marquez;
            Person.age = 87;
            Person.occupation = writer;
            Person.sayAge = function(){
                document.write(Person.age);
            };
            //You can call this a method you create like this:
            Person.sayAge();
        </script>
    </body>
</html>

Besides, a function stores a piece of executable code, and a function will return a value at the end of execution. The value returned will be used as the value of the piece of execution code. To use this value, you need to add a return statement after the end of the piece of execution code. But here are some questions again: What if I want to calculate the sum of any two numbers? How to pass two parameters?

I wonder if you have noticed that the bracket is empty. What is its function? Obviously, its function is to pass parameters. You can calculate the value of 1 plus 2 like this:

<!DOCTYPE html>
<html>
    <head>
        <title>How to creat an obiect?</title>
        <meta charset = "UTF-8"/>
     </head>
    <body>
        <script language = "javascript">
            //At first, create an object.
            var obj = new Object();
            //Next, create a method.
            obj.calculator=function(a,b){
                    var sum = a + b;
                    return sum;
            }
            /*Of course, if you want to write more concisely, you can also write like this.
             *var obj = new object();
             *obj.calculate = function(a,b){
             *       return a + b;
             *}
             */
            m = obj.calculate(1,2)
            console.log(m)
        </script>
    </body>
</html>

To be continued......