About JS Classes

Asked 1 years ago, Updated 1 years ago, 42 views

This is a continuation of the question about the JS class.

>>>

class Cat{
constructor(name) {this.name=name}
meow() {alert(this.name+' is meow')}
}

// Instance creation
varclsObj = new Cat("my cat");
// Output the contents of the instance (object)
console.log(clsObj);

As a beginner, which of these statements is required?
Also, I don't know which name is paired with.

I somehow understood that instances are created where the new class name is, and instances created by variables are substituted.

console.log(clsObj);
VM793:9
Cat {name:"my cat"}

I don't really understand that

new Cat("my cat"; is

class Cat{
  constructor(name) {this.name=name}
  meow() {alert(this.name+' is meow')}
}


by running the Arguments are

 constructor(name)
new Cat("my cat");

Do you mean that name replaces mycat because is paired with ?

new Cat("my cat"; was run as an instance.
Is mycat an instance?

I'm sorry to trouble you, but I'd appreciate it if you could briefly tell me the sequence.

class Cat{
  constructor(name) {this.name=name}
  meow() {alert(this.name+' is meow')}
}

How is passed to the , how is it handled, and what is spit out as an instance?

What is class in ES6?
Continuing

_________________
Thank you very much for your continued support.

>>>
I think you understand that Class is a blueprint for creating an instance.

There are various shapes such as circles, squares, and star shapes in the cookie blank.Once you make a cookie mold, you can make as many cookies as you like.You can actually eat cookies, but you can't eat cookie molds.
I saw an example that
It seems that a type is a collection of expressions for reuse like a function, which is similar to a function.
In other words, it's almost the same as the definition of a function, but everything becomes global, so the definition of a function that can be used from outside is class creation?

And instantiation means that classes can't be created and defined, so you can instantiate classes in new, like calling a function, so you can actually use the classes, and you can call them.
Does that mean?

class Cat{
constructor(name) {this.name=name}
meow() {alert(this.name+' is meow')}
}

to

clsObj={
    constructor: function(name) {this.name=name},
    meow: function() {alert(this.name+' has meow')}
};

Does that mean that will be created?

>>>
If I look like the above, will I get an image of this pointing to Instance(Object) when it is executed?

This is not the class name, but the instance that is implemented as a result of running the constructor.
Specifically, which sauce?

>>>
Also, when you create this instance, the constructor runs, so it changes as follows:

constructor: function(name) {this.name=name},
Results of running

clsObj={
    name: "my cat",
    constructor: function(name) {this.name=name},
    meow: function() {alert(this.name+' has meow')}
};

I understand that
It seems that only name: "my cat", has been changed.

constructor:function(name){this.name=name} ends up
Does name define an unknown function for the argument, and the content substitute name for the name property in the instance?

Also, what does the name argument substitute for the local variable var name=?
If you have a real argument, you'll find it, but you can't find it

Also
just because the replacement work was done. name: "my cat",
Will this property be generated?

javascript

2022-09-30 21:24

2 Answers

First of all, I quote from Class-JavaScript|MDN.

The JavaScript class introduced in ECMAScript6 is the sugar coating syntax for prototype-based inheritance that JavaScript already has.The class syntax is not introducing a new object-oriented inheritance model into JavaScript.The JavaScript class provides a simple and clear syntax for creating objects and handling inheritance.

As a beginner, you may not know what prototype is like, but js was originally a language centered on prototype-based inheritance, and when creating something like a class, it extended a special property/object called prototype.

The most common method is to generate an Function object and extend its protocol.The Function object itself can also be used as a special function called a constructor, which corresponds to what you call the code in question, constructor.For calls with the new keyword, the function becomes a constructor call, generates a new object inheriting its own protocol, applies the processing in the function, and then returns it.

//class Cat{
//   constructor(name) {this.name=name}
const Cat=function(name){
    // var this = Object.create(Cat.prototype); // For calls with new, they are internally executed
    this.name = name;
    // If the call is made with return this;//new, it will be executed internally.
};

// Member variables/methods extend the prototype of the Function object.
//  meow() {alert(this.name+' is meow')}
Cat.prototype.meow=function(){
    alert(this.name+'miao');
};
// }

// Function objects are normal functions themselves.
const dummy = {};
console.assert(Cat.call(dummy, 'my cat') === undefined);
console.assert(!(dummy instance of Cat));
console.assert(Object.getPrototypeOf(dummy)!==Cat.prototype);
console.assert(dummy.name==='my cat');

// Calls with the new keyword act as constructors.
// The constructor call generates a new instance and returns it.
const clsObj = new Cat('your cat');
console.assert(clsObj instance of Cat);
console.assert(Object.getPrototypeOf(clsObj)===Cat.prototype);
console.assert(clsObj.name==='your cat');

// clsObj is an instance of a Cat class, that is, an object that inherits Cat.prototype.
clsObj.meow();//your cat rang miao
// This call is equivalent to:
Cat.prototype.meow.call(clsObj);

It is ES6's Class that makes it easy to write this content.If you say which one is essential, there is nothing in particular that is essential.The following code is also a complete class definition:

//as Function object
const myClass=function(){};

// using ES6 class syntax
class myClass {
}

The user-defined class myClass has a constructor that does nothing and has no member variables or methods.

It may be a little difficult, so please let me know if you have any questions.


2022-09-30 21:24

Cat {name:"my cat"} is not clear.

I think you understand that Class is a blueprint for making Instances.
It's just an image, so it's different from the actual type, but if you do new,
Imagine creating an object based on a blueprint like the one below.
Below is the image of the flow when varclsObj=new Cat("my cat"; is performed.

clsObj={
    constructor: function(name) {this.name=name},
    meow: function() {alert(this.name+' has meow')}
};

If it looks like the above, will there be an image of this pointing to Instance(Object)?
Also, when you create this instance, the constructor runs, so it changes as follows:

clsObj={
    name: "my cat",
    constructor: function(name) {this.name=name},
    meow: function() {alert(this.name+' has meow')}
};

The above constructors and functions are actually protocol declarations, so
Even if you look at the object in Chrome, it does not output.
Therefore, this is what you see when you output it to the Console.

Cat {name:"my cat"}

As an application above, for example, in constructor, make two arguments and
Doing the following will create another namespace:

//clsObj=new Cat("my cat", "owner");
clsObj = {
    name: "my cat",
    parent: "owner",
    constructor: function(name,par){
        this.name = name;
        This.parent=par;
    },
    meow: function() {alert('+this.name+' in this.parent+')}
};

Rio.irikami's response is
new to create an instance (internal processing content)
It's a more precise description.


2022-09-30 21:24

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.