js比较思维模型
author:一佰互联 2019-03-27   click:226

简介:比较思维模型通过前一章已经明白了“类”和“委托”这两种设计模式的理论区别,接下来我们看看它们在 思维模型方面的区别。我会通过一些示例(Foo、Bar)代码来比较一下两种设计模式(面向对象和对象关联) 具体的实 ...

比较思维模型

通过前一章已经明白了“类”和“委托”这两种设计模式的理论区别,接下来我们看看它们在 思维模型方面的区别。我会通过一些示例(Foo、Bar)代码来比较一下两种设计模式(面向对象和对象关联) 具体的实现方法。下面是典型的(“原型”)面向对象风格:

js比较思维模型

子类 Bar 继承了父类 Foo,然后生成了 b1 和 b2 两个实例。b1 委托了 Bar.prototype,后者 委托了 Foo.prototype。这种风格很常见,你应该很熟悉了。下面我们看看如何使用对象关联风格来编写功能完全相同的代码:

js比较思维模型

这段代码中我们同样利用 [[Prototype]] 把 b1 委托给 Bar 并把 Bar 委托给 Foo,和上一段 代码一模一样。我们仍然实现了三个对象之间的关联。 但是非常重要的一点是,这段代码简洁了许多,我们只是把对象关联起来,并不需要那些 既复杂又令人困惑的模仿类的行为(构造函数、原型以及 new)。 问问你自己:如果对象关联风格的代码能够实现类风格代码的所有功能并且更加简洁易 懂,那它是不是比类风格更好? 下面我们看看两段代码对应的思维模型。首先,类风格代码的思维模型强调实体以及实体间的关系

js比较思维模型

实际上这张图有点不清晰 / 误导人,因为它还展示了许多技术角度不需要关注的细节(但 是你必须理解它们)!从图中可以看出这是一张十分复杂的关系网。此外,如果你跟着图 中的箭头走就会发现,JavaScript 机制有很强的内部连贯性。举例来说,JavaScript 中的函数之所以可以访问 call(..)、apply(..) 和 bind(..),就是因为函数本身是对象。而函数对象同样有 [[Prototype]] 属性并且关 联到 Function.prototype 对象,因此所有函数对象都可以通过委托调用这些默认方法。 JavaScript 能做到这一点,你也可以!好,下面我们来看一张简化版的图,它更“清晰”一些——只展示了必要的对象和关系

js比较思维模型

仍然很复杂,是吧?虚线表示的是 Bar.prototype 继承 Foo.prototype 之后丢失的 .constructor 属性引用,它们还没有被修复。即使移除这 些虚线,这个思维模型在你处理对象关联时仍然非常复杂。现在我们看看对象关联风格代码的思维模型

js比较思维模型

通过比较可以看出,对象关联风格的代码显然更加简洁,因为这种代码只关注一件事:对 象之间的关联关系。 其他的“类”技巧都是非常复杂并且令人困惑的。去掉它们之后,事情会变得简单许多 (同时保留所有功能)。本文仅代表作者个人观点,不代表巅云官方发声,对观点有疑义请先联系作者本人进行修改,若内容非法请联系平台管理员,邮箱2522407257@qq.com。更多相关资讯,请到巅云www.yinxi.net学习互联网营销技术请到巅云建站www.yx10011.com。