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!