<!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. 第一周leetcode

    3/27 胡乱投了一堆简历,做了七牛的笔试,看了腾讯的面试题 感觉不懂的还是很多啊,不过也知道了笔试套路其实也不多,基本算法/数据结构(不会太难).c/c++基础(后面的知识类似虚函数需要了解).li ...

  2. 深夜配置一把struts2

    在intellij idea里面配置出来了struts2的一个Helloworld,因为换了工具,在网上查了很多关于IDEA配置它的方式,好多是用Maven解决依赖关系的.于是按照网上的来,发现很多东 ...

  3. Javascript设计模式理论与实战：桥接模式

    桥接模式将抽象部分与实现部分分离开来,使两者都可以独立的变化,并且可以一起和谐地工作.抽象部分和实现部分都可以独立的变化而不会互相影响,降低了代码的耦合性,提高了代码的扩展性. 基本理论 桥接模式定义 ...

  4. Varnish 学习资料收集

    高性能HTTP加速器Varnish(安装配置篇) 利用Varnish构建Cache服务器笔记 Varnish代理服务器部署 Varnish基础概念详解 Varnish的配置语言VCL及其内置变量介绍 ...

  5. solr特点二:Facet(1)

    一.   Facet 简介 Facet 是 solr 的高级搜索功能之一 , 可以给用户提供更友好的搜索体验 . 在搜索关键字的同时 , 能够按照 Facet 的字段进行分组并统计 . 二.   Fa ...

  6. WPF 使用QRCoder生成二维码

    vs中使用Nuget获取QRCoder 窗体中添加按钮和Iage <Window x:Class="QRCoderTest.MainWindow" xmlns="h ...

  7. 知识记录——CSS规范（文章内容为转载）

    原作者信息 作者:词晖 链接:http://www.zhihu.com/question/19586885/answer/48933504 来源:知乎 著作权归原作者所有,转载请联系原作者获得授权. ...

  8. CCF CSP 201803-1 跳一跳

    题目链接:http://118.190.20.162/view.page?gpid=T73 问题描述 近来,跳一跳这款小游戏风靡全国,受到不少玩家的喜爱. 简化后的跳一跳规则如下:玩家每次从当前方块跳 ...

  9. mongodb 备份脚本

    ###############备份脚本#!/bin/bash basepath="/data/backup/dump$(date +%Y%m%d%H%M%S)" if [ ! -d ...

  10. 【OCP-12c】CUUG 071题库考试原题及答案解析（20）

    20.choose two Examine the description of the EMP_DETAILS table given below: Which two statements are ...