15 (H5*) JS第5天 对象

目录

1：创建对象

2：工厂模式创建对象

3：自定义构造函数创建对象

4：自定义构造函数做了那些事情

5：字面量方式创建对象：一次性对象

6：对象总结

7：json数据类型

8：简单数据类型和复杂数据类型

9：Math

复习

正文

1：调用系统构造函数创建对象

 <script>
    //创建对象三种方式:
    /*
     *
     * 1.调用系统的构造函数创建对象
     * var 变量名= new Object(); Object 是系统的构造函数  Array
     *
     * 2.自定义构造函数创建对象(结合第一种和需求通过工厂模式创建对象)
     *
     *
     * 3.字面量的方式创建对象
     *
     * 4：工厂模式创建对象
     * */

    //第一种创建对象的方式
    //小苏举例子:
    //实例化对象
    var obj = new Object();
    //对象有特征---属性和行为---方法
    //添加属性-----如何添加属性?  对象.名字=值;
    obj.name = "小苏";
    obj.age = 38;
    obj.sex = "女";
    //添加方法----如何添加方法? 对象.名字=函数;
    obj.eat = function () {
      console.log("我喜欢吃油炸榴莲凉拌臭豆腐和大蒜");
    };
    obj.play = function () {
      console.log("我喜欢玩飞机模型");
    };
    obj.cook = function () {
      console.log("切菜");
      console.log("洗菜");
      console.log("把菜放进去");
      console.log("大火5分钟");
      console.log("出锅");
      console.log("凉水过一下");
      console.log("放料,吃");
    };
    console.log(obj.name);//获取--输出了
    console.log(obj.age);
    console.log(obj.sex);
    //方法的调用
    obj.eat();
    obj.play();
    obj.cook();

    //练习:有一个黄色的小狗,叫大黄,今年已经三岁了,250斤的重量每次走路都很慢,喜欢吃大骨头
    //练习:创建一个手机对象,手机有型号,有颜色,可以打电话和发短信

  </script>

2：工厂模式创建对象

  <script>

    /*
     *
     * 如何获取该变量(对象)是不是属于什么类型的?
     * 语法:
     * 变量 instanceof 类型的名字----->布尔类型,true就是这种类型,false不是这种类型
     * 在当前的对象的方法中,可以使用this关键字代表当前的对象
     *
     *
     * */

    //人的对象
    //    var person=new Object();
    //    person.name="小白";
    //    person.age=10;
    //    person.sayHi=function () {
    //      //在当前这个对象的方法中是可以访问当前这个对象的属性的值
    //        console.log("您好,吃了没您,我叫:"+this.name);
    //    };
    //    //学生的对象
    //    var stu=new Object();
    //    stu.name="小芳";
    //    stu.age=18;
    //    stu.study=function () {
    //      console.log("学习,敲代码,今天作业四遍,我今年"+this.age+"岁了");
    //    };
    //    //小狗的对象
    //    var dog=new Object();
    //    dog.name="哮天犬";
    //    dog.say=function () {
    //      console.log("汪汪...我是哮天犬");
    //    };
    //
    //    //输出人是不是人的类型
    //    console.log(person instanceof Object);
    //    console.log(stu instanceof Object);
    //    console.log(dog instanceof Object);

    //对象不能分辨出到底是属于什么类型?

    //如何一次性创建多个对象?把创建对象的代码封装在一个函数中

    //工厂模式创建对象
    function createObject(name,age) {
      var obj = new Object();//创建对象
      //添加属性
      obj.name = name;
      obj.age = age;
      //添加方法
      obj.sayHi = function () {
        console.log("阿涅哈斯诶呦,我叫:" + this.name + "我今年:" + this.age);
      };
      return obj;
    }
    //创建人的对象
    var per1 = createObject("小芳",20);
    per1.sayHi();
    //创建一个人的对象
    var per2 = createObject("小红",30);
    per2.sayHi();

  </script>

