动态原型模型

组合使用构造函数模型和原型模型,使得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操作符来确定对象类型。

这种模式常用在特殊情况下为对象创建构造函数。

JS面向对象——动态原型模型、寄生构造模型的更多相关文章

  1. js 面向对象 动态添加标签

    有点逻辑 上代码 thml布局 点击查看代码 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  2. JS面向对象,原型,继承

    ECMAScript有两种开发模式:1.函数式(过程化),2.面向对象(OOP).面向对象的语言有一个标志,那就是类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是,ECMAScript ...

  3. js面向对象与原型

    创建对象 var box = new Object();//创建对象 box.name = 'Lee'; //添加属性 box.age = 100; box.run = function(){ ret ...

  4. JS面向对象之原型

    面向对象之原型 为什么要使用原型 由于 js 是解释执行的语言, 那么在代码中出现的函数与对象, 如果重复执行, 那么会创建多个副本, 消耗更多的内存, 从而降低性能 传统构造函数的问题 functi ...

  5. JS面向对象之原型链

      对象的原型链 只要是对象就有原型 原型也是对象 只要是对象就有原型, 并且原型也是对象, 因此只要定义了一个对象, 那么就可以找到他的原型, 如此反复, 就可以构成一个对象的序列, 这个结构就被成 ...

  6. 从零开始的全栈工程师——JS面向对象( 原型 this 继承)

    一.生成对象的方式 ①单例模式(字面量定义)var obj = {} ②类的实例 var obj = new Object( ) ③工厂模式 ④构造函数:扮演三种角色 普通函数 普通对象 类 工厂模式 ...

  7. 21 , CSS 构造模型

    1. div 2. 边距 3. 边框 4. 定位 5. 浮动 1 21.1  div 部分(division)---<div>元素,经常以 div 形式引用---是 XHTML 元素,用于 ...

  8. JS面向对象——组合使用构造函数模型与原型模型中的隐患

    组合使用构造函数模型和原型模型中的问题,使用对象字面量重写原型模型会有隐患(涉及到原型的动态性),如下例: <!DOCTYPE html> <html> <head> ...

  9. JavaScript之面向对象学习七(动态原型模式、寄生构造函数模式、稳妥构造函数模式创建自定义类型)

    一.动态原型模式 在面向对象学习六中的随笔中,了解到组合构造函数模式和原型模式创建的自定义类型可能最完善的!但是人无完人,代码亦是如此! 有其他oo语言经验的开发人员在看到独立的构造函数和原型时,很可 ...

随机推荐

  1. Vue.js 技术揭秘学习 (1) new Vue 发生了什么

    Vue 初始化主要就干了几件事情,合并配置,初始化生命周期,初始化事件中心,初始化渲染,初始化 data.props.computed.watcher 等等.

  2. VUE的双向绑定及局部组件的使用

    vue的双向绑定,使用v-model,v-model只能使用在input  textare    select中 <!DOCTYPE html> <html lang="z ...

  3. 百度编辑器UEditor使用总结

    官网下载地址:http://ueditor.baidu.com/website/download.html 我下载的是jsp版本,下载后将整个目录复制到项目的js包下,然后将jsp包下的lib下的ja ...

  4. WEB前端开发的思考与感悟

    当我想要认真写一篇文章向大家分享我对前端的认识与感悟的时候,突然就深刻的体会到了这句话确实太有道理了. 最近几年对于web前端的传闻很多,比如人才稀缺,简单易学,待遇丰厚,整体势头发展良好等等.遇到过 ...

  5. php单点登录实现原理实例详解

    单点登录SSO(Single Sign On)说得简单点就是在一个多系统共存的环境下,用户在一处登录后,就不用在其他系统中登录,也就是用户的一次登录能得到其他所有系统的信任. 单点登录在大型网站里使用 ...

  6. 退役——halfrot's life in OI

    这是一个没有人看的博客里丢了两年的坑,还有很多事应该做,但是我很懒,所以今天把它填了. 前记:和很多人的竞赛生涯一样,一开始我也是奋不顾身,奔月而去,然而身处弱校,没有人引导方向,再加上自己很蒻的主要 ...

  7. Python_013(面向对象概念)

    一.面向对象 1.面向对象几个概念问题: a:类:具有相同属性和技能的一类事物.用代码表示就是,我类里面有一些静态变量和方法是大家共有的; b:对象:具体的类的表现.在代码中就是,调用类的方法或变量传 ...

  8. 提示”The following modules are missing or built with a different engine version”

    一台机器使用自行编译版本引擎修改了工程后,另一台机器也使用自行编译版本引擎编辑该工程,有时会出现标题的提示 解决办法: 打开\Engine\Binaries\Win64\UE4Editor.modul ...

  9. php面试专题---20、MySQL的安全性考点

    php面试专题---20.MySQL的安全性考点 一.总结 一句话总结: 还是得多看视频,教程看的浮光掠影,容易get不到重点:比如预处理防sql注入之前是挺熟,后面就忘记了,而且看文章get不到点 ...

  10. php面试专题---19、MySQL高可扩展和高可用考点

    php面试专题---19.MySQL高可扩展和高可用考点 一.总结 一句话总结: 要区别分区和分库分表,分区的话对用户是透明的,分库分表的话需要程序员做点事情,主从数据库同步的话借助的是二进制日志 1 ...