DAY15-面向对象

第一节

什么是面向对象(oop)？(理解)

面向过程

 就是将一件“大事”，按一些更小的步骤（小事）顺序去一个一个完成。这几乎符合人类的基本行为习惯。

思想演示举例

    第一步，学生提出要报名，并提供姓名和照片
    
    第二步，咨询老师接收照片并登记学生姓名

    第三步，学生缴费（付款到学校账号）并获得缴费凭证

    第四步，咨询老师验证凭证并分配班级

    第五步，最终结果为：报名完成，学生可以在规定的时间到规定的班级（教室）上课，数据库中就有了该学生的信息。

面向对象：

就是将要完成的一件“大事”，分割出其中的一个一个“独立对象”，每个对象都有其自身的“特征信息”，和“行为动作/功能”。被其他的对象根据需要进行调用,返回数据.每个对象之间都各行其是,互相之间按照要求做事,返回结果.

思想演示举例：

学生对象：有姓名有照片，有钱,能“提出报名”，能“缴费”

咨询老师对象：能接收照片并登记姓名，能分配班级。

班级对象：有班号，有开班日期，有教室

想吃鱼香肉丝的时刻

有一天你想吃鱼香肉丝了，怎么办呢？你有两个选择
1、自己买材料，肉，鱼香肉丝调料，蒜苔，胡萝卜等等然后切菜切肉，开炒，盛到盘子里。
2、去饭店，张开嘴：老板！来一份鱼香肉丝！
看出来区别了吗？这就是1是面向过程，2是面向对象。

面向对象有什么优势呢？首先你不需要知道鱼香肉丝是怎么做的，降低了耦合性。如果你突然不想吃鱼香肉丝了，想吃红烧大肘子，对于你可能不太容易了，还需要重新买菜，买调料什么的。
对于2，太容易了，大喊：老板！那个鱼香肉丝换成肘子吧，提高了可维护性。总的来说就是降低耦合，提高维护性！

面向过程是具体化的，流程化的，解决一个问题，你需要一步一步的分析，一步一步的实现。

面向对象是模型化的，你只需抽象出一个类，这是一个封闭的盒子，在这里你拥有数据也拥有解决问题的方法。需要什么功能直接使用就可以了，不必去一步一步的实现，至于这个功能是如何实现的，管我们什么事？我们会用就可以了。

两者区别:

   面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候一个一个依次调用就可以了；
   面向对象是把构成问题事务分解成各个对象，建立对象的目的不是为了完成一个步骤，而是为了描叙某个事物在整个解决问题的步骤中的行为。

面向对象的特点(记住)

1、封装
隐藏对象的属性和实现细节，仅对外提供公共访问方式，将变化隔离，便于使用，提高复用性和安全性。
2、继承
提高代码复用性；继承是多态的前提。
3、多态
父类或接口定义的引用变量可以指向子类或具体实现类的实例对象。提高了程序的拓展性。

对象的组成

方法（有归属）－－－－函数（自由的）

属性（有归属）－－－－变量（自由的）

案例:使用对象描述一个人拥有特征和动作

      var obj={
          name:'周星星'
          age:18,
          say:function(){
              console.log('I am'+obj.name+'年芳'+this.age)
          }
      }   
      obj.say();

构造函数ES5

var str = new String(‘1233’);

str.length

var arr = new Array(2,3,4);

1 new 出来的都是对象

2 能被new 的都是构造函数(class除外)

工厂模式(了解)

工厂模式其实就是把需要一个个的编写的对象,放在一个函数中统一的进行创建，说白了就是普通函数的封装。
 工厂模式总共3步骤：
1）引进原材料 --- 创建一个空对象
2）加工原材料 --- 加工对象：给对象添加属性和方法；
3）输出产品 --- 返回对象：return 对象；

工厂代码

function CreatePerson(name,age){
        var obj={};//1.创建一个空对象
        //2.加工对象
        obj.name=name;
        obj.age=age;
        obj.showName=function(){
            console.log('我的名字是：'+this.name)
        };
        return obj;//3.输出对象；
}
var person1 = CreatePerson('小明',23)
var person2 = CreatePerson('小华',23)
person1.showName(); //我的名字是：小明
person2.showName(); //我的名字是：小华

