Table of contents
1. Process-oriented and object-oriented
3. Process-oriented advantages and disadvantages
4. Object-oriented advantages and disadvantages
2. Class: constructor constructor
8. The bodies of class declarations and class expressions are executed in strict mode.
1. Process-oriented and object-oriented
1. Process-oriented
Process-oriented is to analyze the steps needed to solve the problem, and then use functions to realize these steps step by step, and then call them one by one when using them.
2. Object-oriented
1) Object-oriented is to decompose the transaction into individual objects, and then divide and cooperate between the objects.
2) Object-oriented is to divide the problem by function, not steps.
3) Object-oriented features: encapsulation, inheritance, polymorphism
3. Process-oriented advantages and disadvantages
Advantages: relatively high performance, suitable for things that are closely related to hardware, such as single-chip microcomputers.
Disadvantages: No object-oriented, easy to maintain, reuse, expand, etc.
4. Object-oriented advantages and disadvantages
Advantages: easy to maintain, reuse, and expand. Due to object-oriented features of encapsulation, inheritance, and polymorphism, a low-coupling system can be designed, making the system more flexible and easier to maintain
Disadvantages: Performance is lower than process-oriented.
Two, class class
A class is a template for creating objects.
1. Class creation
//1、创建类 class
class Start{
}
//2、利用类创建对象 new
new Start();2. Class: constructor constructor
The constructor() method is the constructor (default method) of the class, which is used to pass parameters and return an instance object. When an object instance is generated through the new command, this method is automatically called. If no definition is displayed, a constructor() will be automatically created for us inside the class
class Start{
//类的构造函数(默认方法)
//用于传递参数，返回实例对象，通过new命令生成对象实例时，自动调用该方法
constructor(name){
this.name=name;
}
}
//调用的时候一定要加new，一调用就会自动执行constructor构造函数
let str=new Start("小刘");
console.log(str.name);//小刘
let p=class Father{
constructor(name,age){
this.name=name;
this.age=age;
}
sing(){
console.log(111);
}
}
let obj1=new p();
console.log(p.name);//Father
// console.log(p.sing());//报错
obj1.sing();//11Summary: (1) Create a class through the class keyword, and we still habitually define the first letter of the class name as capitalized
(2) There is a constructor function in the class, which can accept the passed parameters and return the instance object at the same time
(3) The constructor function will automatically call this function as long as new generates an instance. If we do not write this function, this function will also be automatically generated
(4) Generate instance new cannot be omitted
(5) Finally, pay attention to the grammatical specification. When creating a class, do not add parentheses after the class name, add parentheses after the class name of the generated instance, and do not need to add function to the constructor
(6) Class expressions can also define classes. Class expressions can be named or unnamed. The name of a named class expression is local to the body of the class
3. Add methods to the class
(1) All functions in the class do not need to add function
(2) Multiple function methods do not need to be separated by commas, otherwise an error will be reported
(3) The method can also pass parameters. The public properties in the class are placed in the constructor. New must be added when calling, and the constructor constructor will be automatically executed once it is called.
class Start{
constructor(name){
this.name=name;
}
sing(list){
console.log("...唱歌");
console.log( this.name + list);//鱼鱼----冬天
}
}
let str1=new Start("鱼鱼");
str1.sing("----冬天");4. Class inheritance
(1) Writing method:
class Father{ //父类
}
class Son extends Father{ //子类继承父类
}(2) Usage:
class Father{ //父类
constructor(){
}
fish(){
console.log("鱼鱼鱼");
}
}
class Son extends Father{ //子类继承父类
}
//给子类实例化
let son=new Son();
son.fish();//鱼鱼鱼5. super keyword
The super keyword is used to access and call functions on the object's parent class;
You can call the constructor of the parent class, or you can call the ordinary function of the parent class (nearest principle)
Note: The subclass uses super in the constructor, which must be placed before this (the constructor of the parent class must be called before using the subclass constructor)
Example 1: Using super to call the constructor in the parent class can be achieved: the constructor of the parent class can be called
If the subclass wants to pass parameters to the parent class and then display the results, then pay attention to the pointing of this
class Father{ constructor(x,y){ this.x=x; this.y=y; } sum(){ console.log(this.x+this.y);//this points to the parent class constructor The data must also be the data of the parent class to be added } }
//This is wrong
class Son extends Father{
constructor(x,y){
this.x=x; //The this point here is the subclass Son, so the actual parameter of the subclass cannot be passed to the formal parameter of the parent class
this.y=y;
}
}
let son1=new Son(1,2);//The 1 and 2 here are passed to the constructor of the subclass Son
son1.sun();Solution: Add a super in the inheritance // super must be written before the subclass this! Call the constructor constructor in the parent class, pass x, y to the parent class, and the result can be output
class Son extends Father{
constructor(x,y){
super(x,y);
}
}
Example 2: Calling an ordinary function of the parent class
class Father{
say(){
return "zzzzzz"
}
}
class Son extends Father{
say(){
console.log("bbbbbbb");
super.say()//can call the function of the parent class
console.log(super.say());
}
}
let son3=new Son();
son3.say(); //The result before calling super: bbbbbbb The result after super calling the parent class: zzzzzz
Summary: In inheritance, if you instantiate a subclass to output a method, first check whether the subclass has this method. If so, execute the subclass first. If there is no such method in the subclass, check whether the parent class has this method. If so , just execute this method of the parent class (proximity principle)
6、static
1) static can only be accessed through classes. That is, static can only be called by the class itself, not by an instance of the class.
class Father{
constructor(name,age){
this.name=name;
this.age=age;
}
sing(){
console.log(this.name+'我今天真的好累');
}
static fb(){
console.log(this.name);
}
}
Father.song=function (){
console.log(this.name);
}
let obj1=new Father('才才',18);
obj1.sing();
//obj1.song();//报错
// obj1.fb();//报错
Father.fb();//Father
Father.song();//Father
2) Static methods can use this keyword to call other static methods in the same class.
3) In non-static methods, you cannot directly use the this keyword to access static methods. Instead, use the class name to call; or use the properties of the constructor to call the method.
7. Notes for ES6:
(1) In ES6, there is no variable promotion for classes, so the class must be defined before the object can be instantiated through the class;
(2) The common properties and methods in the class must be used with this
(3) The pointing problem of this in the class
(4) this in the constructor points to the caller of this method in the instance object method.
Example: Make a method to call sing after clicking
<button>按钮</button>
<script>
//类里面的共有的属性和方法一定要加this使用
class Star{
constructor(name,age){
//constructor里面的this指向实例化对象
//console.log(this);//s1实例对象
this.name=name;
this.age=age;
//可以直接在constructor里面调用sing方法,因为加了new就会马上调用constructor构造函数
// this.sing();//小徐（实例对象调用的sing)
//点击调用sing方法:首先先获取按钮（按钮是属于si实例对象的）
this.btn=document.querySelector("button");
this.btn.onclick=this.sing;
}
sing(){
//方法里面的this指向调用它的那个调用者
//点击事件后调用sing，所以这里的this指向btn按钮
console.log(123);
//console.log(this.name);
}
}
let s1=new Star("小徐",18);
//s1.sing();//123 小徐8. The bodies of class declarations and class expressions are executed in strict mode.
1) Strict mode turns JavaScript pitfalls straight into obvious bugs.
2) Strict mode fixes some errors that the engine is difficult to optimize.
3) The same code is sometimes faster in strict mode than in non-strict mode.
4) Strict mode disables some syntax that may be defined in future versions.
Use 'use strict'; to enter strict mode
Classes must use new to instantiate objects