资讯专栏INFORMATION COLUMN

“类”的设计模式

peixn / 2316人阅读

摘要:类的设计模式类的设计模式实例化继承和相对多态。,每个原型都有一个属性指向关联的构造函数。为了方便理解,这里我们简单模拟实现下面介绍,另外两种写法行为委托设计模式委托调用简单模拟实现语法可以简洁地定义类方法

“类”的设计模式

类的设计模式:实例化、继承和(相对)多态。

JavaScript通过原型链,在两个对象之间创建一个关联。这样,一个对象就可以通过委托访问另一个对象的属性和函数,从而达到“继承”的实现。

下面来看一个例子:

</>复制代码

  1. function Foo(name) {
  2. this.name = name;
  3. }
  4. Foo.prototype.myName = function () {
  5. return this.name;
  6. };
  7. function Bar(name, label) {
  8. Foo.call(this, name);
  9. this.label = label;
  10. }
  11. Bar.prototype = new Foo(); //实现prototype的关联
  12. Bar.prototype.myLabel = function () {
  13. return this.label;
  14. };
  15. var a = new Bar("a", "obj a");
  16. a.myName(); // "a"
  17. a.myLabel(); // "obj a"
构造函数和实例原型的关系图(红色的就是原型链)

原型prototype

每个函数都有一个prototype属性,函数的prototype属性指向了一个对象,这个对象正是调用该构造函数而创建的实例的原型。例子中Bar.prototype就是实例a的原型。

proto

这是每一个JavaScript对象(除了 null )都具有的一个属性,叫__proto__,这个属性会指向该对象的原型。

</>复制代码

  1. a.__proto__ === Bar.prototype //true
  2. Bar.prototype.__proto__ === Foo.prototype //true
constructor

constructor,每个原型都有一个 constructor 属性指向关联的构造函数。

</>复制代码

  1. Foo === Foo.prototype.constructor
为了方便理解,这里我们简单模拟实现new

</>复制代码

  1. function objectFactory() {
  2. var obj = new Object(),Constructor = [].shift.call(arguments);
  3. obj.__proto__ = Constructor.prototype;
  4. var ret = Constructor.apply(obj, arguments);
  5. return typeof ret === "object" ? ret : obj;
  6. };

下面介绍,另外两种写法:

Object.create(行为委托设计模式)

</>复制代码

  1. var Foo = {
  2. init: function(name){
  3. this.name = name;
  4. },
  5. myName: function(){
  6. return this.name;
  7. }
  8. };
  9. var Bar = Object.create(Foo);
  10. Bar.setup = function(name, label){
  11. // 委托调用
  12. this.init(name);
  13. this.label = label;
  14. };
  15. Bar.myLabel = function(){
  16. return this.label;
  17. };
  18. var a = Object.create( Bar );
  19. a.setup("a", "obj a");
  20. a.myName(); // "a"
  21. a.myLabel(); // "obj a"
简单模拟实现Object.create

</>复制代码

  1. Object.create = function (o) {
  2. var F = function () {};
  3. F.prototype = o;
  4. return new F();
  5. };
class(class 语法可以简洁地定义类方法)

</>复制代码

  1. class Foo {
  2. constructor(name) {
  3. this.name = name;
  4. }
  5. myName() {
  6. return this.name;
  7. }
  8. }
  9. class Bar extends Foo {
  10. constructor(props, label) {
  11. super(props);
  12. this.label = label;
  13. }
  14. myLabel() {
  15. return this.label;
  16. }
  17. }
  18. var a = new Bar("a", "obj a");
  19. a.myName(); // "a"
  20. a.myLabel(); // "obj a"

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/97646.html

相关文章

  • Learning PHP —— 设计模式 | Chap2:设计模式与UML

    摘要:设计模式设计模式基本原则设计原则按接口而不是按实现来编程按接口而不是按实现编程是指,要将变量设置为一个抽象类或接口数据类型的实例,而不是一个具体实现的实例。例如父类的一个改变会逐级向下传递给子类实现,这可能会影响子类使用的某个算法。 设计模式 设计模式基本原则 设计原则 ① : 按接口而不是按实现来编程 按接口而不是按实现编程是指,要将变量设置为一个抽象类或接口数据类型的实例,而不是一...

    senntyou 评论0 收藏0
  • JavaScript工厂模式

    摘要:基于工厂角色和产品角色的多态性设计是工厂方法模式的关键。工厂方法模式之所以又被称为多态工厂模式,是因为所有的具体工厂类都具有同一抽象父类。工厂方法模式总结工厂方法模式是简单工厂模式的进一步抽象和推广。 JavaScript工厂模式 首先需要说一下工厂模式。工厂模式根据抽象程度的不同分为三种 简单工厂模式 工厂方法模式 抽象工厂模式 1.简单工厂模式 简单工厂模式:又称为静态工厂方法...

    oujie 评论0 收藏0
  • 设计模式 ----- 开篇

    摘要:与类型库相比,设计模式是一个更为普遍的概念。是在年,由建筑设计大师亚力山大建筑的永恒之道描述模式是一条由三部分组成的通过规则它表示了一个特定环境一类问题和一个解决方案之间的关系。设计模式是在这方面开始探索的一块里程碑。 设计模式并非类库 为了方便地编写java程序,我们会使用类库,但设计模式不是类库。 与类型库相比,设计模式是一个更为普遍的概念。类库是由程序组合...

    timger 评论0 收藏0
  • Python中面向对象-怎么创建一个

    摘要:文字有点长,对于不想看文字的朋友,可以去这里看视频,视频可能更好理解本节课,我们来学习,如何创建一个类,也就是怎么用画设计方案先来看一下前面课程里出现过的几张设计方案前面女娲造人的故事里,女娲创造了张设计方案我们接下来根据那个故事的节奏,也 文字有点长,对于不想看文字的朋友,可以去这里看视频,视频可能更好理解https://www.piqizhu.com/v/1GK... 本节课,我...

    only_do 评论0 收藏0
  • 浅谈25种设计模式(4/25)(此坑未填)

    摘要:适配器模式桥接模式过滤器模式组合模式装饰器模式外观模式享元模式代理模式行为型模式这些设计模式特别关注对象之间的通信。对象适配器另外一种适配器模式是对象适配器,它不是使用多继承或继承再实现的方式,而是使用直接关联,或者称为委托的方式。 设计模式汇总 创建型模式 这些设计模式提供了一种在创建对象的同时隐藏创建逻辑的方式,而不是使用新的运算符直接实例化对象。这使得程序在判断针对某个给定实例需...

    0xE7A38A 评论0 收藏0
  • PHP高级特性-反射Reflection以及Factory工厂设计模式结合使用[代码实例]

    摘要:反射提供给面向对象编程可以自省的能力,即反射。在简单工厂模式中,根据传递的参数来返回不同的类的实例简单工厂模式又称为静态工厂方法模式。也就是简单工厂模式工厂工厂类。PHP高级特性-反射以及工厂设计模式的结合使用 [结合 Laravel-Admin 代码实例讲解]利用反射来实现工厂模式的生产而无需创建特定的工厂类本文地址http://janrs.com/?p=833转载无需经过作者本人授权转载...

    番茄西红柿 评论0 收藏2637

发表评论

0条评论

最新活动
阅读需要支付1元查看
<