Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to understand the constructor in JavaScript

2025-02-24 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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

How to understand the constructor in JavaScript, I believe that many inexperienced people are at a loss about it. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

JavaScript learning note constructor, object-oriented:

First of all, we should make it clear that object-oriented is not a grammar, it is an idea, it is a programming mode.

Face: face (face), toward (toward)

Process-oriented: face-to-face process = "programming mode that focuses on the process.

Object-oriented: face to object = "focus on the programming mode of the object

Achieve an effect

When facing the process, we should pay attention to each element, the relationship between each element, the order,.

When facing the process, what we need to focus on is to find an object to help me do this, and I wait for the result.

Example: I want to eat noodles

Process oriented

How much flour do you use

How much water do you use?

How to mix noodles

How to cut noodles

Make boiled water

Boiled noodles

Eat noodles

Object oriented

Find a noodle shop

Order a bowl of noodles

Waiting to eat.

Object-oriented is the encapsulation of process-oriented

Our previous programming idea was that each function was completed step by step according to the requirements.

Our future programming idea is that for each function, we first create a noodle shop, which can help us make a noodle (the object that completes this function), and then use the noodle shop to create a noodle. We just have to wait for the result.

How objects are created

Because object-oriented is a process of finding objects.

So we need to know how to create an object first.

Call the constructor built into the system to create an object

Js gives us a built-in Object constructor

This constructor is used to create objects.

When the constructor is used with the new keyword, an object can be created for us.

Because js is a dynamic language, we can dynamically add members to the object.

/ / you can get an empty object var o1 = new Object () / / normal operating object o1.name = 'Jack'o1.age = 18o1.gender =' male'

Create an object literally

Directly use the literal form, that is, directly write {}

You can add good members when you write, or you can add them dynamically.

/ / create object var o1 = {literally

Name: 'Jack'

Age: 18

Gender: 'male'} / / another var O2 = {} o2.name = 'Rose'o2.age = 20o2.gender =' female'

Create an object using a factory function

Write a factory function first

This factory function can create an object, add some properties to the object, and return the object.

Use this factory function to create objects

/ / 1. First create a factory function function createObj () {

/ / manually create an object var obj = new Object ()

/ / manually add a member to the object obj.name = 'Jack'

Obj.age = 18

Obj.gender = 'male'

/ / manually return an object return obj}

/ / 2. Use this factory function to create an object var o1 = createObj () var O2 = createObj ()

Create an object using a custom constructor

Factory function needs to go through three steps

Create objects manually

Add members manually

Return the object manually

The constructor is a little simpler than the factory function.

Create objects automatically

Add members manually

Automatically return objects

Write a constructor first

Add some members to the object within the constructor

Use this constructor to create an object (used with new)

Constructor can create an object and create an object with properties and methods

Object orientation is to find a way to find an object with properties and methods.

Object-oriented is the process of making our own constructors.

/ / 1. First create a constructor function Person (name, gender) {

This.age = 18

This.name = name

This.gender = gender} / / 2. Use the constructor to create an object var p1 = new Person ('Jack',' man') var p2 = new Person ('Rose',' woman')

Detailed explanation of constructor

We learned how to create objects.

Our object-oriented is that we can either get an object directly

Or we can come up with something that can create objects, and we can create objects ourselves.

Our constructor can create objects, so let's talk about constructors in more detail.

Basic use of constructor

Just like an ordinary function, except that it should be used with new when called, otherwise it is an ordinary function call.

Function Person () {} var o1 = new Person () / / can get an empty object var O2 = Person () / / nothing. This is a normal function call.

Note: when not writing new, it is a normal function call, without the ability to create objects.

Initials are capitalized

Function person () {} var o1 = new person () / can get an object function Person () {} var O2 = new Person () / / can get an object

Note: the first letter is not capitalized, as long as it is used with new, you will have the ability to create objects.

When calling, if you don't need to pass parameters, you don't have to write (). It's recommended to write it all.

Function Person () {} var o1 = new Person () / / can get an empty object var O2 = new Person / / can get an empty object

Note: if you do not need to pass parameters, you can not write (), if you pass parameters, you must write

The this inside the constructor, due to its use with new, points to the current instance object.

Function Person () {

Console.log (this)} var o1 = new Person () / / when calling this time, this = > o1var O2 = new Person () / / when calling this time, this = > O2

Note: every time you new, the this inside the function points to the current instantiated object

Because the constructor automatically returns an object, do not write return inside the constructor

If you return a basic data type, then it doesn't make sense to write

If you return a reference data type, the constructor itself is meaningless.

Create an object using the constructor

When we use the constructor, we can add some code and content to the current object.

Function Person () {

This.name = 'Jack'

This.age = 18}

Var o1 = new Person () var O2 = new Person ()

The two objects we get have their own members, name and age.

When we write constructors, can we also add some methods to it?

Function Person () {

This.name = 'Jack'

This.age = 18

This.sayHi = function () {

Console.log ('hello constructor')

}}

Var o1 = new Person () var O2 = new Person ()

Obviously, we can. We have the function sayHi in both objects.

It can also be called normally.

But is this good? What are the disadvantages?

Function Person () {

This.name = 'Jack'

This.age = 18

This.sayHi = function () {

Console.log ('hello constructor')

}}

/ / on the first new, the Person function will be executed once / / and a new function will be created and the function address will be assigned to this.sayHivar o1 = new Person ()

/ / in the second new, the Person function will be executed once / / and a new function will be created and the function address will be assigned to this.sayHivar O2 = new Person ()

In this case, the sayHi function in our two objects is the same code and the same function.

But there are two space functions that occupy two memory spaces.

That is to say, o1.sayHi is an address and o2.sayHi is an address.

So the result of our execution of console.log (o1 = o2.sayHi) is false

Disadvantages: the same function appears twice, occupying two space addresses

How to solve this problem?

You need to use something called a prototype.

After reading the above, have you mastered how to understand the constructor in JavaScript? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

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.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report