From JavaScript to TypeScript (3)
Before starting this article, please read the previous article according to the label. The column address is: Getting started with Vue
Object oriented JavaScript
JavaScript create object
Create object from literal
You can use curly braces {} to create an object, and {} is used to define the properties in the object. An attribute is a combination of key value pairs. The key (attribute name) is always of string type, while the value (attribute value) can be of any type, such as string, array, function or other objects. Different attributes are separated by commas. The example code is as follows:
var person ={
name:"Jszszz",
gender:"boy",
age:"21"
};
In the above example, an object named person is created, which contains three attributes: name, age, and gender. The calling of attributes is also very simple as follows. Let's output all attributes to have a look.
code:
document.write(person.name + person.age + person.gender)
It should be noted that:
When defining an object, although the attribute name is a string type, quotation marks are usually not required to define it. However, quotation marks are required for the attribute name in the following three cases:
- Attribute names are reserved words in JavaScript;
- The attribute name contains spaces or special characters (any character except letters, numbers, \u and $);
- The property name begins with a number.
for instance:
var person ={
name:"Jszszz",
gender:"boy",
age:"21",
"?":100
};
However, when using special characters, you need to call the object in a different way:
Object name ["attribute name"].
for instance:
document.write(person.name + person.age + person.gender + person["?"])
Create an object from the new keyword
The method used is also simple:
var person_new = new Object();
Note that the object created here is an empty object without any attributes. The method to add attributes is as follows:
person_new.name ="Jszszzy";
Also very simple direct object Property can be created and assigned.
See below for the method creation section.
Creating objects using constructors
In some cases, many similar objects need to be created, so they need to be created through the constructor.
The syntax format is as follows:
for instance:
function Person_create(name,age)
{
this.name=name;
this.age=age;
}
The first thing to note is that constructors are capitalized. Other uses and declarations are actually not very different from ordinary functions.
The second point is that all attributes and methods must be assigned with this.
Use as follows:
var Jszszzy = new Person_create("Jszszzy",21)
You can see that we used the keyword new and called the constructor. You may wonder, there is no return keyword in the function to return the content. How do you return the object? Keep asking questions and continue reading.
Jszszzy is now generated as an object, and we can call and use it normally.
Function of new keyword
Create an empty object through the constructor, point to the empty object just created by using thisn, then execute the code in the constructor to add properties and methods to the empty object, and finally return the object.
Deleting an object's properties
The delete statement is the only way to delete a specified attribute from an object. Setting the attribute value to undefined or null only changes the value of the attribute and does not delete it from the object.
for instance:
delete person["?"]
Method of object
The function members in an object are called methods.
Add a function method to the person member.
var person ={
name:"Jszszz",
gender:"boy",
age:"21",
"?":100,
test:function (){
document.write(person.name + person.age + person.gender + person["?"])
}
};
You need to add () when calling a method, because it is essentially a function.
person.test()
The output results are as follows:
What if we use the new keyword?
Very simple, direct object The method =function() {} can be created. An example is as follows:
person_new.fun_test = function(){
document.write(person_new.name);
}
The interesting thing is that this method is applicable to objects created in any way. This method is used to add methods to objects.
for instance:
var Jszszzy = new Person_create("Jszszzy",21)
Jszszzy.test=function ()
{
document.write(Jszszzy.age)
document.write(Jszszzy.name)
}
Jszszzy.test()
The results are as follows:
JavaScript classes
In ES6, JavaScript adds classes. In fact, classes are not much different from the constructors described above. They are essentially an abstract integration of object attributes.
Class creation
Creating a class is simple. You can use the keyword class. An example is as follows:
class Person{
}
Class constructor
It is called a constructor here to distinguish it from a constructor.
In essence, it generates an object when calling a class with the new keyword, and calls the constructor and initializes its members at the same time.
for instance:
class ClasName{
constructor(){
}
}
Of course, we can initialize through the constructor. The method is very simple, that is, when instantiating, we can pass in the corresponding parameters:
for instance:
class Person_Class{
constructor(name){
this.name= name;
}
}
var Jszszzy_class= new Person_Class("Jszszzy");
At this time, jszszzy_ The class object contains an attribute named name.
Method of class
The method declaration of a class is simpler than that of an object. It should be noted that the function keyword is not required to be declared directly in the class body. For example:
class Person_Class{
constructor(name,age){
this.name= name;
this.age = age;
}
test(){
document.write(Jszszzy.age)
document.write(Jszszzy.name)
}
}
var Jszszzy_class= new Person_Class("Jszszzy",21);
Jszszzy_class.test()
Class inheritance
Compared with Java, class inheritance has not changed much. The keyword extends is used to indicate the class to be inherited.
There are 6 points to note:
1. Use super to get the constructor of the parent class, and the constructor of the parent class must be used before this is used.
2. The same members in the parent and child classes point to the same content.
3. Generally speaking, there is no such thing as rewriting. When the method names of the parent class and the child class are the same, the method of the child class will be called first.
4. Class declaration must precede instantiation because it does not contain variable promotion.
5. this keyword should be used to call all members in the class.
6. The object pointed to by this will change with the caller of the method.
For example, create the following subclasses and instantiate them:
//Example5
document.write("<br><br>Example5<br>")
class Jszszzy_son extends Person_Class{
constructor(name,age){
super("name",age)
this.name=name;
this.age=age;
}
test_son(){
document.write(this.name)
document.write(this.age)
}
}
var jszszzy2 = new Jszszzy_son("Jszszzyson",3)
You can see that I changed the assignment of the constructor of the parent class to "name" through the keyword, instead of directly passing in the parameters of the child class, and then called the method test of the parent class (see the above for the method implementation). The method test_son() of the child class has the following results:
jszszzy2.test() jszszzy2.test_son()
You can see that the content is the same.
Javascript can be said to be the pioneer of function based programming. You can well understand the sixth point through functional programming. Let's take an example:
class Jszszzy_son extends Person_Class{
constructor(name,age){
super("nametest",age)
this.name = name;
this.age = age;
this.btn = document.querySelector('button')
this.btn.onclick = this.test_son
}
test_son(){
document.write(this.age)
document.write(this.name)
}
}
Modify the above class, get the button object in the class through the querySelector method, assign it to the member btn, and set the onclick callback function of btn to the method test_son(). The results of running in HTML are as follows:
You can see that the corresponding member is not output because test_ this of son () points to btn, not jszszzy2. In essence, it is equivalent to passing the code in the function to the past.