对象模式（1-2）

对象模式

创建对象模式：（待整理）
–>单例模式（手工作业模式）
优点：虽然解决了分组作用，
弊端：但是不能批量生产

–>工厂模式(批量生产)
优点：能批量生产
缺点：创建对象全是object（不能识别Date、Array）
–>构造函数模式
优点：解决识别对象类型问题，拥有类和实例的概念，不用手动创建对象
缺点：实例相互独立,公用方法需要每个实例都重新创建
–>原型模式
优点：解决方法或属性公有的问题
缺点：

面向对象

  • [ ] 对象：万物皆对象
  • [ ] 类：把对象细分(都是function数据类型)
    • 内置类（Array、Object、Function、RexExp等）
    • 自定义类（构造函数模式）

  • [ ] 实例：类中具体的事物（都是object数据类型）

    object类型的作用

  • [x] 把描述同一个事物（object）的属性和方法放到一个内存空间下，起到分组作用，这样不同事物之间即使属性名相同相互不会发生冲突

单例模式 项目中常用(手工作业模式)

  • [x] 概念

    1
    2
    3
    var person1={age:11};
    var person2={age:22};
    person1.name

  • 这种分组编写代码的模式叫单例模式

    - 单例模式中的对象名也叫做**命名空间**




  • [x] 用途 : 项目中可用单例模式进行模块化开发;



    • [ ] 模块化开发



    • 概念 ：较大项目，需要多个人协作，一般会根据当前项目的需求划分几个功能板块，每个人负责一部分，同时开发，最后把每个人的代码进行合并
      • 优点：每个命名空间之间还可以互相调用）
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        //公共模块
        var com={
            search:function(){}
        }
        //模块1
        var model1={
            change:function(){}
            com.search();//在自己命名空间下调用其他命名空间的方法
        };
        //模块2
        var model2={
            change:function(){
                //model2.click();//在自己命名空间下调用自己命名空间的方法
                this.click();//为防止model2改名字（this是谁等执行时被谁调用才知道）
            }
            click:function(){}
        };
        model2.change();//此时this指的是model2;

工厂模式（函数的封装）

  • [x] 概念
  • 把实现同一事情的相同代码放到一个函数中，无需重复编写代码
    1
    2
    3
    4
    5
    6
    7
    function person(age){
        var obj={};
        obj.age=age;
        obj.write=function(){};
        return obj;
    }
    var person1=person(11);

拓展
大多数的编程语言都是面向对象:
1类的继承2封装3多态


封装作用：低耦合高内聚：减少代码冗余，提高代码重复利用率
继承：子类继承父类中的属性和方法；
多态：当前方法的多种形态(后台中：重写和重载)

    重写：子类重写父类的方法（原型链继承时，子类通过_ proto _修改了父类，也影响其他子类）
    重载：两个方法名同，但参数不同，执行操作也不同

js中没有重载，方法名一样的话，后面的会把前面的覆盖掉；
js中有一个操作类似重载：可以根据传递参数的不同，实现不同功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function sum(num){
    if(typeof num==="undefined"){
        return 0;
    }
    return num;
}
sum(100);
sum();
                //后台重载：方法名同，但参数不同，执行不同的函数
                public void sum(int num){};
                public void sum(string num){};
                sum(1);
                sum("1");

构造函数模式（品牌（私有））

  • [x] 目的：创建一个自定义类和类的实例
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    //构建函数类型
        function Person(name){
            //浏览器默认创建的对象就是实例p1
            this.name = name;//p1.name，this就是当前实例p1
            this.sayName = function(){
                alert(this.name);//this是sayName()函数执行点前面的（不一定是当前实例）；
                };
        }
        var person1 = new Person("N");//将Person变成类（无参数不用加（括号））
        p1.sayName();
        
    //工厂模式
        function person(age){
            var obj={};
            obj.age=age;
            obj.write=function(){};
            return obj;
        }
        var person1=person(11);

拓展：
构造函数模式和工厂模式的区别？
1、执行时
   普通函数执行->person();
   构造函数执行->new Person();
      new后Person就是一个类了
      构造函数返回的是Person这个类的实例
2、函数代码执行时
 相同：都有普通函数的一面
 不同：
   构造函数执行->不用手动创建对象;


知识点：

  • [x] 1、构造函数模式中，类中出现的this.xx=xx中的this是当前类的实例
    实例1之间都是单独的个体：不同实例之间的方法this.sayName都是不同的
  • [x] 2、构造函数执行时无参数不用加括号

  • [x] 3、实例访问不到私有作用域下的私有变量

  • 如下

    1
    2
    3
    4
    5
    6
    7
    8
    9
    //构建函数类型
        function Person(){
            var num=10;
            this.name = name;
        }
        var person1 = new Person;//（无参数不用加（括号）
        person1.num//->undefined(var
        num只是私有作用域下的私有变量，实例访问不到) 
        console.log(f1);

  • [x] 4、构造函数默认返回一个对象数据类型
       如果手动返回：基本数据类型（return 100；）—>不起作用
       如果手动返回：引用数据类型（return {num:10;}）—>覆盖默认的，返回手动object类型

  • [x] 5、检测属性（解决了工厂模式的识别对象类型问题）

所有实例都是对象数据类型，而每个对象数据类型都是object这个内置类的一个实例

  • [ ] instanceof : 检测实例什么类型

    1
    2
    3
    4
    5
    6
    7
    8
    function Person(){
        var num=10;
        this.name = name;
    }
    var p1=new Person(); 
    var p2=new Person();
    console.log(p1 instanceof Person);-->true
    console.log(p1 instanceof Object);-->true

  • [ ] typeof 不能细分object下的对象、数组、正则、、

    1
    2
    var a=[];
    console.log(a instanceof Array);

  • [ ] in : 既可以检测私有属性，也可以检测公有属性

    1
    console.log("sayName" in person1);

  • [ ] hasOwnProperty : 检测私有属性

  • [ ] 检测公有属性：

    1
    2
    3
    function hasPubPro(obj,attr){
        return (attr in obj)&& obj.hasOwnProperty(attr)===false;
    }

原型模式（公有方法）

概念:

  • [x] 解决方法属性公有的问题（原型.Prototype）
  • [ ] 1、每个函数数据类型（普通函数、类）自带属性：Prototype（是一个对象数据类型的值）
  • [ ] 2、浏览器给Prototype属性添加一个属性constructor（构造函数），属性值是当前函数（类）本身
  • [ ] 3、每个对象数据类型（普通的对象、实例、Prototype）天生自带一个属性： proto ，属性值是当前实例所属类的原型（Prototype）；
    图分析25：

  • 如下：

    1
    2
    3
    4
    5
    6
    function Fn(){
        this.x=100;
    }
    Fn.Prototype.getX=function(){};
    var f1=new Fn;
    var f2=new Fn;

  • [x] Object是所有数据类型的基类

  • [ ] object–>ture通过 proto 可以向上级查找，不管多少级，最后总能找到Object

  • [ ] Object.prototype无 proto 属性

  • [x] 原型链模式
    f1.hasOwnProperty(“x”);//表明->hasOwnProperty是f1的一个属性（但是f1并不存在该方法）

  • [ ] 通过 对象名.属性名的方式，在私有属性上查找，存在即获得私有属性
  • [ ] 通过 proto 查找所属类的原型（公有的属性或方法==类的原型上定义的属性或方法）
  • [ ] 通过原型上的 proto 继续查找（Object.prototype）
1
2
3
4
5
6
function Fn(){
    this.x=100;
}
Fn.Prototype.getX=function(){};
var f1=new Fn;
var f2=new Fn;