js面向对象编程

面向对象编程

1.1 认识面向对象

面向对象编程其实是一种思想（面向过程，面向对象）

面向过程:

比如说你现在肚子饿了，想要去吃面条，那么在做面条的过程中用多少面粉，用多少水，怎么和面和切面条,这些过程被分为了步骤，一步一步去执行，这种执行的方式叫做**面向过程**。

面向对象：

还是吃面条，但是我们现在可以直接拿出手机来在外卖平台上下订单，找到你喜欢的餐厅和喜欢的骑手，你只需要在家里等着吃面条，在这个过程中我们只下达了两道命令，一个是在手机上下单另一个是在家里等着吃面条，这叫做面向对象编程。

1.2 看完了编程思想的基本概念之后，这里有一道数学题可以帮助我们更好的理解什么是面向对象编程。

车 60km/h
路600km
问：多久跑完？

----相信很多人看到这个题的时候心里就已经有了答案，可以直接用600去除以60得到结果10小时，但是在这道题中我们根本没有用到车和路，而是只用到了600和60把这两个数字提取出来之后直接做了除法得出结果:

  var hours = 600 / 60;
            alert(hours);//10
            

----这种方法就叫做：
面向过程编程思想：只关心数学逻辑。

而面向对象编程思想：直接将生活逻辑映射到我们的程序中。
过程：
1、分析题目的实体
2、设置实体属性和功能
3、让实体之间相互作用完成结果。

			 车
             speed 60km/h
             run: 可以跑在路上
                        
             路
             length 600km
             注】最后真的让车跑在路上，得出结果？
             
             请先看1.3对象的语法再回到这道题上
            
             var cars = {
                speed: 60,
                run: function(road){
                    return road.length / this.speed;
                }
            }

            var road = {
                length: 600
            }

            var hours = cars.run(road);
            alert(hours);   //10

1.3对象的语法：

                    类：具有一类相同特征事物的抽象概念。
                    对象：对象是具体的某一个个体，某一个实例。

                
                     类       对象
                    电脑    你桌上那台
                    学生    电脑前的你 

                【注】javascript并没有提供类这个语法，只给我们提供了对象的语法。

  
            1、可以通过new运算符创建对象
            2、可以省略new创建对象
            3、直接常量进行赋值，创建对象    【注】对象的常量是通过{}表示

            var obj1 = new Object();
            var obj2 = Object();
            var obj3 = {};

            //添加属性
            obj3.username = "钢铁侠";
            obj3["age"] = 18;

            //添加方法
            obj3.showName = function(){
                alert("我的名字叫" + this.username);
            }

            obj3["showAge"] = function(){
                alert("今年我" + this.age + "岁");
            }

            var obj4 = {
                username: "钢铁侠",
                age: 18,
                sex: "男",
                showName: function(){
                    alert("我的名字叫" + this.username);
                }
            }
            alert(obj4.age); //18
            obj4.showName(); //我的名字叫钢铁侠

1.4 创建一个对象

            //创建一个人
            var person = new Object();
            person.name = "blue";
            person.sex = "男";

            person.showName = function(){
                alert("我的名字叫:" + this.name);
            }
            person.showSex = function(){
                alert("我的性别是:" + this.sex + "的");
            }

            person.showName(); //我的名字叫: blue
            person.showSex();  //我的性别是: 男的
            
            //创建第二个人  red 女
            var person2 = new Object();
            person2.name = "red";
            person2.sex = "女";

            person2.showName = function(){
                alert("我的名字叫:" + this.name);
            }
            person2.showSex = function(){
                alert("我的性别是" + this.sex + "的");
            }
            person2.showName(); //我的名字叫：red
            person2.showSex();  //我的性别是：女的

在这两部分创建对象的代码中大家应该不难看出有很多重复的代码，那如果现在要求你去创建100个人和1000个人应该怎么做？
----相信看到这里的童鞋心里都有了一个答案，没错就是去**封装好一个函数**来创建对象

1.5 函数封装

/*
                酸奶厂
                1、原料
                2、加工
                3、出厂
                工厂函数：满足<1>原料 <2>加工 <3>出厂操作创建对象的函数叫做工厂函数。
            */

            //创建人
            function createPerson(name, gender){//两个参数一个个是叫什么的人一个是什么性别的人
                //1、原料
                var obj = new Object();  //创建新的对象叫做object

                //2、加工
                //给对象添加属性
                obj.name = name;
                obj.gender = gender;

                //添加方法
                obj.showName = function(){
                    alert("我的名字叫" + this.name);
                }
                obj.showGender = function(){
                    alert("我的性别是" + this.gender + "的");
                }

                //3、出厂
                return obj;
            }

          //现在我们想创建一个叫做blue的男人可以直接调用createPerson这个方法
            var p1 = createPerson("blue", "男");  
	             p1.showName();
	             p1.showGender();
 

            var p2 = createPerson("red", "女");
             	p2.showName();
             	p2.showGender();

结：以上就是js面向对象编程的重点，希望对正在学习的童鞋有所帮助，如果有不对的地方还望大家指出。