Usage of JavaScript objects

Introduction: JavaScript is an object-oriented language that implements inheritance through the prototype mechanism and encapsulation through "closures" and other methods. This article discusses the special features of JavaScript objects: prototype chains, references, reflection, property traversal and other features.
1. Object creation
JavaScript has a very intuitive way to create objects:
var emptyObject = {};
var person = {
name: 'harttle',
age: 24
};
equivalent to:
var xx = new Object();
xx.name = 'hartle';
xx.age = 24;
2. Attribute access
Attributes can be accessed through two syntaxes:
person.age
person['age']
When the attribute name is not When present, JavaScript will search along the prototype chain. Assignment can update or create a property, and properties can be deleted via delete person.age.
Getting attributes of undefined will cause TypeError, which is usually solved by &&:
// person.girl === undefined
person.girl.name; // TypeError
person.girl && person.girl.name; // undefined
3. Prototype
JavaScript’s prototypal inheritance method is a bit cumbersome. The Object.create method is provided in ES6, and prototypal inheritance becomes simpler.
Its implementation is roughly like this:
if (typeof Object.create !== 'function') {
Object.create = function (o) {
var F = function () {};
F.prototype = o ;
                          return new F(); Properties will not be affected.
The way to delete an attribute by passing person.age = undefined online is actually equivalent to creating an attribute with a value of undefined. delete person.age will actually delete the property, as if that property was never declared.
For example:
var prot = { name: 'harttle' };
// Create p based on prot
var p = Object.create(prot);
delete p.name; // p.name === ' harttle', the object properties of the prototype chain are not affected
p.name = undefined; // p.name === undefined
delete p.name; // p.name === 'harttle', the properties of the prototype are obtained
undefined belongs to the basic data type Undefined. This type has only one value, which is undefined.
4. Object Reference
Objects in JavaScript are passed by reference, they will not be copied:
var a = b = {};
a.name = 'harttle';
b.name === 'harttle' / / true
When inheriting through prototype, the prototype also enters the prototype chain as a reference, and the prototype properties will not be copied:
var prot = {girl: {name: 'alice'}};
var p1 = Object.create(prot) ;
var p2 = Object.create(prot);
p1.girl.name = 'fuck'; // p2.girl.name === 'fuck'
It can be seen that the prototype relationship is a dynamic relationship.
5. Reflex vjavaScript is a dynamic language. You can get type information at runofy through Typeof:
Typeof p.Age // 'Number'
Typeof p.name // 'String'
ToString // ' function', from prototype: Object.prototype
typeof p.wing // 'undefined'
Of course, typeof has limited capabilities and can only check basic data types. In order to support object-oriented design, we need a more complex type judgment mechanism. You can refer to How to check the type of JavaScript? One article.
6. Attribute traversal
You can traverse object attributes (including prototype attributes) through for in:
var person = {name: 'harttle', age: 24};
for(var prop in person){
console.log(p [prop);
}
In order to only get the properties of the current object, you can judge it through hasOwnProperty:
for(var prop in person){
if(person.hasOwnProperty(prop)){
console.log(p[prop) ;
}
}
for in does not guarantee the order of attributes. If you need to guarantee the order, you can use Array instead. Also avoids judging properties from prototypes.
7. Avoid global variables
The reliance on global variables is one of JavaScript's design flaws. There are many ways to avoid using global variables, the simplest of which is to define a global variable for your project, and only define one global variable:
var APP = {};
APP.foo = 'xxx';
APP.bar = 'xxx';
This makes the code easier to maintain and change. After all, APP.foo is a global variable at first glance.