0
点赞
收藏
分享

微信扫一扫

4. 前端设计模式之原型模式

Prototype Pattern

原型模式: 在多个对象间共享相同的属性  

JavaScript原生支持原型链也是实现继承的基础, 如以下代码虽然是使用的ES2016新的语法classc创建的类Dog,然后又使用new实例化对象dog1、dog2、dog3,底层依然操作的原型链:

class Dog {
  constructor(name) {
    this.name = name;
  }
 
  bark() {
    return `Woof!`;
  }
}
 
const dog1 = new Dog("Daisy");
const dog2 = new Dog("Max");
const dog3 = new Dog("Spot");

创建的原型链:

4. 前端设计模式之原型模式_原型链

对象dog的__proto__属性执行Dog.prototype, 对象本身拥有name属性,但bark属性是在类中定义的,当我们调用dog1.bark时,代码执行器会先在当前对象中查找,如果没有找到就在dog1.__proto__指向的对像中查找,这样一层一层查找直到找到。

JavaScript早期并不支持Classs. 如果需要实现继承就是通过修改对象的原型指向完成。

var dog1 = {name:'dog1'}
dog1.__proto__ = {
  hello: function(){ console.log('Hello FusionZhu')}
};
dog1.hello();//print Hello FusionZhu

也可以使用Object.create在创建对象时为其指定原型

const dog = {
  bark() {
    console.log(`Woof!`);
  }
};

const pet1 = Object.create(dog);//这样pet1的原型就指向dog对象,也可以说pet1继承于dog

pet1.bark(); // Woof!

举报

相关推荐

0 条评论