小编给大家分享一下JavaScript设计模式之原型模式的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
创新互联成立于2013年,公司以成都网站建设、成都做网站、系统开发、网络推广、文化传媒、企业宣传、平面广告设计等为主要业务,适用行业近百种。服务企业客户超过千家,涉及国内多个省份客户。拥有多年网站建设开发经验。为企业提供专业的网站建设、创意设计、宣传推广等服务。 通过专业的设计、独特的风格,为不同客户提供各种风格的特色服务。
1、js属于一种解释性脚本语言;2、在绝大多数浏览器的支持下,js可以在多种平台下运行,拥有着跨平台特性;3、js属于一种弱类型脚本语言,对使用的数据类型未做出严格的要求,能够进行类型转换,简单又容易上手;4、js语言安全性高,只能通过浏览器实现信息浏览或动态交互,从而有效地防止数据的丢失;5、基于对象的脚本语言,js不仅可以创建对象,也能使用现有的对象。
具体如下:
从设计模式的角度讲,原型模式是用于创建对象的一种模式,若需要创建一个对象,一种方法是先指定其类型,然后通过类来创建这个对象,另一种方法是通过原型来创建,不必关心对象的具体类型,而是找到一个对象,然后通过克隆来创建一个一模一样的对象。
ES5提供了Object.create(obj)
方法来克隆对象,在不支持Object.create(obj)
方法的浏览器中,可以使用以下代码:
Object.create = Object.create || function(obj) { function Func() {}; Func.prototype = obj; return new Func(); }
一、JavaScript中的原型继承:
1. 大部分的数据都是对象;
JavaScript有两种类型机制:基本类型和对象类型。基本类型包括undefined
、number
、boolean
、string
、function
、object
。
JavaScript设计者的本意在于,除了undefined,一切都应该是对象,为了实现这一目标,number、boolean、string这几种基本数据类型通过对应的包装类Number、Boolean、String来变成对象类型数据。
JavaScript中的根对象是Object.prototype
对象,Object.prototype
对象是一个空的对象。JavaScript的每个对象,实际上都是从Object.prototype
对象克隆而来的,Object.prototype
对象就是它们的原型。
ES5提供了getPrototypeOf
来查看对象的原型,Object.getPrototypeOf(任何对象) == Object.prototype
都会返回true。
2. 要得到一个对象,不是通过实例化类,而是找到一个对象作为原型并克隆它;
JavaScript没有类的概念,new运算符后面的不是类,而是构造器。当使用new运算符来创建对象时,实际上也是先克隆Object.prototype
对象,再进行一些额外操作的过程。
3. 对象会记住它的原型;
其实不能说对象有原型,而只能说对象的构造器有原型。JavaScript给对象提供了一个名为__proto__
属性,默认指向它的构造器的原型,__proto__
属性是对象与构造器的原型联系起来的纽带,如:person.__proto__ == Person.prototype
。
4. 若对象无法响应某个请求,它会把该请求委托给它自己的原型。
这是原型继承的精髓,当一个对象无法响应某个请求时,会顺着原型链把请求传递下去,直到遇到一个可以处理该请求的对象为止。但是,原型链并不是无限长的,只会查找到Object.prototype
对象为止,由于Object.prototype
的原型是null
,因此请求无法找到可以处理的对象,返回undefined
。
二、原型继承的未来
使用Object.create来实现原型继承似乎更能体现原型模式的精髓,但是,通过Object.create
创建对象的效率并不高,通常要比通过构造函数创建对象慢。
ES6带来了新的Class语法,这让JavaScript看起来像是一门基于类的语言,但背后仍然是通过原型机制来创建对象。
class Person { constuctor(name) { this.name = name; } getName() { return this.name; } } class Student extends Person { constuctor(name) { super(name); } sayHello() { alert(“Hello”); } } var student = new Student(“Alice”); student.sayHello();
以上是“JavaScript设计模式之原型模式的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!