<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>js高级语法3-原型模式 </title>

     </head>

     <body>

         <script>

             /*

              javascript原型模式（prototype）：

             1. 原型是一个对象，其他对象可以通过它实现属性的继承，所有的对象在默认的情况下都有一个原型。

              因为原型的本身也是对象。所以一个类的真正原型是被类的内部的prototype属性所持有。

             2.什么可以称之为对象？

             在javascript中，一个对象就是任何的无序的键值对的集合。

             如果他不是一个主数据类型（undefined，null，boolean，number，string）

             其他的通通叫做对象

             */

             /*

              javascript中的原型是和函数紧密连接的；

              var o ={} 他不是用function定义的，他有原型吗？

              有。

              每个通过函数和new操作符生成出来的对象都持有一个属性  __proto__,这个属性

              保存了创建他的构造函数的prototype的原型引用。

              * */

             /*

             function Person(){}  // 定义一个空对象

             Person.prototype.name="张三";

             Person.prototype.showName=function(){

                 //这个this表示调用本函数的一个具体实例化的类

                 alert(this.name);

             }

             new Person().showName();

             var cat = {};

         //    cat.prototype.name="112";//报错，prototype未定义

             //默认隐藏的调用下面的代码：

             Object.getPrototypeOf(cat).name="zhangdan"; //这是获取隐藏原型的方法，浏览器支持度不好

             cat.__proto__.master = "javascript";

             //上边两个是显式调用，下面是隐式调用，作用是一样的

             cat.age=2;

             cat['sex']="man";

             alert(cat.name+" "+cat.master+" "+cat.age+" "+cat["sex"]);

         */

              //利用原型模式实现简单继承

              function per(){

                  this.getName = function(str){

                      alert(str);

                  }

              }

              per.prototype.getAge = function(age){

                  alert(age);

              }

              //不完全继承

              var a = {};//空类

              a.__proto__ = per.prototype;

              //把要被继承的原型引用，赋值给要继承的类，相当于一个挂载

              //如果要继承的类是一个空类，那么就会完全继承

             a.getAge(3);

             //a.getName("张丹"); //这个方法 报错，因为继承的是原型，也就是上一级的所有东西，

             //但是不包括被继承类自身定义的属性和方法

             //简单方式实现继承（js中无法实现多继承）

             //完全继承

             var b = {};

             b.__proto__ = new per();

             b.__proto__.constructor = b;

             b.getAge(9);

             b.getName("xiaowang");

             //串联继承

             function m(){

                 this.showM = function(){

                     alert("I am is M ")

                 }

             }

             function n(){

                 this.showN = function(){

                     alert("I am is N ")

                 }

             }

             function k(){};

             n.prototype = new m();

             n.prototype.constructor = n;

             k.prototype = new n();

             k.prototype.constructor = k;

             var boo = new k();

             boo.showM();

             boo.showN();

         </script>

     </body>

 </html>

