javascript learning notes 08 (facing objects)

Programming thought: integrate some experience of doing things in life into the program

Process oriented: do everything by yourself, focusing on the process.

Object oriented: find objects according to requirements, do everything with objects, and focus on results

Object oriented features: encapsulation, inheritance, polymorphism (abstraction)

JavaScript is not an object-oriented language, but an object-oriented language. It can be regarded as an object-oriented idea

Everything is object  --->  js advanced

What is an object? Something that can be seen or touched

Characteristics of the analysis object:

features  --->  attribute

behavior  --->  method

There are three ways to create objects:

        --   Call the system constructor to create the object

                var obj = new Object();

                -  Add / set attribute: object. Attribute name  =  Value;

                -  Add / set method: object. Method name  =  Anonymous function;

                 Data storage form: key value pair

        var ojb = new Object()
        ojb.name = 'Xiao Ming';
        ojb.age = 19;
        ojb.jn = function(){
            console.log("I am" + ojb.name + "I" + ojb.age + "year")
        }
        console.log(ojb);   
        ojb.jn()

     

        --  Creating objects with custom constructors

                 Define a constructor yourself

                 The difference between a function and a constructor: the constructor's name is capitalized

        function Dx(name, age){
            this.name = name,
            this.age = age,
            this.jn = function (){
                console.log("I am" + this.name + "I" + this.age + "year")
            }
        }
        var cl = new Dx("Xiao Ming",19);
        console.log(cl)
        cl.jn();

        --   Create objects literally (two methods)

              Method 1:

        var cl = {};
        cl.name = "Xiao Ming";
        cl.age = 19;
        cl.jn = function(){
            console.log("I am" + this.name + "I" + this.age + "year")
        }
        console.log(cl);
        cl.jn();

                Method 2:

        var cl = {
            name : "Xiao Ming",
            age : "19",
            jn : function(){
                console.log("I am" + this.name + "I" + this.age + "year")
            }
        }
        console.log(cl)
        cl.jn();

The results of the above codes are:

Create objects in factory mode

There is a way to combine the above methods to create objects in batches in a factory

        function dog(color, breed, age, jn){
            var obj = new Object();
            obj.color = color,
            obj.breed = breed,
            obj.age = age,
            obj.jn = function(){
                console.log(jn);
            };
            return obj;
        }
        mao1 = new mao("gules", "Siberian Husky", 2 , "Catch fish");
        mao2 = new mao("yellow", "Golden hair", 5, "sleep");
        console.log(mao1);
        console.log(mao2);
        mao1.jn();
        mao2.jn()

Three objects for JavaScript learning:

1. Built in objects -- objects of JavaScript system: Math, Date, String, Array, Object

2. Custom object --- the object created by the constructor defined by yourself

3. Browser object

Instance object: an object created by constructor

Static object: it does not need to be created. It is an object directly. Methods / attributes can be called directly through the method name

Math objects: static objects

            -  Math.PI   Pi Pi

            -  Math.floor (value)   Round down

            -  Math.ceil (value)   Round up

            -  Math.abs (value)   absolute value

            -  Math.round (value)   Round off, positive numbers round off, negative numbers ignore symbols first and round off

            -  Math.max (many numbers)   Take the maximum value

            -  Math.min (many numbers)   Take the minimum value

            -  Math.pow(m,   n)   The value of m to the nth power

            -  Math.sqrt(16)   Open square root

            -  Math.random()   Take random number, interval 0-1

Date object

        // Create specified time
        var dt = new Date("2011-11-30 20:42:12");
        console.log(dt);

        // Get the current time and create an instance object
        var dt2 = new Date();
        console.log(dt2);

        // Gets the number of milliseconds, 1 second = 1000 milliseconds (timestamp)
        // The dt2 instance object calls the getTime() method to get the timestamp
        console.log(dt2.getTime());// Milliseconds from 1970-01-01-00:00:00 to now
        // Directly call the now() method of Date to get the timestamp
        console.log(Date.now());
        // Use the property of valueOf() method < return the Number object value of the given parameter > to obtain the timestamp
        console.log(dt2.valueOf());

        // particular year
        console.log(dt2.getFullYear());// 2021
        // month
        console.log(dt2.getMonth() + 1);// 10 starts from 0, 0-11, so add 1
        // date
        console.log(dt2.getDate());// 30
        // week
        console.log(dt2.getDay());
        // Hour, minute and second
        console.log(dt2.getHours());
        console.log(dt2.getMinutes());
        console.log(dt2.getSeconds());

        console.log(dt2.toTimeString());// Hour: minute: second GMT+0800 (China standard time)
        console.log(dt2.toLocaleTimeString());// Hours, minutes and seconds in 12 hour system

        console.log(dt2.toDateString());// English date
        console.log(dt2.toLocaleDateString());// Mm / DD / yy

You can encapsulate a time expression of the style you want through the last method

        function getDate(dt) {
            var year = dt.getFullYear();
            var month = dt.getMonth() + 1;
            var date = dt.getDate();
            var hours = dt.getHours();
            var minutes = dt.getMinutes();
            var seconds = dt.getSeconds();

            // Complement
            // month = month < 10 ? "0" + month : month;
            // date = date < 10 ? "0" + date : date;
            // hours = hours < 10 ? "0" + hours : hours;
            // minutes = minutes < 10 ? "0" + minutes : minutes;
            // seconds = seconds < 10 ? "0" + seconds : seconds;

            function bu(i) {
                return i = i < 10 ? "0" + i : i;
            }

            var str = year + "year" + bu(month) + 'month' + bu(date) + "day" + bu(hours) + ":" + bu(minutes) + ":" + bu(seconds);
            return str;
        }

        // console.log(getDate(new Date()));
        console.log(getDate(new Date("2022-01-01 00:00:00")));

The following is a custom object that simulates the Math.max() method of the implementation system

        function MyMax() {
            // Method to get the maximum value
            this.getMax = function() {
                var max = arguments[0];
                for(var i = 0; i < arguments.length; i++) {
                    if(max < arguments[i]) {
                        max = arguments[i];
                    }
                }
                return max;
            }
        }

        var math = new MyMax();
        console.log(math.getMax(1, 49, 888, 27, 75, 66));

Tags: Javascript Front-end html5 css

Posted on Wed, 01 Dec 2021 07:23:35 -0500 by Niel Roos