The foreword 0.

Objects are one of the “three big mountains” of JavaScript (hereinafter referred to as JS), and a key step in understanding JS. For former Python programmers like myself, this is a bit of a puzzle, but it’s not hard.

But since you can’t fully transfer object-oriented ideas from Java or Python to JS, I’ll start with a study note.

1. What to distinguish between JavaScript and traditional object-oriented languages

The following is purely from personal experience:

  • Python is a flexible language that can be written in both functional and object-oriented ways
  • JavaScript is a full-on Object language. All types except the basic data types are Object types, so I’d like to call it an “all-object language.”

2. Object and definition method

JS objects are similar to dict objects in Python. They are collections of key-value pairs. They are unordered.

There are two completely equivalent ways to define objects in JS:

/ / short
let obj = {
    'name' : 'Allen'.'age' : '22'
};

// formal
let obj2 = new Object({
    'name' : 'Allen'.'age' : '22'
})
Copy the code

You usually see the first one, but the second one is more formal. But I recommend the first way.

A few points to note:

  • The key name must be a string.
  • However, it is possible to omit the string when defining the key name, but this is not recommended
  • If the string is defined as above, the key name is written in the same way as the identifier (i.e., the key is defined in the same way as the variable).

3. CRUD (add, delete, modify and check)

Everything is CRUD (” Create “, “Read”, “Update” and “Delete”). This is also true of JS objects.

3.1 check

Looking at object properties is the basis for everything else, so let’s start with that.

Two ways:

obj.name // Python view method
obj['name'] // The JS view method is recommended
Copy the code

Note that obj[name] also works, but the name refers to a variable name instead of the string ‘name’. Example:

let n = 'name';

obj[n] // Note the n above
Copy the code

3.2 delete

Use the DELETE statement. Example:

delete obj.name

// or
delete obj['name']
Copy the code

3.3 increase and change

The following syntax can be used to add or change things:

obj.name = 'Fiona'

// or 

obj['name'] = 'Fiona'
Copy the code

If there is no name in the original object obj, add it. If so, rewrite.

However, if you want to add in batches, Object. Assign is a good choice. The syntax is as follows (example from MDN) :

const target = { a: 1.b: 2 };
const source = { b: 4.c: 5 };

const returnedTarget = Object.assign(target, source);
Copy the code

The above code means to merge source and target.

4. The difference between ‘name’ in obj and obj. HasOwnProperty (‘name’)

In fact, we can see semantically that the former is used to judge whether there is a certain attribute in object OBj; The latter is used to determine whether name is a non-stereotype property, that is, to determine whether name is a property inherited from Object.

const obj = {};

obj.hasOwnProperty('toString')
// output: false

'toString' in obj
// output: true
Copy the code

Explanation:

  1. becausetoStringisObjectPublic property of, i.eobjfromObjectIt’s inherited from the superclass, not its own, soobj.hasOwnProperty('toString')Will be outputfalse;
  2. And for'toString' in objGrammatically, onlytoStringIs a valid property/method, whether it is its own or inherited from a parent classtrue.

Above:

References

  1. [1] MDN document –assign