Explain the Object object of JavaScript

1, What is Object?

Object is a data type of JavaScript. It is used to store various key value collections and more complex entities. Almost all objects are instances of object type, and they will be imported from object Prototype inherits properties and methods, although most properties will be shadowed or overridden.

An object is a collection of attributes, including names and values. If the attribute value is a function, it is called a method.

1. Create a new object
  • Method 1: create an object using the object initializer
var myCar = {
  name: "john",
  age: 22
}
  • Method 2: use the new keyword to create an object
function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}
var mycar = new Car("Eagle", "Talon TSi", 1993);
  • Method 3: use object Create create object
// Animal properties and method encapsulation
var Animal = {
  type: "Invertebrates", // Property defaults
  displayType : function() {  // Method for displaying the type attribute
    console.log(this.type);
  }
}

// Create a new animal - animal1
var animal1 = Object.create(Animal);
animal1.displayType(); // Output:Invertebrates
2. Setting and deleting properties
// How to set properties in 3
var myCar = new Object();
myCar.make = "Ford";
myCar["model"] = "Mustang";
var propertyName = "other";
myCar[propertyName] = "title";
console.log(myCar);

// Delete attribute
delete myCar.make;
3. Traversal object properties

There are three ways to traverse properties in an object.

var myCar = {
  name:"john",
  age:22
}

// Method I:
function showProps(obj, objName) {
  var result = "";
  for (var i in obj) {
    if (obj.hasOwnProperty(i)) {
        result += objName + "." + i + " = " + obj[i] + "\n";
    }
  }
  return result;
}
console.log(showProps(myCar, "myCar")); 

// Method II
console.log(Object.keys(myCar));
// Method three
console.log(Object.getOwnPropertyNames(myCar));
4. Definition method

Using a function as the attribute value of an object is called a method. set, get and more, see here!

var myObj = {
  myMethod: function(params) {
    // ...do something
  }

  // Or it can be written like this

  myOtherMethod(params) {
    // ...do something else
  }
};
5. Object comparison

Two object instances will never be equal, even if their properties are exactly the same.

// Two variables, two objects that have the same properties but are different
var fruit = {name: "apple"};
var fruitbear = {name: "apple"};
fruit == fruitbear // return false
fruit === fruitbear // return false

// Two variables, the same object
var fruit = {name: "apple"};
var fruitbear = fruit;  
fruit == fruitbear // return true
fruit === fruitbear // return true
2, Object common methods
1,Object.defineProperty
  • Function: add or modify the attribute value of the object. See more here!
// 1. Grammar
Object.defineProperty(obj, prop, descriptor)
// 2. Method of use
const object1 = {};

Object.defineProperty(object1, 'property1', {
value: 42,
writable: false
});

object1.property1 = 77;
// throws an error in strict mode

console.log(object1.property1);
// expected output: 42
2,Object.assign
  • Function: create a new object by copying one or more objects.. See more here!
// grammar
Object.assign(target, ...sources)
// 1. Copy an object
const obj = { a: 1 };
const copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }

// 2. Merge the same attributes
const o1 = { a: 1, b: 1, c: 1 };
const o2 = { b: 2, c: 2 };
const o3 = { c: 3 };
const obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }

// 3. Inherited and non enumerable properties cannot be copied
const obj = Object.create({foo: 1}, { // foo is an inherited property.
    bar: {
        value: 2  // bar is an enumerable property.
    },
    baz: {
        value: 3,
        enumerable: true  // baz is a self enumerable property.
    }
});
const copy = Object.assign({}, obj);
console.log(copy); // { baz: 3 }
3,Object.create
  • Function: creates a new object using the specified object and attributes. See more here!
const person = {
isHuman: false,
printIntroduction: function() {
    console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
}
};

const me = Object.create(person);

me.name = 'Matthew'; // "name" is a property set on "me", but not on "person"
me.isHuman = true; // inherited properties can be overwritten

me.printIntroduction();
// expected output: "My name is Matthew. Am I human? true"
3, prototype (inheritance)

Each instance Object of JavaScript has a private property (called _ proto), which points to the Object of the previous layer. The Object of the previous layer points to the Object of the next layer. In this way, it goes up layer by layer until the proto property is null. Finally, the Object is Object.

Such passage__ proto__ Property to link objects, which is called prototype chain. Inheritance features are also based on it. Details, look here!

4, Reference documents

Keywords: Javascript

Added by webmasternovis on Wed, 22 Dec 2021 16:46:57 +0200