既然叫工厂模式，它就和我们周围的工厂一样，我们只需要把原材料放进去，就能得到我们需要的产品了。
工厂模式也解决了单例模式的批量生产的问题，避免了单例模式中的大量冗余代码，进行系统的封装，提高代码的重复利用

构造函数模式(记住)

1. 可以自己指定一个函数,使用new产生对象
2. 属性和方法直接赋值给this.
3. 没有return,不能且不用返回任何的值.

    //构造函数：首字母大写(约定俗成)；
    function CreatePerson(name,age){ //创建一个自定义的类
        //构造函数中的this，都是new出来的实例
        //构造函数中存放的都是私有的属性和方法；
        this.name=name;
        this.age=age;
        this.showName=function(){
             console.log('我的名字是：'+this.name)
        }
    }
   //实例1
    var person1 = new CreatePerson('小明',25)
   //实例2
    var person2 = new CreatePerson('小华',24)
    
   JS内置的工厂模式比传统的工厂模式更高效，复用性更强。
    JS内置的工厂模式叫构造函数。

构造函数和对象的关系

   我们在javaScript里用构造函数来实现面向对象编程,ES6中使用class,vue和react里面使用的也是class
   需要使用构造函数来new出对象,然后进行编程
   构造函数可以产生任意多的对象.
 

多学一招:

1 为了区别普通函数,构造函数的名字一般都大写,
2 必须实例化之后,进行调用

总结

1 面向对象:将一个大的功能,分割成为一个小的对象,每一个对象实现不同的功能,彼此之间互相调用,返回结果,不需要关注实现的过程.

2 对象的产生方式

• 自己声明

• 系统构造函数生成

• 自定义构造函数生成

3 构造函数:就是产生对象的,构造函数中的this指向,实例化对象

instanceof

1 确定对象类型的可靠方式,

如persson1是createPerson的实例也是Object的实例.

2 判断一个函数的原型对象上,是否在实例的原型链上,是返回true不是返回false

    //构造函数：首字母大写(约定俗成)；
    function CreatePerson(name,age){ //创建一个自定义的类
        //构造函数中的this，都是new出来的实例
        //构造函数中存放的都是私有的属性和方法；
        this.name=name;
        this.age=age;
        this.showName=function(){
             console.log('我的名字是：'+this.name)
        }
    }
   //实例1
    var person1 = new CreatePerson('小明',25)
    console.log(person1 instanceof Object);
    console.log(person1 instanceof CreatePerson)

综合练习

1．掌握面相对象编程的好处

封装,继承,多态

2．能够new出对象来

上午小回顾:

面向对象编程: 将大的事务或者目标,分割成为一个一个小的对象,每一个对象产生不同功能,互相之间可以调用,接收返回的结果即可.不需要关心实现的过程.

对象的生成,.使用构造函数产生

系统构造函数

var str = new String(‘1,2,3,4’)

自定义构造函数,产生对象

function Person(name,age){

this.name = name;

this.age = age;

this.say = function(){

…

}

}

// 实例化对象的产生

var p1 = new Person(‘zs’,12)

ES6中产生对象

class Person{

属性

方法

}

var p1= new Person()

第三节(ES6)

回顾:

堆和栈示意图

对象的保存

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xyPN0yLQ-1662687110569)(/1565579105387.png)]

多个对象的保存

var a = new Object()

var b =a;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V1oFSdnE-1662687110570)(/1565579176697.png)]

不管是什么方式产生的对象,其都是保存在堆内存中,栈中通过指针引用.

原型对象

概念

1 实例对象通过构造函数(new)进行创建

2 原型对象则是构造函数创建完成js内部就直接分配。

3 构造函数可以通过pototype访问原型对象.

原型对象的作用

prototype属性的作用就是让该函数所实例化的对象们都可以找到公用的属性和方法.

