目录

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.什么是原型模式

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

2 参与者

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

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

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

3 实例讲解

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

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

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

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

4.1 Object.create()的用法

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

语法&＃xff1a;

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

返回值&＃xff1a;一个新对象&＃xff0c;带着指定的原型对象和属性。

4.2 用 Object.create实现继承

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

4.2.1 单继承

function MyClass() {SuperClass.call(this);OtherSuperClass.call(this);
}// 继承一个类
MyClass.prototype &＃61; Object.create(SuperClass.prototype);
// 混合其它类
Object.assign(MyClass.prototype, OtherSuperClass.prototype);
// 重新指定constructor
MyClass.prototype.constructor &＃61; MyClass;MyClass.prototype.myMethod &＃61; function() {// 。。。。。};


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

 4.3 propertyObject参数

4.4 Polyfill

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

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

if (typeof Object.create !&＃61;&＃61; "function") {Object.create &＃61; function (proto, propertiesObject) {if (typeof proto !&＃61;&＃61; &＃39;object&＃39; && typeof proto !&＃61;&＃61; &＃39;function&＃39;) {throw new TypeError(&＃39;Object prototype may only be an Object: &＃39; &＃43; proto);} else if (proto &＃61;&＃61;&＃61; null) {throw new Error("This browser&＃39;s implementation of Object.create is a shim and doesn&＃39;t support &＃39;null&＃39; as the first argument.");}if (typeof propertiesObject !&＃61;&＃61; &＃39;undefined&＃39;) throw new Error("This browser&＃39;s implementation of Object.create is a shim and doesn&＃39;t support a second argument.");function F() {}F.prototype &＃61; proto;return new F();};
}

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

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