慎用 somefunction.prototype 分析

本文探讨了在JavaScript中创建类时,如何选择使用私有还是公有方法,以及使用公有方法组织到对象中带来的便利与潜在问题。重点分析了如何在维护性和稳定性间做出合理选择。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在写 JavaScript 脚本的时候,为了创建一个类,如果不使用框架,一般情况我们都会使用 prototype 来给要创建的类增加公有方法

代码如下:

// code from jb51.net 
function Person(name) { 
this.Name = name; 

Person.prototype.SayHello = function() { 
alert('Hello, ' + this.Name); 

Person.prototype.SayBye = function() { 
alert('Goodbye, ' + this.Name); 


不过,有的时候,为了书写以及维护的方便,我们会把公有方法的声明写到一个对象里,然后赋值给 Person.prototype,例如: 
复制代码代码如下:

// code from jb51.net 
function Person(name) { 
this.Name = name; 

Person.prototype = { 
SayHello: function() { 
alert('Hello, ' + this.Name); 
}, 
SayBye: function() { 
alert('Goodbye, ' + this.Name); 



使用这种方式,在这个类具有大量公有方法的时候,就不需要维护许多的 Person 标识符,如果某一天这个类的名字需要改变,那么要改的地方只有两个,一个是 function 的声明,一个是 prototype 前面的标识符,如果是使用前一种方式的话,那么有多少个公有方法,就需要维护 N+1 个标识符了,虽然可以使用查找替换,但是从稳定上来说,查找替换可能会引起一些错误,这增加了维护的成本。 

这种方式虽然给我们的维护增加了便利,但也引发了另外一个隐藏的问题,就是类的 constructor 属性丢失的问题。 
复制代码代码如下:

// code from jb51.net 
function Person1(name) { 
this.Name = name; 

Person1.prototype.SayHello = function() { 
alert('Hello, ' + this.Name); 

Person1.prototype.SayBye = function() { 
alert('Goodbye, ' + this.Name); 

// code from jb51.net 
function Person2(name) { 
this.Name = name; 

Person2.prototype = { 
SayHello: function() { 
alert('Hello, ' + this.Name); 
}, 
SayBye: function() { 
alert('Goodbye, ' + this.Name); 


alert(new Person1('Bill').constructor); 
alert(new Person2('Steve').constructor); 

运行上面的测试代码我们可以发现,Person1 的 constructor 属性为 Person1 类的构造函数,但是 Person2 的 constructor 属性却是 Object,那么在需要使用 constructor 属性来判断对象类型的时候,就会出现问题。 
因此,在写 JavaScript 类的时候,如果不需要使用 constructor 属性来获取对象的类型,那么个人比较倾向于使用第二种写法,但是如果需要使用 constructor 属性以实现自己的反射机制或 GetType 函数等等,那么就要使用第一种写法。 
当然,如果在实现自己反射机制或 GetType 函数时并不依赖 constructor 属性,那么两种写法都是可以的了,例如额外维护一个成员变量,用于标识自身的类型等。也可以使用一些现成的JS框架,有一些框架已经实现了JS中类的实现等,例如 js.class,这就看个人需要进行取舍了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值