Web前端-JS-day05-面向对象

1.面向过程与面向对象

• 1.面向过程：凡事都要亲力亲为，每件事的具体过程都要知道，注重的是过程

• 2.面向对象：根据需求找对象，所有的事情都用对象来做，注重的是结果

  2.JS的特性

  • 1.面向对象的特性：封装、继承和多态
  • 2.JS不是面向对象的语言，但是可以模拟面向对象的思想

  • 3.JS是基于对象的语言

    3.什么是对象

  • 1.看得见、摸得到、具体特指的某个东西
  • 2.对象：有特征和行为，具体特指的某一个事物

  • 3.对象：有属性和方法，具体特指的某个事物

    4.创建对象

  • 1.创建的三种方式：
    （1）调用系统的构造函数，创建对象
    （2）自定义构造函数，创建对象
    （3）字面量的方式，创建对象
  • 2.创建对象方式一
    (1)实例化对象
    var obj = new Object();
    （2）添加属性 对象.名字=值
    obj.name = "小苏";
    obj.age = 28;
    （3）添加方法 对象.名字=函数
    obj.eat = function(){
    console.log("我喜欢吃油炸食品！");
    }
    （4）获取属性和方法
    console.log(obj.name);
    obj.eat();
  • 3.创建方式二-工厂模式创建对象
    （1）如何获取该变量（对象）是不是属于什么类型的？
    语法：变量 instanceof 类型的名字→布尔类型true false
    （2）在当前的方法中，可以使用this关键字代表当前的对象
    （3）如何一次性创建多个对象？→把创建对象的代码封装在一个函数中
    function createObject(){
    var obj = new Object();
    obj.name="小芳";
    obj.sayHi=function(){ console.log("我叫"+this.name);}
    //返回对象
    return obj;
    }
    function createObject1(name){
    var obj = new Object();
    obj.name=name;
    obj.sayHi=function(){ console.log("我叫"+this.name);}
    //返回对象
    return obj;
    }
    （4）总结：上面就是工厂模式创建对象
  • 1. 自定义函数创建对象--创建对象方式2
       （1）函数与构造函数的区别：名字是不是大写（首字母是大写）
       function Person(){ }//参照Object的定义方式
       function Person(){
       this.name="小明";
       this.age=10;
       this.sayHi=function(){
       console.log("我叫："+this.name+"年龄是："+this.age);
       }
       }
       function Person(name,age){
       this.name=name;
       this.age=age;
       this.sayHi=function(){
       console.log("我叫："+this.name+"年龄是："+this.age);
       }
       }
       var person1 = new Person("小明",20);
       console.log(person1 instanceof Person);j→true //说明person1是Person的对象
       （2）自定义构造函数创建对象时
       --做了4件事--系统做的
       ** 1.在内存中开辟（申请一个空闲的内存空间）空间，存储创建的新对象
       ** 2.把this设置为当前对象
       3.设置对象的属性和方法的值
       4.把this这个对象返回
       （3）自定义构造函数--小猫
       function Cat(color,weight,age){
       this.color =color;
       this.weight=weight;
       this.age=age;
       this.eat=function(){
       console.log("吃鱼，吃老鼠");
       }
       }
       //创建对象--实例化一个对象，并初始化

    • 5.字面量的方式创建对象--创建方式三
      var obj = {};//空对象
      obj.name="小明";
      obj.sayHi=function(){
      console.log("我是"+obj.name);
      }
      //优化后的写法：
      var obj={
      name:"小明",
      sayHi:function(){
      console.log("我是："+this.name);
      }
      }
      (1)缺陷：一次性的对象

      5. js是一门什么样的语言？

• 是一门解析性的语言
• 是一门脚本语言
• 是一门弱类型的语言，声明变量都用var
• 是一门基于对象的语言

• 是一门动态类型的语言