1. js面向对象6种形式（详情）

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8. <script>
  9.     // 1. 基于object的对象
  10.     var person=new Object();
  11.     person.name='my name';
  12.     person.getName= function () {
  13.         return this.name+' is aa';
  14.     }
  15.     console.log("person.getName: "+person.getName());
  16.     //2.对象字面量方式
  17.     var person2={
  18.         name:'person2',
  19.         getName: function () {
  20.             return this.name+' is bb';
  21.         }
  22.     }
  23.     console.log("person2.getName: "+person2.getName());
  24.     //3.工厂模式
  25.     function createPerson3(name,age){
  26.         var o=new Object();
  27.         o.name=name;
  28.         o.age=age;
  29.         o.getName=function(){
  30.             return this.name+' is cc';
  31.         }
  32.         return o;//使用return返回生成的对象实例
  33.     }
  34.     var person3=createPerson3('person3',12);
  35.     console.log("person3.getName: "+person3.getName());
  36.     // 4.构造函数模式
  37.     function Person4(name,age){
  38.         this.name=name;
  39.         this.age=age;
  40.         this.getName= function () {
  41.             return this.name+" is dd";
  42.         }
  43.     }
  44.     var person4=new Person4('person4',22);
  45.     console.log("person4.getName: "+person4.getName());
  46.     //5 原型模式
  47.     function Person5(){
  48.  
  49.     }
  50.     Person5.prototype.name='person5';
  51.     Person5.prototype.age=22;
  52.     Person5.prototype.getName= function () {
  53.         return this.name+" is ee";
  54.     }
  55.     var person5=new Person5();
  56.     console.log("person5.getName(): "+person5.getName());
  57.     // 6 组合构造函数及原型模式
  58.     function Person6(name,age){
  59.         this.name=name;
  60.         this.age=age;
  61.     }
  62.     Person6.prototype={
  63.         construct:Person6,//原型字面量方式会将对象的constructor变为Object，此外强制指回Person
  64.         getName: function () {
  65.             return this.name+" is ff";
  66.         }
  67.     }
  68.     var person6=new Person6('person6',22);
  69.     console.log("person6.getName(): "+person6.getName());
  70. </script>
  71. </body>
  72. </html>

2.静态类型语言：编译时便已确定变量的类型 如 java: int a = 1;

动态类型语言：待变量被赋予某个值之后，才会具有某种类型 如 javascript : var a=1;
 javascript面向接口编程: 一个对象如果有lenght属性，也可以依照下标来存取属性，那这个对象就可以被当作数组来使用。【鸭子类型】

3.多态

多态：给不同的对象发送同一消息，这些对象会根据这个消息分别给出不同的反馈。【主人向家禽发出“叫”的命令，鸡会“咯咯咯“，鸭会”嘎嘎嘎“】
把不变的部分隔离出来，把可变的部分封装起来

  1. // 多态   把相同的隔离出来，动物都会叫，
  2.     //        把不同的封装起来，不同动物不同叫声。
  3.     var makeSound= function (animal) {
  4.         animal.sound();
  5.     }
  6.     var duck= function () {}
  7.     duck.prototype.sound= function () {
  8.         console.log("嘎嘎嘎: ");
  9.     }
  10.     var chicken= function () {
  11.  
  12.     }
  13.     chicken.prototype.sound=function(){
  14.         console.log("咯呼呼: ");
  15.     }
  16.     makeSound(new duck());    // ? 为什么要用new ?
  17.     makeSound(new chicken());
  18.     var dog= function () {
  19.  
  20.     }
  21.     dog.prototype.sound= function () {
  22.         console.log("旺旺旺: ");
  23.     }
  24.     makeSound(new dog());
  25.     console.log("typeof dog: "+typeof dog);
  26.  
  27.     //  这个简单点！
  28.     var cat={
  29.         sound: function () {
  30.             console.log("喵喵喵");
  31.         }
  32.     }
  33.     makeSound(cat);
  34.  
  35.     //===================  多态简单版 google==============
  36.     var googleMap={
  37.         show: function () {
  38.             console.log("google : " );
  39.         }
  40.     }
  41.     var baiduMap={
  42.         show: function () {
  43.             console.log("baidu;");
  44.         }
  45.     }
  46.     var renderMap= function (type) {
  47.         type.show();
  48.     }
  49.     renderMap(googleMap);
  50.     renderMap(baiduMap);

4.js模拟封装 public private 、 object.create()

  1.  //js模拟封装 非必须 private public  ES6 有更好的方式
  2.     var my=(function () {
  3.         var __name='aaa';    // private
  4.         return {
  5.             getName: function () {
  6.                 return __name;   // public
  7.             }
  8.         }
  9.     })();
  10.     console.log("my.getName(): "+my.getName());
  11.     console.log("my.__name: "+my.__name);  // 直接警告出错了。。
  12.  
  13.     // javascript 要得到一个对象,不是通过实例化类，而是找到一个对象作为原型并克隆它  Object.create()
  14.  
  15.     /*  兼容ie
  16.     Object.create=Object.create || function (obj) {
  17.                 var F= function () {};
  18.                 F.prototype=obj;
  19.                 return new F();
  20.             }
  21.     */
  22.     var Plane= function () {
  23.         this.blood=100;
  24.     }
  25.     console.log("typeof plane: "+typeof plane);
  26.     var plane=new Plane();
  27.     plane.blood=110;
  28.     var clonePlane=Object.create(plane);   // 新飞机
  29.     console.log("clonePlane: "+clonePlane.blood);
  30.     var clonePlane2=Object.create(new Plane());  //老飞机
  31.     console.log("clonePlane2: "+clonePlane2.blood);