1: 对比两个创建的方法.

  //  在对象中，两个新创建的函数，是不相等的：
    var obj1 = {
        fn:function(){
            alert(1);
        }
    }
    var obj2 = {
        fn:function(){
            alert(1);
        }
    }
    console.log(obj1.fn == obj2.fn);    //false

2 用构造函数创建new 两个对象也是不相等的

     function Person1(name,age){
        this.name = name;
        this.age = age;
        this.show = function(){
           console.log(this.name,this.age);
        }
    }
    var obj1 = new Person1('zs',18)
    var obj2 = new Person1('ls',18)
    console.log(obj1.show==obj2.show);        //false
    console.log(obj1);    /
	console.log(obj2);
	// 总结:1 obj1与obj2多包含了共同的方法show,造成了冗余,浪费了内存
	//    2 此时的protype 也指向了原型

问题:因为构造函数内包含的东西,比较多.可以看出构造函数的多次创建会产生多个同名函数，造成冗余太多。

3 解决:先定义简单的构造函数,实例化对象之后再用prototype进行添加(掌握)

原型对象的查看

    function Fn(){}
    console.log(Fn.prototype); //  Object
    // 原型就是对象,所以我们才能添加属性和方法

使用原型对象添加方法

     function Person2(name,age){
        this.name = name;
        this.age = age;
    }
    Object.prototype.show = function(){
          console.log(this.name);
    }
    var obj1 = new Person1('zs',18)
    var obj2 = new Person1('ls',18)
    console.log(obj1.show==obj2.show);     //ture

原型对象的原理

js中构造函数的实例,可以直接访问函数的原型上的方法和属性.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lh8aT8tF-1662687110572)(/1567232749864.png)]

1 zs是被person实例化出来的.

2 person的prototype指向person的原型

3 zs是可以访问Person的原型的,

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WbPlvSxq-1662687110572)(/1567233679308.png)]

你要没钱了,默认找你爸要5毛钱,买个辣条

总结:

1 构造函数声明就会给一个原型对象

2 构造函数通过prototype访问原型对象.

3 实例对象可以直接访问原型对象的方法和属性

类的概念

  类是现实世界在计算机中的反映，它将数据和对这些数据的操作封装在一起（并没有开空间),主要是为了更好的实现面向对象编程,是ES6中新增的语法.

类和对象(掌握)

对象就是通过new 类之后得到的,可以调用类中的方法和属性

例1:声明一个person类,包括属性和方法且输出

class Person{//定义了一个名字为Person的类
     name = 'zs';//this代表的是实例对象
      age=16;
    
    say(){//这是一个类的方法，注意千万不要加上function
        return "我的名字叫" + this.name+"今年"+this.age+"岁了";
    }
}
var obj=new Person("laotie",88);
console.log(obj.say());//我的名字叫laotie今年88岁了

脚下留心

1.在类中声明方法的时候，千万不要给该方法加上function关键字
2.方法之间不要用逗号分隔，否则会报错

例2:constructor是默认构造方法

class Box{
    constructor(){
        console.log("啦啦啦，今天天气好晴朗");//当实例化对象时该行代码会执行。
    }
}
var obj=new Box();

extends继承,super,给父类传参

ES6中类和对象的写法

1 类的声明

2 类的继承

3 super的使用

思考: 使用class向页面中追加img

作业:

1 掌握面向对象思想

“今年”+this.age+“岁了”;
}
}
var obj=new Person(“laotie”,88);
console.log(obj.say());//我的名字叫laotie今年88岁了

脚下留心

1.在类中声明方法的时候，千万不要给该方法加上function关键字
2.方法之间不要用逗号分隔，否则会报错

例2:constructor是默认构造方法

class Box{
constructor(){
console.log(“啦啦啦，今天天气好晴朗”);//当实例化对象时该行代码会执行。
}
}
var obj=new Box();

extends继承,super,给父类传参

###  ES6中类和对象的写法

1 类的声明



2 类的继承



3 super的使用



思考:  使用class向页面中追加img





## 作业:

1 掌握面向对象思想