Shulou(Shulou.com)06/03 Report--

This article shows you how to introduce the object of JavaScript. The content is concise and easy to understand. It will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

1. Object method & this

Method simply saves the properties of the function value.

Simple object method

Let rabbit = {}; rabbit.speak = function (line) {console.log ("Little Rabbit says:" + line);}; rabbit.speak ("I'm still alive.")

Output:

T Little Rabbit said: I am still alive.

Object method & this

When a function is called as a method, the object takes the function as a property and calls it immediately, just as in object.method (), where the special variable this in its body points to the object being called.

Function speak (line) {console.log (this.type + "Little Rabbit says:" + line)}; let whiteRabbit = {type: "White", speak: speak} whiteRabbit.speak ("Oh, I'm so cute!")

Output:

The white rabbit said: Oh, I am so cute!

Apply & call

Function speak (line) {console.log (`${this.type} bunny says: ${line}`); let whiteRabbit = {type: "white", speak: speak}; speak.apply (whiteRabbit, ["you little rascal!"]); speak.call ({type: "black"}, "hey, I'm not bad, you don't love!"); the white bunny says: you little rascal! The little black rabbit said: Hey hey, I'm not bad, you don't like it!

2.Prototype (prototype)

Almost all objects have a prototype

Prototype is another object that is used as an alternate source for properties

When an object accesses itself does not have a property, it searches for that property from its prototype, and if it does not find it, it continues to look for it from its prototype's prototype, and so on, until null.

The prototype of an empty object

The prototype chain finally points to the prototype of Object, and the _ _ proto__ in Object is null

Let empty = {}; console.log (empty.toString); console.log (empty.toString ())

Output:

[Function: toString] [object Object]

Default properties of other objects (arrays, functions, etc.)

Many objects do not directly use Object.prototype as their prototype, but have their own default properties

Functions derived from Function.prototype and arrays derived from Array.prototype

Console.log (Object.getPrototypeOf (isNaN) = = Function.prototype); console.log (Object.getPrototypeOf ([]) = = Array.prototype)

Output:

True true

Object.create creates objects with specific prototypes

ProtoRabbit acts as a container for attributes shared by all rabbits

A single rabbit object, such as a killer rabbit, contains attributes that apply only to itself (in this case, type) and derives shared properties from its prototype

Let protoRabbit = {speak: function (line) {console.log (`$ {this.type} Rabbit says: ${line} `);}} let killerRabbit = Object.create (protoRabbit) killerRabbit.type = 'killer' killerRabbit.speak ('prepare to die!')

Output:

The killer rabbit said: prepare to die!

3. Constructor function

-Constructor prototype

A more convenient way to create an object derived from a shared prototype is to use the constructor

In JavaScript, calling a function preceded by the new keyword treats it as a constructor

The constructor binds its this variable to a new object that will be returned from the call unless it explicitly returns another object value

An object created with new is called an instance of its constructor

The convention capitalizes the name of the constructor so that it can be distinguished from other functions

Function Rabbit (type) {this.type = type;} let killerRabbit = new Rabbit ("killer"); let blackRabbit = new Rabbit ("black"); console.log (blackRabbit.type)

Output:

Black

-by default, the constructor has Object.prototype

The constructor (virtually all functions) automatically gets a property named prototype, which by default contains a normal empty object derived from Object.prototype

Each instance created using this constructor has this object as its prototype

Function Rabbit (type) {this.type = type;} let blackRabbit = new Rabbit ("black"); Rabbit.prototype.speak = function (line) {console.log (`$ {this.type} rabbit says: ${line} `);}; blackRabbit.speak ("Boom... a wave of king fried!")

Output:

The black rabbit said: Boom... A wave of king bombings!

4. Override derived properties

-same prototype name

If there is a property with the same name in the prototype, this property will not be changed

The attribute is added to the object itself

Function Rabbit (type) {this.type = type;} let blackRabbit = new Rabbit ("black"); let killerRabbit = new Rabbit ("killer"); Rabbit.prototype.teeth = "small"; console.log (killerRabbit.teeth); / / small killerRabbit.teeth = "long, sharp, and bloody"; console.log (killerRabbit.teeth); / / long, sharp, and bloody console.log (blackRabbit.teeth); / / small console.log (Rabbit.prototype.teeth); / / small

The result of the following console.log (blackRabbit.teeth) is small, because the blackRabbit object does not have a teeth property, which inherits from the Rabbit object's own teeth property, with a value of small.

5. Interference of prototype

-enumerable and non-enumerable

Let map = {} function storePhi (event, phi) {map [event] = phi} storePhi ('pizza', 0.069) storePhi (' touched tree',-0.081) Object.prototype.nonsense = 'hi' for (let name in map) {console.log (name)} console.log (' nonsense' in map) console.log ('toString' in map)

Output result:

Pizza touched tree nonsense true true

ToString does not appear in the for/in loop, but true is returned in the in operator because JS distinguishes between enumerable and non-enumerable properties.

All the properties we create through simple allocation are enumerable, and the standard properties in Object.prototype are immutable, which is why they do not appear in such for/in loops.

Let map = {}; function storePhi (event, phi) {map [event] = phi;} storePhi ("pizza", 0.069); storePhi ("touched tree",-0.081); Object.defineProperty (Object.prototype, "hiddenNonsense", {enumerable: false, value: "hi"}) for (var name in map) {console.log (name)} console.log (map.hiddenNonsense)

Output:

Pizza touched tree hi

You can define your own non-enumerable property by using the Object.defineproperty function, which allows us to control the type of property to be created. In this example, hiddenNonsense is in map but not displayed in for...in.

-hasOwnProperty vs in operator

Const map = {} console.log ("toString" in map) console.log (map.hasOwnProperty ("toString"))

Output:

True false

The hasOwnProperty method tells us whether the object itself has this property without looking at its prototype, which is usually more useful than the information provided to us by the in operator.

Therefore, if you are confused about the underlying object prototype, it is recommended that you write the for/in loop like this:

For (var name in map) {if (map.hasOwnProperty (name)) {/ /. This is an own property}}

6. No prototype object

The Object.create function enables us to create objects with specific prototypes. We can also pass null as a prototype to create new objects without a prototype.

Therefore, we no longer need hasOwnProperty because all the properties that an object has are its own. Now, no matter what people do with Object.prototype, we can safely use for/in loops

Var map = Object.create (null); map ["pizza"] = 0.069; console.log ("toString" in map); / / false console.log ("pizza" in map); / / true the above is about the introduction of the object of JavaScript. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.