/** * Prototype Pattern 原型是一种创建型设计模式, 使你能够复制对象, 甚至是复杂对象, 而又无需使代码依赖它们所属的类。 * The example class that has cloning ability. We'll see how the values of field * with different types will be cloned. */ class Prototype { public primitive: any; public ducomponent: object; public circularReference: ComponentWithBackReference; public clone(): this { const clone = Object.create(this); clone.component = Object.create(this.ducomponent); // Cloning an object that has a nested object with backreference // requires special treatment. After the cloning is completed, the // nested object should point to the cloned object, instead of the // original object. Spread operator can be handy for this case. clone.circularReference = { ...this.circularReference, prototype: { ...this }, }; return clone; } } /** * */ class ComponentWithBackReference { public prototype; constructor(prototype: Prototype) { this.prototype = prototype; } } /** * The client code. */ function clientCodeproto() { const p1 = new Prototype(); p1.primitive = 245; p1.ducomponent = new Date(); p1.circularReference = new ComponentWithBackReference(p1); let str=""; const p2 = p1.clone(); // if (p1.primitive == p2.primitive) { console.log('Primitive field values have been carried over to a clone. Yay!'); str=str+"Primitive ;"; } else { console.log('Primitive field values have not been copied. Booo!'); str=str+"not been copied;"; } // if (p1.ducomponent == p2.ducomponent) { console.log('Simple component has not been cloned. Booo!'); str=str+"Simple component not been cloned;"; } else { console.log('Simple component has been cloned. Yay!'); str=str+"Simple component;"; } // if (p1.circularReference == p2.circularReference) { console.log('Component with back reference has not been cloned. Booo!'); str=str+"Component not been cloned;"; } else { console.log('Component with back reference has been cloned. Yay!'); str=str+"Component been cloned;"; } // if (p1.circularReference.prototype == p2.circularReference.prototype) { console.log('Component with back reference is linked to original object. Booo!'); str=str+"Component to original object;"; } else { console.log('Component with back reference is linked to the clone. Yay!'); str=str+" Component to the clone;"; } return str; } let strpro=clientCodeproto(); let strpro1="geovindu"; let messageprototype: string = 'Hello World,This is a typescript!,涂聚文 Geovin Du Web'; document.body.innerHTML = messageprototype+","+strpro+","+strpro1+",TypeScript 原型方法模式"
调用:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <head><title>TypeScript:原型模式Prototype Pattern</title> <meta name="Description" content="geovindu,涂聚文,Geovin Du"/> <meta name="Keywords" content="geovindu,涂聚文,Geovin Du"/> <meta name="author" content="geovindu,涂聚文,Geovin Du"/> </head> <body> <script src="dist/prototypets.js"></script> </body> </html>
输出:
https://www.typescriptlang.org/docs/handbook/modules.html
https://www.typescriptlang.org/docs/handbook/classes.html
https://www.koderhq.com/tutorial/typescript/get-set/
https://dev.to/jmalvarez/builder-pattern-in-typescript-3on0
https://github.com/josemiguel-alvarez/design-patterns-typescript/
https://www.sourcecodeexamples.net/2020/08/typescript-prototype-pattern-example.html
https://www.tutorialspoint.com/typescript/typescript_object_prototype.htm
https://sbcode.net/typescript/prototype/
https://dev.to/takaakit/uml-diagram-for-gof-design-pattern-examples-in-typescript-46d5
https://www.dofactory.com/javascript/design-patterns/prototype
- typescript Prototype Patterntypescript prototype pattern creational prototype pattern class prototype pattern 原型prototype pattern模式 typescript strategy pattern typescript iterator pattern typescript template pattern method typescript mediator pattern typescript pattern state responsibility typescript pattern chain