JavaScript设计模式-3.原型模式的更多相关文章

  1. 再起航，我的学习笔记之JavaScript设计模式09(原型模式)

    我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 我们 ...

  2. JavaScript设计模式 (1) 原型模式

    原型模式(Prototype):用原型实例指向创建类对象,使用于创建新对象的类共享原型对象的属性以及方法. //图片轮播类 var LoopImages = function (imgArr, con ...

  3. Javascript设计模式之原型模式、发布订阅模式

    原型模式 原型模式用于在创建对象时,通过共享某个对象原型的属性和方法,从而达到提高性能.降低内存占用.代码复用的效果. 示例一 function Person(name) { this.name = ...

  4. JavaScript设计模式之----组合模式

    javascript设计模式之组合模式 介绍 组合模式是一种专门为创建Web上的动态用户界面而量身制定的模式.使用这种模式可以用一条命令在多个对象上激发复杂的或递归的行为.这可以简化粘合性代码,使其更 ...

  5. 设计模式_11_原型模式（prototype）深拷贝、浅拷贝

    设计模式_11_原型模式(prototype) 浅拷贝: package designPatternOf23; /** * 定义:用原型实例,指定创建对象的种类,并通过拷贝这些原型创建新的对象 * P ...

  6. C#设计模式(6)——原型模式（Prototype Pattern）

    一.引言 在软件系统中,当创建一个类的实例的过程很昂贵或很复杂,并且我们需要创建多个这样类的实例时,如果我们用new操作符去创建这样的类实例,这未免会增加创建类的复杂度和耗费更多的内存空间,因为这样在 ...

  7. 乐在其中设计模式(C#) - 原型模式(Prototype Pattern)

    原文:乐在其中设计模式(C#) - 原型模式(Prototype Pattern) [索引页][源码下载] 乐在其中设计模式(C#) - 原型模式(Prototype Pattern) 作者:weba ...

  8. js原生设计模式——7原型模式之真正的原型模式——对象复制封装

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  9. C#设计模式之六原型模式（Prototype）【创建型】

    一.引言 在开始今天的文章之前先说明一点,欢迎大家来指正.很多人说原型设计模式会节省机器内存,他们说是拷贝出来的对象,这些对象其实都是原型的复制,不会使用内存.我认为这是不对的,因为拷贝出来的每一个对 ...

随机推荐

  1. MySQL—练习2

    参考链接:https://www.cnblogs.com/edisonchou/p/3878135.html   感谢博主 https://blog.csdn.net/flycat296/articl ...

  2. （1）-使用json所要用到的jar包下载

    json是个非常重要的数据结构,在web开发中应用十分广泛.我觉得每个人都应该好好的去研究一下json的底层实现,需要准备下面的六个jar包:commons-lang-1.0.4.jar common ...

  3. Android-工作总结-LX-2018-08-20-判断数据库表字段是否为空

    问题的因素: 调试了一上午,我要判断数据库表的name字段是否为空,使用了TextUtils.isEmpty(nameStr):来判断name字段是否为空,明明数据库是没有值,却一直显示有值,然后还去 ...

  4. 在Eclipse中卸载Team Explorer Everywhere

  5. 原生态在Hadoop上运行Java程序

    第一种:原生态运行jar包1,利用eclipse编写Map-Reduce方法,一般引入Hadoop-core-1.1.2.jar.注意这里eclipse里没有安装hadoop的插件,只是引入其匝包,该 ...

  6. [javascript][翻译]使用javascript添加css rule

    来杭一周,收获很多,成长很多. 周六在搞一个插件的时候碰到需要动态添加伪元素的需求,搜了一下解决方案,有人用正则写出了读取伪元素的函数:我觉得倒是可以通过注入css rule的方式,来让预留有某些类的 ...

  7. [Oracle]Oracle数据库数据被修改或者删除恢复数据

    1.SELECT * FROM CT_FIN_RiskItem--先查询表,确定数据的确不对(cfstatus第一行缺少)2.select * from CT_FIN_RiskItem as of t ...

  8. 使用RazorGenerator和预编译MVC引擎将Razor视图编译成DLL

    Web开发中常常会有跨页面.跨站点.跨项目组的复用模块(界面),最常见的就是如下方所示的Web页面上用于显示登录或用户名的头部模块, 使用ASP.NET MVC开发中,常见的做法是写成部分视图,本文的 ...

  9. Android Studio设置字体

    一,点"Settings"按钮,调出配置界面: 然后如图找到 Editor-colors&font-font ,默认的不让修改 所以先点击save as  随便起个名字 , ...

  10. JavaWeb -jsp文件和内置对象的解析

    jsp文件和内置对象的解析 对page解析 JSP九大内置对象(自带,无需new) 1 out:输出对象 2 request:请求对象,存储“客户端像服务端发送的请求信息” 3 response:响应 ...