可以做产品设计网站,中国软件公司排行,南宁建设网,苏州模板建站定制Prototype pattern
Prototype pattern可便于同类型的多个对象共享属性。原型#xff08;prototype#xff09;是JS原生的对象#xff0c;其他对象可以通过原型链#xff08;prototype chain#xff09;来访问原型。单独看这句描述可能还是有点儿抽象#xff0c;下面通过…Prototype pattern
Prototype pattern可便于同类型的多个对象共享属性。原型prototype是JS原生的对象其他对象可以通过原型链prototype chain来访问原型。单独看这句描述可能还是有点儿抽象下面通过具体的示例来详细阐述。
class Dog {constructor(name) {this.name name;}bark() {return Woof!;}
}const dog1 new Dog(Kadi);
console.log(dog1.__proto__);
console.log(Dog.prototype);这里可以看到constructor有一个name属性;根据ES6类的语法规则所有在类中定义的属性(本例的属性bark)都自动加入到类的prototype中,Dog类本身有两个属性constructor和bark。
有两种方式可以查看类的原型中的属性一种是通过类本身的prototype另一种是通过实例的__proto__。 从上图的调试信息可以看到Dog类的prototype也是一个object其中有两个属性bark和constructor另外还有一个原型对象([[Prototype]])。 通常类的实例的__proto__直接引用类的prototype如果类本身不包含某个属性JS就会向下搜索原型链查看在原型链中是否能找到被访问的属性。而在dog1实例中发现有两个[[prototype]]而且还有包含关系这就是所谓的原型链。
因为所有实例都可以访问类的原型对象因此原型模式使得实例在访问相同属性时不用每次都创建该属性的副本。只需要将属性加入到原型中则所有的实例都可以访问。另外在创建实例对象后也支持添加新的属性到原型中其他实例对象也可以访问这个新加入的属性。
const dog2 new Dog(Husky)
Dog.prototype.play () console.log(playing);
dog1.play();我们再创建一个“Husky”的实例然后对Dog类的原型添加一个新的属性play接着通过dog1实例来调用play函数看能否正常运行。 从运行结果来看dog1能正常访问play属性。
再举个例子定义一个SuperDog并继承DogSuperDog有一个fly属性。通过创建一个SuperDog的实例dog3且dog3调用bark属性
class SuperDog extends Dog {constructor(name) {super(name);}fly() {console.log(Flying!);}
}const dog3 new SuperDog(Super)
dog3.fly();
dog3.bark();
console.log(dog3.__proto__);此示例中有3级原型链实例访问属性的搜索路径也非常清晰。dog3._proto_ - SuperDog.prototype - Dog.prototype。
完整示例代码
class Dog {constructor(name) {this.name name;}bark() {console.log(Woof!);}
}class SuperDog extends Dog {constructor(name) {super(name);}fly() {console.log(Flying!);}
}const dog1 new Dog(Kadi);
console.log(dog1.__proto__);
console.log(Dog.prototype);const dog2 new Dog(Husky)
Dog.prototype.play () console.log(playing);dog1.play();const dog3 new SuperDog(Super)
dog3.fly();
dog3.bark();
console.log(dog3.__proto__);debugger
