Orientado a procesos y orientado al pensamiento
Orientado al proceso
Orientado a procesos es analizar los pasos necesarios para encontrar el problema y luego usar funciones para implementar estos pasos uno por uno, y luego llamarlos uno por uno cuando los use.
Orientado a la mente
Orientado al proceso es la división de asuntos en objetos y la división del trabajo y la cooperación entre objetos.
Características orientadas al pensamiento
- Extraer los atributos y comportamientos comunes del objeto y encapsularlos en una clase (plantilla)
- Crea una instancia de la clase y obtén el objeto de la clase
Un objeto es una colección desordenada de propiedades y métodos relacionados, y todas las cosas pueden ser un objeto. Por ejemplo, números de cadena, etc.
- Atributos: las características del objeto, que están representadas por atributos en el objeto (sustantivo)
- Método: El comportamiento de un objeto, representado por un método en el objeto (verbo
clase
En el proceso de ES6, se introdujo el concepto de clase. La clase extrae la parte común del objeto y la clase generalmente se refiere a una clase grande.
Crea clases y objetos
Precauciones
El objeto instanciado debe tener nuevo siempre que se ejecute el constructor de la nueva clase de palabra clave.
Constructor () es el constructor de la clase, utilizado para pasar parámetros y devolver el objeto instanciado.
Use class para crear una clase con la primera letra del nombre de la clase en mayúscula, sin agregar paréntesis
, no es necesario que todas las funciones de la clase agreguen función y no es necesario agregar una coma entre varias funciones.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建类与对象</title>
</head>
<body>
</body>
<script>
// 创建类
class People {
constructor(name, age) {
this.name = name;
this.age = age;
}
say(sing) {
console.log(sing)
}
}
// 创建实例化对象
let YaoZiMo = new People('尧子陌', "18");
console.log(YaoZiMo.name);
console.log(YaoZiMo.age);
YaoZiMo.say('两只蝴蝶')
</script>
</html>
Herencia de clases
Utilice extensiones para permitir que las subclases hereden de la clase principal
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>类的继承</title>
</head>
<body>
</body>
<script>
// 类的继承
class Father {
constructor() {
}
money() {
console.log(100)
}
}
// 继承父类中的方法与属性
class Son extends Father {
}
// 创建子类的实例化对象
var son = new Son();
son.money()
</script>
</html>
Llamar a la función normal
super palabra clave
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>super调用普通函数</title>
</head>
<body>
</body>
<script>
// 父类
class Father {
say() {
return 'hello word'
}
}
// 子类
class Son extends Father {
say() {
console.log(super.say())
}
}
var son = new Son();
son.say()
</script>
</html>
Las subclases heredan los métodos de la clase padre y amplían sus propios métodos.
Nota: se debe llamar a super () antes de esto en el constructor de subclase
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>子类继承父类的方法 同时扩展子类的方法 </title>
</head>
<body>
</body>
<script>
// 父类 有加法方法
class Father {
constructor(x, y) {
this.x = x;
this.y = y;
}
sum() {
console.log(this.x + this.y)
}
}
// 子类
class Son extends Father {
constructor(x, y) {
// super（）方法必须在子类的this之前进行调用
super(x, y)
this.x = x;
this.y = y;
}
subduction() {
console.log(this.x - this.y)
}
}
// 对子类进行实例化 获取类的对象
var son = new Son(5, 3);
// 子类调用父类的方法
son.sum()
son.subduction()
</script>
</html>
Tres puntos a tener en cuenta sobre clases y objetos en ES6.
1. En ES6, la clase no tiene promoción variable, por lo que la clase debe definirse antes de que se pueda instanciar el objeto
2. Las propiedades públicas y los métodos en la clase deben agregarse este
3. El esto en el constructor apunta al instanciado objeto, y esto en los puntos del método El llamador de este método
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用类的注意事项</title>
</head>
<body>
<button type="button" class="bth">点击</button>
</body>
<script>
var that;
var _that;
class People {
constructor(name, age) {
that = this;
console.log(this)
this.name = name;
this.age = age;
this.bth = document.querySelector('button');
this.bth.onclick = this.sing;
}
sing() {
console.log(this) //里面的this指向bth按钮
console.log(that.name) //that指是constructor中的this
}
dance() {
_that = this;
console.log(this) //此时的this指向实例化对象 因为实例化对象调用了dance这个函数
}
}
// 创建类
var people = new People('尧子陌');
console.log(that === people)
people.dance()
console.log(_that === people)
</script>
</html>
