How to understand javascript objects

In JS or in object-oriented programming languages, an object is a combination of properties and methods. An attribute contains an attribute name and an attribute value. This value can be any type of data or a function. In this case, the function is also called a method.

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

1.1 What is an object?

Objects are things. In the real world, a ball, a table, and a car are all objects.

An object is something with describable characteristics that we can influence and manipulate in a specific way.

In JS or in object-oriented programming languages, an object is a combination of properties and methods.

An attribute contains an attribute name and an attribute value. This value can be any type of data or a function. In this case, the function is also called a method.

In JS, almost everything you encounter is an object, so let’s learn about the details of objects.

1.2 Characteristics of the object?

Objects have attributes, which are the characteristics of the object. You can access the attributes of an object through dot notation.

objectName.propertyName;

If the object is compared to a ball in reality, then the ball is an object with attributes, color and size. These can be expressed like this:

var ball = new Object();
ball.color = “red";
ball.size = 12;

Objects also have methods, which are used to define how the object behaves.

For example, the ball may have a rolling method to calculate how far it can roll, and a bouncing method to calculate how high it can jump.

can be expressed like this:

ball.roll = function() {
return this.size * laps
}

1.3 Accessing the properties of the object

As mentioned before, we can access the properties of the object through dot notation, but if this is the case, we still Can the properties of an object be accessed through dot notation:

var ball = new Object();
ball.color = “red";
ball.size = 12;
var spec = “color”;
ball.spec ??

Assume here that there is a variable spec, and we need to access the object properties through this variable spec.

But if you use dot notation, you will access the spec attribute of ball and return an undefined, indicating that spec is directly treated as a property instead of a variable.

What should we do if we want to get the value of a variable as an attribute of the object?

Can be accessed using square bracket notation. This notation is dynamically determined in the attribute name, so that the attribute can be accessed through the string stored in the variable:

ball[spec]; // red

1.4 Enumerate the properties of the object

In addition, we can enumerate all properties of the object through the for in loop statement:

var ball = {color: “red”, size: 12, border: 2};
for (var prop in ball) {
console.log(“ball.” + prop + “=“ + obj[prop]);
}
// ball.color = red
// ball.size = 12
// ball.border = 2
// 如果希望继承的属性不显示，那么可以用hasOwnProperty函数来过滤一遍
var bar = {a: 1, b: 2, c: 3};
function Foo() {
this.color = 'red';
}
Foo.prototype = bar;
var obj = new Foo();
for (var prop in obj) {
if (obj.hasOwnProperty(prop)) {
console.log(prop);
}
}

We can also return a collection of property names through the Object.keys(obj) method Array:

var obj = {a: “123”, b: “das”, c: “web”};
console.log(Object.keys(obj)); // [“a”,”b”,”c”];
var arr = [“a”, “b”, “c”];
console.log(Object.keys(arr)); // [“0”,”1”,”2”];

[Recommended learning: javascript advanced tutorial]

The above is the detailed content of How to understand javascript objects. For more information, please follow other related articles on the PHP Chinese website!