JavaScript Object Foundation

Basic forms of JavaScript objects, how objects are created, constructors, wrapper classes, and so on

Format of object

  1. Basic Format

    The object is wrapped with a {} and the internal properties are declared as key-value pairs

  2. Example

    var teacher = {
        name: "pgjett",
        age: "22",
        teach: function () {
            console.log("I teach javascript");
        },
        drink: function () {
            console.log("I drink beer");
        }
    }

Properties of the object

  1. Addition or deletion of attributes

    var teacher = {
        name: "pgjett",
        var teacher = {
            name: "pgjett",
            age: "22",
            teach: function() {
                console.log("I teach javascript");
            },
            drink: function() {
                console.log("I drink beer");
            }
        }
        // increase
        teacher.smook = function(){
            console.log("I smook");
        }
        // delete
        delete teacher.name;
        // change
        teacher.teach =function() {
            console.log("I teach java");
        }
        // Find/Access
        console.log(teacher.name);  
        console.log(teacher["name"]);
        // The earliest JS engine was accessed using obj["name"]
        // Using obj.name automatically converts to obj["name"]
  2. Object Method Access Properties

    General functions are called functions and functions within objects are called methods.

    var teacher = {
        name: "pgjett",
        age: "22",
        weight: "65",
        teach: function() {
            console.log("I teach javascript");
        },
        eat: function() {
            this.weight++;
            console.log("I eat, my weight is " + this.weight);
        }
    }
    teacher.eat();
  3. Object methods with parameters

    var attendance = {
        students: [],
        join: function(name) {
            this.students.push(name);
            console.log(name + " Class arrived");
        },
        leave: function(name) {
            var idx = this.students.indexOf(name);
            if (idx != -1) {
                this.students.splice(idx, 1);
                console.log(name + "Leave early");
            }
        }
    }
    attendance.join("Zhang San");
    attendance.join("Li Si");
    attendance.join("King Five");
    attendance.join("Zhao Six");
    attendance.join("Sun Qi");
    attendance.leave("Li Si");
    // Zhang San has arrived
    // Li Si has arrived
    // Wang Wu has arrived
    // Zhao Six has arrived
    // Sun Qi has arrived
    // Li Si left early

How objects are created

  1. Object Literal

    Also called object direct quantity

    var obj = {
        name: "Jett",
        age: 22""
    }
  2. Built-in constructor

    Using new Object(), is no different from object direct quantity

    var obj = new Object();
    obj.name = "Jett";
    obj.age = "22";
  3. Custom Constructor

    Custom constructors are named after camels, object instances are created through new, and new examples are different objects with their own properties

    Custom constructors are an important part of javascript modularization and plug-in

    function Teacher(){
        this.name = "Jett";
        this.age = 22;
        this.teach =function(){
            console.log("I teach javascipt");
        }
    }
    var teacher1 = new Teacher();
    var teacher2 = new Teacher();
    teacher2.name = "John";
    console.log(teacher1);
    console.log(teacher2);
    // Teacher{name: "Jett", age: 22, teach: teach(){}}
    // Teacher{name: "John", age: 22, teach: teach(){}}

    Custom constructor incoming parameters

    function Teacher(opt) {
        this.name = opt.name
        this.age = opt.age;
        this.teach = function() {
            console.log("I teach " + opt.course);
        }
    }
    var teacher1 = new Teacher({
        name: "Jett",
        age: 22,
        course: "javascript"
    });
    var teacher2 = new Teacher({
        name: "John",
        age: 25,
        course: "java"
    });

Constructor Principle

  1. The direction of this

    Do not use new, execute directly, this points to window according to precompilation principle

    function Car() {
        this.color = "red";
        this.brand = "BMW";
    }
    Car();
    console.log(window.color);
    // red

    Use new to instantiate the object, this points to the instance

    function Car() {
        this.color = "red";
        this.brand = "BMW";
    }
    var car = new Car();
    console.log(car.color);
  2. The process of this transformation

    When a new constructor is executed, it is equivalent to the constructor executing, and its AO has a this pointing to a default property

    When executed

    this.color = "red";
    this.brand = "BMW";

    Equivalent to adding attributes on this

    Using the new keyword will throw this and assign it to a reference

    This is an instance object that can access the color, brand properties

  3. return in constructor

    A new constructor implicitly returns this by default

    If an original value is explicitly return ed, the instance object is not affected

    If you explicitly retrn a reference value, the instance from new point to that reference value

    function Car() {
        this.color = "red";
        this.brand = "BMW";
    
        return 1;
    }
    var car = new Car();
    console.log(car.color);
    // red

Packaging Class

  1. Number

    By creating a numeric object with a constructor, you can set properties

    Automatic unpacking during operation

    Similar to this are String, Boolean

    var a = new Number(1);
    a.name = "a";
    console.log(a);
    console.log(a + 1);
    // Print
    // Number{1, name: "a"}
    // 2

    Original value custom methods and attributes, each access will be wrapped into a corresponding type of object, just a temporary container, destroyed after execution, re-accessed and re-wrapped, can only access undefined

    var a = 1;
    a.name = "a"; 
    // The js engine wraps a as a digital object,
    // That is, new Number(a).len = 3
    // Temporary container has no variables saved, delete, delete the len attribute
    console.log(a.name);
    // That is console.log(new Number(a).len)
    // Print undefined
  2. String

    The original string value does not have a length attribute, it is actually accessed after wrapped as a string object

    // The js engine wraps "123" as a string object
    var str = "123";
    str.length = 1; 
    // That is, new String(str).length = 1;
    console.log(str.length);
    // console.log(new String(str).length)
    // Print 3

Object Chain Call

adopt return this Throwing objects to call other functions

```javascript
var sched = {
    marning:function(){
        console.log("marning studying");
        return this;
    },
    noon:function(){
        console.log("noon sleeping");
        return this;
    },
    afternoon:function(){
        console.log("afernoon shopping");
        return this;
    }
}
sched.marning().noon().afternoon();
```

Object Enumeration

  1. Traversing object properties for in

    var obj = {
        name: "Jett",
        age: 22,
        address: "Anhui"
    }
    for( var key in obj) {
        console.log(key, obj[key]);
    }
    // name Jett
    // age 22
    // address Anhui
  2. Use in to determine if an object has an attribute

    var obj = {
            name: "Jett",
            age: 22,
            address: "Anhui"
        }
    console.log("name" in obj);
    // true

Tags: Javascript Attribute Java

Posted on Thu, 19 Mar 2020 18:46:33 -0700 by jimmygee