三种js实现类的方法

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类实现的解释,能够更直白,更好的理解上面的这些内容

以上为个人理解,如有不对,请留言

原创文章,作者:吐槽君,如若转载,请注明出处:https://www.pipipi.net/14813.html

(1)
上一篇 2021年6月4日 下午12:45
下一篇 2021年6月4日 下午1:00

相关推荐

发表评论

登录后才能评论