5.构造器创建对象效率比object.create()高　　 原型继承

  1.   // 常用原型继承
  2.     var obj={name:'aaa'};
  3.     var A= function () {}
  4.     A.prototype=obj;
  5.     var a=new A();
  6.     console.log("a.name: "+a.name);
  7.  
  8.     //  构造器创建对象 效率比 object.create()高，但构造器底层也是object.create()
  9.     // ES6有新的方式
  10.     function Person10(name){
  11.         this.name=name;
  12.     }
  13.     Person10.prototype.getName= function () {
  14.         return this.name;
  15.     }
  16.     var b=new Person10('xxx');
  17.     console.log("b.name: "+b.name);

6. js闭包、单例、函数作用域

  1. // 【函数】内变量的作用域： 没加var为全局变量，加var为局部变量
  2.     //  函数里面可以访问到函数外面的变量,  函数外面无法访问到函数里面的变量
  3.     var func= function () {
  4.         var a=1;
  5.        console.log("a: "+a);
  6.     };
  7.     func();
  8.    // alert(a);  // undefined
  9.  
  10.     //闭包，解决局部变量的问题，把一些不需要暴露在全局的变量封装成私有变量，防止被修改
  11.     //使用闭包封装私有变量
  12.     var user=(function () {
  13.         var __name='sven', __age=22;   //  约定用 __ 表示私有
  14.         return{
  15.             getUserInfo: function () {
  16.                 return __name + __age;
  17.             }
  18.         }
  19.     })();
  20.     console.log("user.__name: "+user.__name);  // 访问不到
  21.     console.log("user.getUserInfo(): "+user.getUserInfo());   //   可以访问
  22.     //  js中的单例
  23.     var test={};  // 独一无二，可全局访问
  24.  
  25.     //为了减少全局变量，可使用对象字面量的方式
  26.     var namespace1={
  27.         a:function(){alert(1);},
  28.         b:function(){alert(2);}
  29.     }
  30.  
  31.     //怪异的写法，不懂。。。
  32.     var strategies={
  33.         "S": function (salary) {
  34.             return salary*4;
  35.         },
  36.         "A": function (salary) {
  37.             return salary*3;
  38.         },
  39.         "B": function (salary) {
  40.             return salary*2;
  41.         }
  42.     };
  43.     var calc= function (level, salary) {
  44.         return strategies[level](salary);    //  真怪异
  45.     }
  46.     console.log("calc: "+calc('S',20000));
  47.     console.log("calc2: "+calc('A',10000));

7.闭包

  1.   //闭包，解决局部变量的问题，把一些不需要暴露在全局的变量封装成私有变量，防止被修改
  2.     //使用闭包封装私有变量
  3.     var user=(function () {
  4.         var __name='sven', __age=22;   //  约定用 __ 表示私有
  5.         return{
  6.             getUserInfo: function () {
  7.                 return __name + __age;
  8.             }
  9.         }
  10.     })();
  11.     console.log("user.__name: "+user.__name);  // 访问不到
  12.     console.log("user.getUserInfo(): "+user.getUserInfo());   //   可以访问
  13.     console.log("typeof user: "+typeof user);
  14.  
  15.     /* 闭包 读取函数内部的变量，把变量的值始终保持在内存中*/
  16.     function f1(){
  17.         var n=999;
  18.         function f2(){
  19.             console.log(n);
  20.         }
  21.         return f2;
  22.     }
  23.     var res=f1();
  24.     res();   //网上经典闭包
  25.     //f1();
  26.  
  27.     //闭包2
  28.     function f11(){
  29.         var test=111;
  30.         tmp_test= function () {
  31.             return test;
  32.         }
  33.     }
  34.     function f2(){
  35.         console.log("测试一： "+tmp_test());
  36.         var test1=tmp_test();
  37.         console.log("测试二： "+test1);
  38.     }
  39.     f11();
  40.     f2();
  41.  
  42.     //闭包作用1： 使用闭包代替全局变量
  43.     // 全局变量 stu1
  44.     var stu1='aa';
  45.     function st1(){
  46.         console.log("stu11: "+stu1);
  47.     }
  48.     st1();
  49.     console.log("stu1: "+stu1);
  50.  
  51.     //使用闭包  ,这种简单。。。。。。。
  52.     (function () {
  53.         var stu2='bb';
  54.         function st2(){
  55.             console.log("stu2: "+stu2);
  56.         }
  57.         function a(){
  58.             console.log("闭包stu2: "+stu2);
  59.         }
  60.         st2();
  61.        a();
  62.     })();
  63.     console.log("undefined stu2: "+stu2);

