面向对象和面向过程
// 从面向过程,改造成面向对象
// 1,获取的数据,标签对象,要以参数的形式,定义给构造函数和实例化对象
// 获取标签对象时,一般获取父级,传参父级,在构造函数中,通过父级标签,获取子级标签独享
// 2,必须非常非常非常注意,this的指向,一般在面向对象中,都是使用箭头函数
// 如果万一不能清楚地知道this指向,可以先输出 this
// 3,其他步骤和思路基本相同,没有区别
// 总结:
// 1,改不改箭头函数,看内部是否需要 指向实例化对象的this
// 如果需要,可以改箭头函数,或者是提前存储this指向
// 如果不许需要,改不改箭头函数都行
// 一切以实现程序为最终需求,程序能执行就可以
// 2,之前面向过程的是参数,数据等,
// 现在是面向对象编程,要在对象的属性中,定义参数数据
// 也就是通过 构造函数 this.属性 = 属性值 语法来定义需要获取的参数数据
// 3,定义在构造函数方法中的一些变量数据,并不是定义在实例化对象中的属性
// 没有必须写成 this.属性 = 属性值 的形式
// 只要写成普通的变量定义即可
// 使用时,也是直接使用变量,不需要添加this
// 4,在构造函数的方法中,调用其他的函数方法
// 语法形式 应该是 实例化对象.函数方法名称()
// 在构造函数中,使用this来指向实例化对象,写成 this.函数方法名称()
ES6 class类
<script>
// ES5的构造函数有一些问题
// 最大的问题,就是定义 prototype 是在函数之外定义的
// 调用构造函数,生成实例化对象,一定要在定义 prototype 之后
// 否则生成的实例化对象,只有属性没有函数方法
// ES6中,新增语法形式 class 类
// 是一种新的定义构造函数的语法
// 作用和原理与ES5语法完全相同
// 只是语法格式和书写方式,不同
// 如果先调用构造函数,只有属性没有方法
// 因为定义方法的步骤还没执行呢
const obj1 = new Fun('张三');
// obj1.f() // 执行结果是报错的
function Fun(name){
this.name = name;
}
// 在定义函数外,定义prototype
Fun.prototype.f = function(){
console.log(this.name)
}
const obj2 = new Fun('李四');
obj2.f();
</script>
<script>
// ES5和ES6语法的对比
// 1,ES5语法
function Fun1(name,age){
this.name = name;
this.age = age;
}
Fun1.prototype.f1 = function(){
console.log(this.name , this.age);
}
// 2,ES6语法 class
class Fun2{
constructor(name,age){
this.name = name;
this.age = age;
}
f2(){
console.log(this.name , this.age);
}
}
const obj1 = new Fun1('张三',18);
const obj2 = new Fun2('李四',20);
console.log(obj1);
console.log(obj2);
</script>
Processed:
0.013, SQL:
10
