设计模式(7)[JS版]-JavaScript设计模式之原型模式如何实现???

举报
AlbertYang 发表于 2021/02/02 23:16:24 2021/02/02
【摘要】 目录 1.什么是原型模式 2 参与者 3 实例讲解 4 使用 Object.create实现原型模式 4.1 Object.create()的用法 4.2 用 Object.create实现继承 4.2.1 单继承 4.2.2 多继承   4.3 propertyObject参数 4.4 Polyfill 4.5 改写原型模式实现 5 总结 1.什...

目录

1.什么是原型模式

2 参与者

3 实例讲解

4 使用 Object.create实现原型模式

4.1 Object.create()的用法

4.2 用 Object.create实现继承

4.2.1 单继承

4.2.2 多继承 

 4.3 propertyObject参数

4.4 Polyfill

4.5 改写原型模式实现

5 总结


1.什么是原型模式

原型模式(prototype)是指用原型实例指向创建对象的种类,并且通过拷贝这些原型创建新的对象。 原型模式不单是一种设计模式,也被称为一种编程泛型。 从设计模式的角度讲,原型模式是用于创建对象的一种模式。我们不再关心对象的具体类型,而是找到一个对象,然后通过克隆来创建一个一模一样的对象。在其他语言很少使用原型模式,但是JavaScript作为原型语言,在构造新对象及其原型时会使用该模式。

2 参与者

 

原型模式的主要参与者有

客户端( Client) : 通过要求一个原型克隆自己来创建一个新的对象。

原型( Prototype) :创建一个接口来克隆自己

克隆( Clones ) :正在创建的克隆对象

3 实例讲解

在示例代码中,我们有一个CustomerPrototype对象,它可以克隆给定原型对象(Customer)。它的构造函数接受一个Customer类型的原型,然后调用克隆方法生成一个新的Customer对象,其对象属性值使用原型对象的值进行初始化。

这是原型模式的经典实现,但JavaScript可以使用其内置的原型更有效地实现这一功能,后边我们将会修改这一代码


    
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>JS原型模式:公众号AlbertYang</title>
  6. </head>
  7. <body>
  8. </body>
  9. <script>
  10. //客户原型类
  11. function CustomerPrototype(proto) {
  12. this.proto = proto;
  13. this.clone = function() {
  14. var customer = new Customer();
  15. customer.name = proto.name;
  16. customer.age = proto.age;
  17. return customer;
  18. };
  19. }
  20. //客户类
  21. function Customer(name, age) {
  22. this.name = name;
  23. this.age = age;
  24. this.say = function() {
  25. console.info("%c%s", "color:red;font-size:18px", "姓名: " + this.name + ", 年龄: " + this.age);
  26. };
  27. }
  28. function run() {
  29. var proto = new Customer("张三", 18);
  30. var prototype = new CustomerPrototype(proto);
  31. var customer = prototype.clone();
  32. customer.say();
  33. }
  34. run();
  35. </script>
  36. </html>

4 使用 Object.create实现原型模式

在现有的文献里查看原型模式的定义,没有针对JavaScript的,你可能发现很多讲解的都是关于类的,但是现实情况是基于原型继承的JavaScript完全避免了类(class)的概念。我们只是简单从现有的对象进行拷贝来创建对象。

在新版的ECMAScript5标准中提出,使用Object.create方法来创建指定的对象,其对象的prototype有指定的对象(也就是该方法传进的第一个参数对象),也可以包含其他可选的指定属性。例如Object.create(prototype, optionalDescriptorObjects)。

4.1 Object.create()的用法

Object.create()方法用于创建一个新对象,使用现有的对象来提供新创建的对象的__proto__。

语法:

Object.create(proto[, propertiesObject])
  

参数:

proto新创建对象的原型对象。

propertiesObject可选。如果没有指定为 undefined,则是要添加到新创建对象的不可枚举(默认)属性(即其自身定义的属性,而不是其原型链上的枚举属性)对象的属性描述符以及相应的属性名称。这些属性对应Object.defineProperties()的第二个参数。

返回值:一个新对象,带着指定的原型对象和属性。

4.2 用 Object.create实现继承

下面的例子演示了如何使用Object.create()来实现类式继承。这是所有JavaScript版本都支持的单继承。

4.2.1 单继承


   
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>JS原型模式:公众号AlbertYang</title>
  6. </head>
  7. <body>
  8. </body>
  9. <script>
  10. // 父类
  11. function Shape() {
  12. this.x = 0;
  13. this.y = 0;
  14. }
  15. // 父类的方法
  16. Shape.prototype.move = function(x, y) {
  17. this.x += x;
  18. this.y += y;
  19. console.info('Shape moved.');
  20. };
  21. // 子类
  22. function Rectangle() {
  23. Shape.call(this); // call方法用来调用父类Shape的构造函数
  24. }
  25. // 子类继承父类
  26. Rectangle.prototype = Object.create(Shape.prototype);
  27. //重新指定构造函数
  28. Rectangle.prototype.constructor = Rectangle;
  29. console.log(Rectangle);
  30. var rect = new Rectangle();
  31. console.log(rect);
  32. console.log('rect是Rectangle的实例吗?',
  33. rect instanceof Rectangle); // true
  34. console.log('rect是Shape的实例吗?',
  35. rect instanceof Shape); // true
  36. rect.move(1, 1); // 输出, 'Shape moved.'
  37. </script>
  38. </html>

