为什么在JavaScript中使用getter和setter是一个坏主意

如你所知,getter和setter已经成为了JavaScript的一部分。它们广泛支持所有的主流浏览器,甚至是IE8。

我不认为这个点子通常是错误的,但我认为它不是非常适合JavaScript。可能看起来getter和setter可以简化代码和节省时间,但其实它们会带来隐藏错误,并且这些错误第一眼看并不明显。

getter和setter如何工作?

首先小小地总结一下这些是什么东西:

有时候,我们希望能允许访问一个会返回动态计算值的属性,或者你可能想要反映内部变量的状态,而不使用显式的方法调用。

为了说明它们是如何工作的,让我们来看一个有着两个属性的person对象,这两个属性为:firstName和lastName,以及一个计算值:fullName。

var obj = { 

firstName:"Maks", 

lastName:"Nemisj" 

计算值fullName会返回firstName和lastName两者的串联。

Object.defineProperty(person, 'fullName', { 

get:function () { 

return this.firstName + ' ' + this.lastName; 

  } 

}); 

为了得到fullName的计算值,不需要像person.fullName()带可怕的括号,只需要使用简单的var fullName = person.fullName。

小编是一个有着5年工作经验的java程序员,对于java,自己有做资料的整合,一个完整学习java的路线,学习资料和工具,相信这里有很多学习java的小伙伴,我创立了一个2000人学习扣群,479121291。每晚都有java的直播课程。无论是初级还是进阶的小伙伴小编我都欢迎!

这同样适用于setter,你可以通过使用函数设置值:

Object.defineProperty(person, 'fullName', { 

set: function (value) { 

var names = value.split(' '); 

    this.firstName = names[0]; 

    this.lastName = names[1]; 

  } 

}); 

使用就和getter一样简单:person.fullName = ‘Boris Gorbachev’。这将调用上面定义的函数,并分离Boris Gorbachev成firstName和lastName。

问题在哪里?

你也许在想:“嘿,我喜欢getter和setter方法,它们感觉更自然,就像JSON一样。”你说得对,它们的确是这样的,但是我们先退一步来看一看fullName在getter和setter之前是如何工作的。

为得到值,我们将使用类似于getFullName()的一些东西,以及为了设置值,我们将使用person.setFullName(‘Maks Nemisj’)。

如果拼错函数名,person.getFullName()写成person.getFulName()会发生什么呢?

JavaScript会给出一个错误:

person.getFulName(); 

       ^ 

TypeError: undefinedis not a function 

这个错误会在适当的时候适当的地方被触发。访问函数不存在的对象将触发错误——这是好的。

现在,让我们来看看当用错误的名称来使用setter的时候会发生什么?

person.fulName = 'Boris Gorbachev'; 

什么也没有。对象是可扩展的,可以动态分配键和值,因此不会有错误在运行时被抛出。

这样的行为意味着错误可能显示在用户界面上的某个地方,或者,当某些操作被执行在错误的值上时,而并非是打字错误的时刻。

跟踪应该发生在过去但却显示在将来的代码流上的错误是如此有意思。

seal行不行

这个问题可以通过sealAPI来部分解决。只要对象是密封的,它就不能突变,也就是意味着fulName将试图分配一个新键到person对象,并且它会失败。

出于某种原因,当我在Node.js V4.0测试这个的时候,它没有按照我期待的那样工作。所以,我不能确保这个解决方案。

而更令人沮丧的是,对于setter一点也没有解决方法。正如我前面提到的,对象是可扩展和可故障保护的,这意味着访问一个不存在的键不会导致任何错误。

如果这种情况只适用于对象的文字的话,我不会多此一举地写这篇文章,但在ECMAScript 2015(ES6)和用类定义getter和setter能力的兴起之后,我决定写下关于潜在陷阱的博客。

类的到来

我知道当前类在一些JavaScript社区不是非常受欢迎。人们对在函数式/基于原型的语言,例如JavaScript中是否需要它们,争执不休。然而,事实是,类就在ECMAScript 2015(ES6)规范说明中,并且将存在于此一段时间。

对我来说,类是指定在类的外部世界(消费者)和应用程序的内部世界之间的定义良好的API的一种方式。这就是白纸黑字放入规则的抽象,并且我们假定这些规则不会很快改变。

改进person对象,做一个它的real类。person定义了接口用于获取和设置fullName。

class Person { 

  constructor(firstName, lastName) { 

    this.firstName = firstName; 

    this.lastName = lastName; 

  } 

  getFullName() { 

return this.firstName + ' ' + this.lastName; 

  } 

  setFullName(value) { 

var names = value.split(' '); 

    this.firstName = names[0]; 

    this.lastName = names[1]; 

  } 

类定义了一个严格的接口描述,但getter和setter方法使其变得不太严格。我们已经习惯了臃肿的错误,当工作于对象文字和JSON时的键中出现拼写错误的时候。我希望至少类能够更严格,并且在这个意义上,提供更好的反馈给开发人员。

虽然这种情况在定义getter和setter在一个类上的时候没有任何不同。但它不会阻止任何人拼错。

class Person { 

  constructor(firstName, lastName) { 

    this.firstName = firstName; 

    this.lastName = lastName; 

  } 

  get fullName() { 

return this.firstName + ' ' + this.lastName; 

  } 

set fullName(value) { 

var names = value.split(' '); 

    this.firstName = names[0]; 

    this.lastName = names[1]; 

  } 

有拼写错误的执行不会给出任何错误:

var person = new Person('Maks', 'Nemisj'); 

console.log(person.fulName); 

同样不严格,不冗长,不可追踪的行为导致可能会出错。

在我发现这一点后,我有一个问题:在使用getter和setter的时候,有没有什么可以做的,以便于使得类更严格?我发现:有是肯定有,但是这值得吗?增加额外层次的复杂性到代码就只是为了使用数量更少的括号?对于API定义,也可以不使用getter和setter,而这样一来就能解决这个问题。除非你是一个铁杆开发人员,并愿意继续进行,不然还有另一种解决方案,如下所述。

proxy来帮助?

除了getter和setter方法,ECMAScript 2015(ES6)还自带proxy对象。proxy可以帮助你确定委托方法,这些委托方法可以在实际访问键执行之前,用来执行各种操作。事实上,它看起来像动态getter / setter方法。

proxy对象可以用来捕捉任何到类的实例的访问,并且如果在类中没有找到预先定义的getter或setter就会抛出错误。

为了做到这一点,必须执行下面两个操作:

创建基于Person原型的getter和setter清单。

创建将测试这些清单的Proxy对象。

让我们来实现它。

首先,为了找出什么样的getter和setter方法可以用在类Person上,可以使用getOwnPropertyNames和getOwnPropertyDescriptor:

var names = Object.getOwnPropertyNames(Person.prototype); 

var getters = names.filter((name) => { 

var result =  Object.getOwnPropertyDescriptor(Person.prototype,name); 

return !!result.get; 

}); 

var setters = names.filter((name) => { 

var result =  Object.getOwnPropertyDescriptor(Person.prototype,name); 

return !!result.set; 

}); 

在此之后,创建一个Proxy对象:

var handler = { 

get(target,name) { 

if (getters.indexOf(name) != -1) { 

return target[name]; 

    } 

throw new Error('Getter "' + name + '" not found in "Person"'); 

  }, 

set(target, name) { 

if (setters.indexOf(name) != -1) { 

return target[name]; 

    } 

throw new Error('Setter "' + name + '" not found in "Person"'); 

  } 

}; 

person = new Proxy(person, handler); 

现在,只要你尝试访问person.fulName,就会显示Error: Getter “fulName” not found in “Person”的消息。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 227,156评论 6 529
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 97,866评论 3 413
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 174,880评论 0 373
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 62,398评论 1 308
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 71,202评论 6 405
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 54,743评论 1 320
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 42,822评论 3 438
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 41,962评论 0 285
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 48,476评论 1 331
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 40,444评论 3 354
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 42,579评论 1 365
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 38,129评论 5 355
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 43,840评论 3 344
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 34,231评论 0 25
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 35,487评论 1 281
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 51,177评论 3 388
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 47,568评论 2 370

推荐阅读更多精彩内容

  • Scala与Java的关系 Scala与Java的关系是非常紧密的!! 因为Scala是基于Java虚拟机,也就是...
    灯火gg阅读 3,468评论 1 24
  • 出题者简介: 孙源(sunnyxx),目前就职于百度,负责百度知道 iOS 客户端的开发工作,对技术喜欢刨根问底和...
    戈多_于勒阅读 1,804评论 0 5
  • 青春用来挥霍用来做梦用来努力的, 你应该用这样的时光做你想做的事情, 变成你想变成的人, 哪怕这很难, 哪怕会失败...
    梁伟春阅读 321评论 0 1
  • 很久很久以前,遥远的东方有一个国家,那里越有学问的人就会拥有越庞大的身躯。每天早上起来很多人都会去体重秤上称一称,...
    时间草原_2009阅读 160评论 0 0
  • 去看望姐夫的妈妈。一进门,老太太直直的在炕上坐着,手上插着输液管,精神明显比上周六好多了。姐夫坐在他妈妈身...
    爱与感赏阅读 292评论 0 0