欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS基础语法---创建对象---三种方式创建对象:调用系统的构造函数;自定义构造函数;字面量的方式

程序员文章站 2022-07-02 12:22:26
创建对象三种方式: 调用系统的构造函数创建对象 自定义构造函数创建对象(结合第一种和需求通过工厂模式创建对象) 字面量的方式创建对象 第一种:调用系统的构造函数创建对象 //小苏举例子: //实例化对象 var obj = new Object(); //对象有特征 属性;和 行为 方法 //添加属 ......

创建对象三种方式:

  1. 调用系统的构造函数创建对象
  2. 自定义构造函数创建对象(结合第一种和需求通过工厂模式创建对象)
  3. 字面量的方式创建对象

 

第一种:调用系统的构造函数创建对象

    //小苏举例子:
    //实例化对象
    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();

 

练习1:有一个黄色的小狗,叫大黄,今年已经三岁了,250斤的重量每次走路都很慢,喜欢吃大骨头

    //创建对象
    var smalldog = new object();
    smalldog.name = "大黄";
    smalldog.age = 3;
    smalldog.color = "黄色";
    smalldog.weight = "250";
    smalldog.eat = function () {
      console.log("我要吃大骨头");
    };
    smalldog.walk = function () {
      console.log("走一步摇尾巴");
    };
    smalldog.eat();//方法的调用
    smalldog.walk();

 

练习2:创建一个手机对象,手机有型号,有颜色,可以打电话和发短信

    var phone = new object();
    phone.size = "iphone8";
    phone.color = "黑色";
    phone.call = function () {
      console.log("打电话");
    };
    phone.sendmessage = function () {
      console.log("你干啥捏,我烧锅炉呢");
    };

    phone.call();
    phone.sendmessage();

 

如何获取该变量(对象)是不是属于什么类型的?

语法: 变量 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("小黄", 18);
    per2.sayhi();

 

第二种:自定义构造函数创建对象 (结合第一种和需求通过工厂模式创建对象)

自定义构造函数创建对象:
  1. 自定义构造函数
  2. 创建对象
    //函数和构造函数的区别;名字是不是大写(首字母是大写)
    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);

 

自定义构造函数创建对象,做了四件事情:

1. 在内存中开辟(申请一块空闲的空间)空间, 存储创建的新的对象
2. 把this设置为当前的对象
3. 设置对象的属性和方法的值
4. 把this这个对象返回 
 
 

第三种:字面量的方式创建对象

var num=10;

var arr=[];

var obj={};

    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();