3：自定义构造函数创建对象

 <script>

    //自定义构造函数创建对象,我要自己定义一个构造函数,自定义构造函数,创建对象
    //函数和构造函数的区别；名字是不是大写(首字母是大写)
    // 自定义构造函数可以直接调用（和普通函数一样。） Person();
    function Person(name,age) {
      this.name=name;
      this.age=age;
      this.sayHi=function () {
        console.log("我叫:"+this.name+",年龄是:"+this.age);
      };
    }

    //自定义构造函数创建对象:先自定义一个构造函数,创建对象
    var obj=new Person("小明",10);
    console.log(obj.name);
    console.log(obj.age);
    obj.sayHi();

    var obj2=new Person("小红",20);
    console.log(obj2.name);
    console.log(obj2.age);
    obj2.sayHi();

    console.log(obj instanceof Person);
    console.log(obj2 instanceof  Person);

    //自定义狗的构造函数,创建对象
    function Dog(name,age,sex) {
      this.name=name;
      this.age=age;
      this.sex=sex;
    }
    var dog=new Dog("大黄",20,"男");
    console.log(dog instanceof Person);//false
    console.log(dog instanceof Dog);

  </script>

4：自定义构造函数做了那些事情

<script>

    /*
    *
    * 1. 在内存中开辟(申请一块空闲的空间)空间,存储创建的新的对象
    * 2. 把this设置为当前的对象
    * 3. 设置对象的属性和方法的值
    * 4. 把this这个对象返回
    *
    * */
    function Person(name,age) {
      this.name=name;
      this.age=age;
      this.sayHi=function () {
        console.log("我叫:"+this.name+",年龄是:"+this.age);
      };
    }

    //创建对象
    var obj=new Person("小明",10);
    console.log(obj.name);
    console.log(obj.age);
    obj.sayHi();

  </script>

5：字面量方式创建对象：一次性对象

<head>
  <meta charset="UTF-8">
  <title></title>
  <script>
    var obj={};
    obj.name="小白";
    obj.age=10;
    obj.sayHi=function () {
      console.log("我是:"+this.name);
    };
    obj.sayHi();
    var obj2={
      name:"小明",
      age:20,
      sayHi:function () {
        console.log("我是:"+this.name);
      },
      eat:function () {
        console.log("吃了");
      }
    };
    obj2.sayHi();
    obj2.eat();

  </script>
</head>

6：对象总结

<script>

    //字面量创建对象的缺陷: 一次性的对象

    //    var obj={
    //      name:"小明",
    //      age:38,
    //      sex:"女"
    //    };
    //    obj.name="小三";
    //    console.log(obj.name);

    //点语法:   对象.名字=值; 对象.名字=函数;
    //没有什么点,就有了

    /*
     *
     * js是一门什么样的语言?
     * 是一门解释性的语言
     * 是一门脚本语言
     * 是一门弱类型语言,声明变量都用var
     * 是一门基于对象的语言
     * 是一门动态类型的语言:
     * 1. 代码(变量)只有执行到这个位置的时候,才知道这个变量中到底存储的是什么,如果是对象,就有对象的属性和方法,如果是变量就是变量的作用
     * 2. 对象没有什么,只要点了,通过点语法,那么就可以为对象添加属性或者方法
     *
     * */

//    var obj = {};//空对象
//    obj.name = "看名字";
//    obj.age = 10;
//    obj.fly = function () {
//      console.log("飞吧");
//    };

  </script>

7：Json格式的数据