4.2.2 多继承 

如果你希望能继承到多个对象,则可以使用混入的方式。


  
  1. function MyClass() {
  2. SuperClass.call(this);
  3. OtherSuperClass.call(this);
  4. }
  5. // 继承一个类
  6. MyClass.prototype = Object.create(SuperClass.prototype);
  7. // 混合其它类
  8. Object.assign(MyClass.prototype, OtherSuperClass.prototype);
  9. // 重新指定constructor
  10. MyClass.prototype.constructor = MyClass;
  11. MyClass.prototype.myMethod = function() {
  12. // 。。。。。
  13. };
 

Object.assign 会把 OtherSuperClass原型上的函数拷贝到 MyClass原型上,使 MyClass 的所有实例都可以使用 OtherSuperClass 的方法。Object.assign 是在 ES2015 引入的,且可用 polyfilled。要支持旧浏览器的话,可用使用 jQuery.extend() 或者 _.assign()。

 4.3 propertyObject参数


  
  1. <script>
  2. var o;
  3. // 创建一个原型为null的空对象
  4. o = Object.create(null);
  5. o = {};
  6. // 上面的一句就相当于:
  7. o = Object.create(Object.prototype);
  8. o = Object.create(Object.prototype, {
  9. // foo会成为所创建对象的数据属性
  10. foo: {
  11. writable: true,
  12. configurable: true,
  13. value: "hello"
  14. },
  15. // bar会成为所创建对象的访问器属性
  16. bar: {
  17. configurable: false,
  18. get: function() {
  19. return 10
  20. },
  21. set: function(value) {
  22. console.log("Setting `o.bar` to", value);
  23. }
  24. }
  25. });
  26. function Constructor() {}
  27. o = new Constructor();
  28. // 上面的一句就相当于:
  29. o = Object.create(Constructor.prototype);
  30. // 如果在Constructor函数中有一些初始化代码,Object.create不能执行那些代码
  31. // 创建一个以另一个空对象为原型,且拥有一个属性p的对象
  32. o = Object.create({}, {
  33. p: {
  34. value: 42
  35. }
  36. })
  37. // 省略了的属性特性默认为false,所以属性p是不可写,不可枚举,不可配置的:
  38. o.p = 24
  39. console.log(o.p) //42
  40. o.q = 12
  41. for (var prop in o) {
  42. console.log(prop); //q
  43. }
  44. delete o.p //false
  45. //创建一个可写的,可枚举的,可配置的属性p
  46. o2 = Object.create({}, {
  47. p: {
  48. value: 42,
  49. writable: true,
  50. enumerable: true,
  51. configurable: true
  52. }
  53. });
  54. </script>

4.4 Polyfill

Polyfill 是一块代码(通常是 Web 上的 JavaScript),用来为旧浏览器提供它没有原生支持的较新的功能。比如说 polyfill 可以让 IE7 使用 Silverlight 插件来模拟 HTML Canvas 元素的功能,或模拟 CSS 实现 rem 单位的支持,或或 text-shadow,或其他任何你想要的功能。

下边这个 polyfill 涵盖了Object.create主要的应用场景,它创建一个已经选择了原型的新对象,但没有把第二个参数考虑在内。尽管在 ES5 中 Object.create支持设置为[[Prototype]]null,但因为JS以前一些老版本的限制,此 polyfill 无法支持该特性。


  
  1. if (typeof Object.create !== "function") {
  2. Object.create = function (proto, propertiesObject) {
  3. if (typeof proto !== 'object' && typeof proto !== 'function') {
  4. throw new TypeError('Object prototype may only be an Object: ' + proto);
  5. } else if (proto === null) {
  6. throw new Error("This browser's implementation of Object.create is a shim and doesn't support 'null' as the first argument.");
  7. }
  8. if (typeof propertiesObject !== 'undefined') throw new Error("This browser's implementation of Object.create is a shim and doesn't support a second argument.");
  9. function F() {}
  10. F.prototype = proto;
  11. return new F();
  12. };
  13. }

4.5 改写原型模式实现


   
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>JS原型模式:公众号AlbertYang</title>
  6. </head>
  7. <body>
  8. </body>
  9. <script>
  10. // 因为不是构造函数(类),所以不用大写
  11. var customer = {
  12. name:'',
  13. age:'',
  14. say: function() {
  15. console.info("%c%s", "color:red;font-size:18px", "姓名: " + this.name + ", 年龄: " + this.age);
  16. }
  17. };
  18. function run() {
  19. // 使用Object.create创建一个新客户
  20. var myCustomer = Object.create(customer);
  21. myCustomer.name = '张三';
  22. myCustomer.age = '18';
  23. myCustomer.say();
  24. }
  25. run();
  26. </script>
  27. </html>

5 总结

原型模式在JavaScript里的使用简直是无处不在,其它很多模式有很多也是基于prototype的,大家使用的时候要注意浅拷贝和深拷贝的问题,免得出现引用问题。

今天的学习就到这里,你可以使用今天学习的技巧来改善一下你曾经的代码,如果想继续提高,欢迎关注我,每天学习进步一点点,就是领先的开始。如果觉得本文对你有帮助的话,欢迎点赞,评论,转发!!!

文章来源: albertyang.blog.csdn.net,作者:Albert Yang,版权归原作者所有,如需转载,请联系作者。

原文链接:albertyang.blog.csdn.net/article/details/107622223

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。