ES6语法的构造函数
封装class类
与ES5语法区别,封装的是class关键词,不会被预解析
语法格式:
class 类名{
构造器,专门接收封装类时的参数和给实例化对象定义属性和属性值
在给实例化对象定义属性和属性值
不知道实例化对象的具体名称,使用this来替换
constructor(参数...){
this.属性 = 参数;
this.属性 = 属性值;
}
定义实例化对象中,需要使用的方法和函数
方法名称(){
在方法中,是在定义变量,使用let\const\var 等来声明变量
let 变量 = 数值;
如果调用对象的数据,必须是 对象.属性
对象名称不确定,使用this来替换
}
}
<script>
const obj1 = {
name:'张三',
age:18,
}
const obj2 ={};
obj2.name = '张三';
obj2.age = 18;
一.ES5构造函数中的一些问题
ES5的构造函数有一些问题
最大的问题,就是定义 prototype 是在函数之外定义的
调用构造函数,生成实例化对象,一定要在定义 prototype 之后
否则生成的实例化对象,只有属性没有函数方法
ES6中,新增语法形式 class 类
是一种新的定义构造函数的语法
作用和原理与ES5语法完全相同
只是语法格式和书写方式,不同
const obj1 = new Fun('张三');
function Fun(name){
this.name = name;
}
Fun.prototype.f = function(){
console.log(this.name)
}
const obj2 = new Fun('李四');
obj2.f();
二.ES5和ES6中构造函数的对比、class的用法
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);