javascript设计模式与开发实践的更多相关文章

  1. 《JavaScript设计模式与开发实践》整理

    最近在研读一本书<JavaScript设计模式与开发实践>,进阶用的. 一.高阶函数 高阶函数是指至少满足下列条件之一的函数. 1. 函数可以作为参数被传递. 2. 函数可以作为返回值输出 ...

  2. JavaScript设计模式与开发实践 - 观察者模式

    概述 观察者模式又叫发布 - 订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个目标对象(为了方便理解,以下将观察者对象叫做订阅者,将目标对象叫做 ...

  3. JavaScript设计模式与开发实践 - 策略模式

    引言 本文摘自<JavaScript设计模式与开发实践> 在现实中,很多时候也有多种途径到达同一个目的地.比如我们要去某个地方旅游,可以根据具体的实际情况来选择出行的线路. 如果没有时间但 ...

  4. JavaScript设计模式与开发实践 - 单例模式

    引言 本文摘自<JavaScript设计模式与开发实践> 在传统开发工程师眼里,单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返 ...

  5. 《javascript设计模式与开发实践》--- （单一职责原则）

    看的这本书叫<JavaScript设计模式与开发实践> 先规划一下看书的顺序,基础知识我已经大概的浏览了一遍了,没有留下笔记,以后有时间还会补上.本来打算顺着看的.但是我感觉我很难短时间内 ...

  6. JavaScript设计模式与开发实践——读书笔记1.高阶函数(上)

    说来惭愧,4个多月未更新了.4月份以后就开始忙起来了,论文.毕设.毕业旅行等七七八八的事情占据了很多时间,毕业之后开始忙碌的工作,这期间一直想写博客,但是一直没能静下心写.这段时间在看<Java ...

  7. 《JavaScript设计模式与开发实践》读书笔记-基础知识

    笔记内容多摘录自<JavaScript设计模式与开发实践>(曾探著),侵删. 面向对象的JavaScript 1. 动态需要类型和鸭子类型 鸭子类型 如果它走起路来像鸭子,叫起来也是鸭子, ...

  8. 《Javascript设计模式与开发实践》--读书笔记

    第2章 this call apply bind()方法创建一个新的函数,在bind()被调用时,这个新函数的this被bind的第一个参数指定,其余的参数将作为新函数的参数供调用时使用. bind( ...

  9. JavaScript设计模式与开发实践——JavaScript的多态

    “多态”一词源于希腊文polymorphism,拆开来看是poly(复数)+ morph(形态)+ ism,从字面上我们可以理解为复数形态. 多态的实际含义是:同一操作作用于不同的对象上面,可以产生不 ...

  10. 《JavaScript设计模式与开发实践》知识点笔记

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC" } p.p2 { margin: 0.0px ...

随机推荐

  1. axure快速原型设计工具

    Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格.设计功能和界面的专家能够快速创建应用软件或Web网站的线框图.流程 ...

  2. SQL0946N错误及DB2事务日志

    在对DB2数据库进行批量增删的时候, 如果数据量比较大会导致SQL0964N错误, DB2 Knowledge center(http://pic.dhe.ibm.com/infocenter/db2 ...

  3. Map工具系列-04-SQL合并执行工具

    所有cs端工具集成了一个工具面板 -打开(IE) Map工具系列-01-Map代码生成工具说明 Map工具系列-02-数据迁移工具使用说明 Map工具系列-03-代码生成BySQl工具使用说明 Map ...

  4. 单元测试与Moq

    这个篇幅里面,记录单元测试与Moq模拟包的知识点. 单元测试 每一个模块,都应该有对应的单元测试.单元测试可以保证你的代码准确性,大大减少出现BUG的几率.一个好的单元测试,也是重构代码必不可少的部分 ...

  5. 8 HTML&JS等前端知识系列之Ajax的例子

    what is ajax ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新 ...

  6. [Unity] Shader - CG语言 流程控制语句

    CG语言中: 不支持 switch 语句(可以写,但不能很好的执行.) 循环语句中, 循环次数不能大于 1024 ,否则会报错. If...ELSE 条件判断语句: if (true) { } els ...

  7. 统计SqlServer每张表内的数据量

    CREATE TABLE #temp (TableName VARCHAR (255), RowCnt INT)EXEC sp_MSforeachtable 'INSERT INTO #temp SE ...

  8. 【转】 解读EOF

    解读EOF 标签: fplinuxc语言filestream 2012-01-31 22:05 439人阅读 评论(0) 收藏 举报  分类: C.C++_程序设计(20)  我学习C语言的时候,遇到 ...

  9. MySQL 的 find_in_set 函数使用方法

    举个例子来说: 有个文章表里面有个type字段,它存储的是文章类型,有 1头条.2推荐.3热点.4图文...1,12,13 等等 . 现在有篇文章他既是 头条,又是热点,还是图文, type中以 1, ...

  10. redis使用简介

    1.redis 支持"生产者与消费者模式"."订阅模式" 2.实时数据, 用数据类型.时间戳.数据内容,以二进制形式存取 3.查询时间.查询间隔时间.查询更新时 ...