面向前端工程师的设计模式原型模式

　　1。介绍
　　原型模式（PrototypePattern）不是指的JS的原型，它是clone自己，生成一个新对象的操作。因为new一个新对象的时候开销会比较大，或者由于其他原因不合适，所以采用这种方式创建一个一模一样的对象。
　　Java默认有clone接口，不用自己实现。JS中有一个比较像的实现就是Object。create方法。2。原型模式的通用实现一个对象（作为原型）constprototype｛getName：function（）｛returnthis。firstthis。｝，say：function（）｛console。log（helloworld）；｝｝基于原型创建xletxObject。create（prototype）；x。firstA；x。lastB；console。log（x。getName（））；x。say（）；基于原型创建yletyObject。create（prototype）；y。firstC；y。lastD；console。log（y。getName（））；y。say（）；3。JavaScript中的原型3。1函数和对象函数是一种对象对象都是通过函数创建的函数是一种对象functionPerson（）｛｝console。log（PersoninstanceofObject）；对象都是通过函数创建的letp1newPerson（）；letobj1｛name：zfpx｝letobjnewObject（）；obj2。3。2原型对象prototype每个函数都有一个属性叫做prototype，prototype的属性值是一个对象即原型对象原型对象默认的只有一个叫做constructor的属性，指向这个函数本身每个实例对象都有一个隐藏的属性proto，这个属性引用了创建这个对象的函数的prototype
　　自定义函数的prototype是由Object创建，所以它的proto指向的就是Object。prototypeObject。prototype的proto指向的是null
　　自定义函数Foo。proto指向Function。prototypeObject。proto指向Function。prototypeFunction。proto指向Function。prototypeletsumnewFunction（a，b，returnab）；
　　Function。prototype的proto也指向Object。prototype
　　JS中的prototype可以理解为ES6class的一种底层原理上面用到的Object。create方法也是基于原型prototype的而class是实现面向对象的基础，并不是服务于某个模式若干年后ES6全面普及，大家可能会忽略掉prototype，但是Object。create却会长久存在3。3instanceofInstanceof运算符的第一个变量是一个对象，暂时称为A；第二个变量一般是一个函数，暂时称为BInstanceof的判断规则是：沿着A的proto这条线来找，同时沿着B的prototype这条线来找，如果两条线能找到同一个引用，即同一个对象，那么就返回true。如果找到终点还未重合，则返回false。console。log（ObjectinstanceofFunction）；console。log（FunctioninstanceofObject）；console。log（FunctioninstanceofFunction）；
　　3。4原型链访问一个对象的属性时，先在基本属性中查找，如果没有，再沿着proto这条链向上找，这就是原型链hasOwnProperty可以区分一个属性到底是自己的还是从原型中找到functionFoo（）｛this。a10；｝Foo。prototype。b20；letf1newFoo（）；console。log（f1。a）；console。log（f1。b）；3。5原型优势可以随意扩展可以重写继承的方法letobj｛｝；console。log（obj。toString（））；letarr〔1，2，3〕；Array继承ObjectArray原型上的的方法对Object原型上的方法进行了重写console。log（arr。toString（））；Object原型上的方法console。log（Object。prototype。toString。call（arr））；4。场景！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metanameviewportcontentwidthdevicewidth，initialscale1。0metahttpequivXUACompatiblecontentieedgetitleDocumenttitlestyle｛margin：0；padding：0；｝canvas｛border：1pxsolid000；｝styleheadbodycanvasidcanvaswidth1000height600canvasbodyhtml