JS面向对象——动态原型模型、寄生构造模型
程序员文章站
2022-04-17 22:01:07
动态原型模型 组合使用构造函数模型和原型模型,使得OO语言程序员在看到独立的构造函数和原型时很困惑。动态原型模型致力于解决该问题,它把所有的信息封装在构造函数中,通过在构造函数中初始化原型(仅在必要情况下),同时又使用构造函数和原型的优点。 实例代码如下: 寄生构造函数模型 基本思想:创建一个函数, ......
动态原型模型
组合使用构造函数模型和原型模型,使得oo语言程序员在看到独立的构造函数和原型时很困惑。动态原型模型致力于解决该问题,它把所有的信息封装在构造函数中,通过在构造函数中初始化原型(仅在必要情况下),同时又使用构造函数和原型的优点。
实例代码如下:
<!doctype html> <html> <head> <title>动态原型模型</title> <script type="text/javascript"> //动态原型模型:把所有的信息封装在构造函数中。通过在构造函数中初始化原型(仅在必要情况),又保持了同时使用构造函数和原型模型的优点。 function student(name,age,sex){ this.name=name; this.age=age; this.sex=sex; this.friends=["kitty","court"]; if(typeof this.sayname!="function"){ //不能使用对象字面量重写原型 student.prototype.sayname=function(){ alert(this.name); }; } } var stu1=new student("lucy",10,"girl"); stu1.sayname(); var stu2=new student("bob",9,"boy"); stu2.sayname(); stu1.friends.push("van"); alert(stu1.friends);//"kitty,court,van" alert(stu2.friends);//"kitty,court" alert(stu1.friends===stu2.friends);//false alert(stu1.sayname===stu2.sayname);//true </script> </head> <body> </body> </html>
寄生构造函数模型
基本思想:创建一个函数,该函数作用仅仅是封装创建对象的代码,然后返回新创建的对象。
以下代码说明该模型基本思想:
<!doctype html> <html> <head> <title>寄生构造函数模型</title> <script type="text/javascript"> function student(name,age,sex){ var o=new object(); o.name=name; o.age=age; o.sex=sex; o.friends=["kitty","court"]; o.sayname=function(){ alert(this.name); }; return o; } var stu1=new student("lucy",10,"girl"); stu1.sayname(); alert(stu1 instanceof student); //false alert(stu1 instanceof object);//true </script> </head> <body> </body> </html>
注:返回的对象与构造函数或者与构造函数的原型属性之间没有任何关系;即:构造函数返回的对象与在构造函数外部创建的对象没什么不同。不能依赖instanceof操作符来确定对象类型。
这种模式常用在特殊情况下为对象创建构造函数。
上一篇: 你就差一把二胡了
下一篇: RocketMQ初入门踩坑记