学习JavaScript时就一定会涉及到两个概念–prototype,原型对象。自己在做项目时可能无意中使用到但是却没有真正去了解这个东西在学会使用的基础上进一步去理解它会帮助自己吸收到更多不一样的知识。1.Prototypeprototype翻译过来称为原型。prototype是每个函数都具有的一个属性这个属性是一个指针指向这个函数的原型对象而且每个该对象产生的实例对象(new 操作符创建)都可以共享该对象prototype属性上的所有属性和方法。2.原型对象那么指向的原型对象又是怎么样的呢通过创建一个简单的构造函数打印该实例对象可以更好的去理解。functionPerson(){}varpnewPerson();//创建的一个Person类型的实例console.log(pinstanceofPerson)//trueconsole.log(p)谷歌浏览器打印p的结果:这里的Person是一个空的构造函数什么都没有。只有一个__proto__属性他的类型可以看到是一个Object对象。这个对象我们其实并没有定义这个对象就是Person的原型对象。通过下面的打印进一步验证:console.log(p.__proto__Person.prototype)//true这个__proto__是浏览器支持的一个属性这个属性这个实例内部的一个指针指向这个实例的构造函数的原型对象也就是Person.prototype.原型对象的结构是这样的Perosn的原型对象会自动获得一个constructor属性,这个属性指向其prototype属性所在函数也就是指向Person通过打印比较可以验证console.log(p.__proto__.constructorPerson)//true同时还从Object那里继承过来了一些方法如常用的hasOwnProperty,toString等。这些原型方法可以直接被实例调用也可以被重写。3.原型对象的拓展我们可以在原型对象上定义自己的方法和属性可以将对象之间都需要用到的一些共用方法和属性定义在这上面这样每个对象的实例不需要自己在函数里各自又重复写一遍代码来实现相同功能的方法。//页面functionPage(id,title){this.idid;this.titletitle;this.$div$(#id);this.init()}//显示Page.prototype.showfunction(){this.$div.show();}//隐藏Page.prototype.hidefunction(){this.$div.hide();}//这里的prototype上的title并没有生效。因为解析器在查询属性值过程中先从自身实例坐在函数内部先进行查询如果没有找到的情况下则顺着原型链一步步查询下去Page.prototype.title我是标题;//初始化Page.prototype.initfunction(){this.$div.find(.title).html(this.title)}//获取内容Page.prototype.getContentfunction(){varcontentthis.$div.find(.content).html();returncontent;}varuserPagenewPage(page-user,用户详情);varlogPagenewPage(page-log,日志详情);varuserContentuserPage.getContent();varlogContentlogPage.getContent();console.log(userContent)//我是用户界面console.log(logContent)//我是日志界面上面的构造函数通过传入不同的id管理对应不同的页面对象。每个页面实例之间都可以使用show(),hide()方法每个实例都各自管理着自己的属性,这样每个实例之间的修改不会影响其他实例。4.总结直接用一张图表示