<script>
    //对象:有属性和方法,特指的某个事物
    //对象:一组无序属性的集合的键值对,属性的值可以是任意的类型
    //    function Dog(name) {
    //      this.name=name;
    //    }
    //    function Person(name,age) {
    //      this.age=age;
    //      this.name=name;
    //      this.sex=true;
    //      this.dog={};
    //      this.play=function () {
    //        console.log("喜欢玩游戏");
    //      };
    //    }
    //
    //    var sex=false;//男
    //    console.log(sex?"男":"女");

    //JSON格式的数据:一般都是成对的,是键值对,

    //json也是一个对象,数据都是成对的,一般json格式的数据无论是键还是值都是用双引号括起来的

    //    var obj={
    //      name:"小明"
    //    };

    var json = {
      "name": "小明",
      "age": "10",
      "sex": "男"
    };
    //遍历对象,是不能通过for循环遍历,无序

    //key是一个变量,这个变量中存储的是该对象的所有的属性的名字
    for (var key in json) {
      console.log(key + "===========" + json[key]);
    }

    //    var key="name";
    //    console.log(json[key]);
    //可以通过for-in循环
    //
    //    for(var key in json){
    //      //console.log(key);//json对象中的属性的名字
    //      console.log(json[key]);
    //    }
    //对象中确实有这个属性对象.属性名字  或者对象[属性名字]

    //一个一个的遍历出来

    //    var arr=[10,20,30];
    //    for(var i=0;i<arr.length;i++){
    //      console.log(arr[i]);
    //    }

  </script>

8：简单数据类型和复杂数据类型

  <script>

    //原始数据类型: number,string,boolean,undefined, null,object
    //基本类型(简单类型),值类型: number,string,boolean
    //复杂类型(引用类型):object
    //空类型:undefined,null

    //值类型的值在哪一块空间中存储? 栈中存储
    //引用类型的值在哪一块空间中存储?对象在堆上存储,地址在栈上存储

    //var num=10;//值类型,值在栈上
    //var obj={};//复杂类型,对象在堆,地址(引用)在栈

    //值类型之间传递,传递的是值
    //引用类型之间传递,传递的是地址(引用)

    //值类型作为函数的参数,传递的是值
    //引用类型作为函数的参数,传递的是地址

//    var num=10;
//    var num2=num;//传递的值

//    function f1(x) {
//      x=100;
//    }
//    var num=10;
//    f1(num);
//    console.log(num);//

    var obj={
      name:"小明"
    };
    function f2(obj2) {
      obj2.name="小红";
    }
    console.log(obj.name);//
    f2(obj);
    console.log(obj.name);//

  </script>

9：Math

 <script>

    //MDN----在线的帮助文档

    // 实例对象:通过构造函数创建出来,实例化的对象
    // 静态对象:不需要创建,直接就是一个对象,方法(静态方法)直接通过这个对象名字调用,
    // 实例方法必须通过实例对象调用
    // 静态方法必须通过大写的对象调用
    // Math是对象，不是构造函数
    // Math.PI----π---
    // Math.E----常数的底数
    // Math.abs(值)-----绝对值
    // Math.ceil(值)----向上取整
    // Math.floor(值)---向下取整
    // Math.max(值)---求最大值
    // Math.min(值)---求最小值
    // Math.pow(2,4)---求2的4次方
    // Math.sqrt(16)---求16开方

//    console.log(Math.PI);
//    console.log(Math.E);

    //var mt=new Math();

//    console.log( Math.abs('-1'));//1
//
//    console.log( Math.abs(-2));//2
//    console.log(Math.abs(null));//---------0  重点
//    console.log(Math.abs("string"));//NaN

//    console.log(Math.ceil(12.3));
//    console.log(Math.ceil(12.9));
//    console.log(Math.ceil(12.09));
//    console.log(Math.ceil(12.03));
//    console.log(Math.ceil(12.92));

//    console.log(Math.floor(12.3));
//    console.log(Math.floor(12.9));
//    console.log(Math.floor(12.09));
//    console.log(Math.floor(12.03));
//    console.log(Math.floor(12.92));

//    console.log(Math.fround(2));
//    console.log(Math.fround(2.1));
//    console.log(Math.fround(2.9));

    //找一坨数字中的最大值

//    console.log(Math.max(10,1,9,100,200,45,78));
//    console.log(Math.min(10,1,9,100,200,45,78));
//    console.log(Math.pow(2,4));
//    console.log(Math.sqrt(16));

    //0-4  没有5
    console.log(parseInt(Math.random()*5)+1);
    console.log(parseInt(Math.random()*100)+1);

  </script>

注意