1.构造函数实现类
2.原型方法实现类
3.两种混合实现类
(其实应该还加上一种,就是工厂方法的实现)
每个方法都有各自的优缺点,我就简要的表达我的看法
1.工厂方法
function Person(name, age, work){
let obj=new Object();
obj.name=name;
obj.age=age;
obj.work=work;
return obj;
}
let a=new Person('ming', 18, 'teacher');
let b=new Person('ming', 18, 'teacher');
使用这个方式new出来的对象,对于类型是不明确的,总是指向object,而不是指向类
2.构造函数方式
function Person(name, age, work){
this.name=name;
this.work=work;
this.age=age;
this.showName=function(){
console.log(this.name);
}
}
let a=new Person('ming', 18, 'teacher');
let b=new Person('ming', 18, 'teacher');
使用这种方式实现类,相比工厂方法,构造函数有了正确的指向,那么为什么这种方法也不行呢?
请看下面的代码
let a=new Person('ming', 18, 'teacher');
let b=new Person('ming', 18, 'teacher');
a.showName===b.showName //false
两个对象的同一个函数方法竟然不是同一个,为什么要是同一个才是更好的呢?
因为对于类来说,方法都是同一套代码,要是在new出来的两个对象中,两个函数方法是不相等的,那么就会增加多一块内存占用,会造成js性能的下降,所以有了原型方法实现的类
3.原型方法
js中的没一个构造函数都有一个prototype属性,prototype指向一个原型对象,而这个原型对象上面的方法都会被这个构造函数的
实例所继承,所以我们可以在构造函数的原型上添加所需要的方法和属性
function Person(){
}
Person.prototype.name='ming';
Person.prototype.age=18;
Person.prototype.showName=function(){
console.log(this.name)
};
let a=new Person();
let b=new Person();
a.showName();//ming
b.showName();//ming
a.showName===b.showName //trhe
可以看到,在原型上面定义的方法,不同的实例访问的都是同一个方法,而不是像构造函数一样生成了两个不一样地址的但是代码一样方法
当然,原型方法实现的类也有不适合的地方,第一点就是难以使用传参的方式进行赋值,第二点也是最重要的一点就是,在原型上面定义的属性,是一种浅赋值,对于基本类型还好,但是对一个数组或对象,就会一个发生了改变,另一个也会发生改变
function Person(){
}
Person.prototype.name='ming';
Person.prototype.age=18;
Person.prototype.arr=[12, 5, 8];
Person.prototype.showName=function(){
console.log(this.name)
};
let a=new Person();
let b=new Person();
a.arr[1]=99;
console.log(a.arr) //[12,99,8]
console.log(b.arr) //[12,99,8]
可以看到当a里面改变了arr数组的某个值,b也同时发生了改变,于是将构造函数与原型混合起来使用,貌似成为了最优的写法
4.混合方法实现类
使用混合方式来实现类,在我的理解中,就是将属性写在方法体中,就像构造函数实现类,两个实例同一个方法却是不一样的。
在原型上写方法,以此来实现更加完好的类。
function Person(name, age){
this.name=name;
this.age=age;
}
Person.prototype.showName=function(){
alert(this.name)
}
Person.prototype.showAge=function(){
alert(this.age)
}
let a=new Person('ming', 18)
以上就是我对于es5实现类的理解,强烈建议翻看红宝书对于es5类实现的解释,能够更直白,更好的理解上面的这些内容