当前位置: 萬仟网 > IT编程>开发语言>JavaScript > JS基础语法---创建对象---三种方式创建对象:调用系统的构造函数;自定义构造函数;字面量的方式

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

2019年12月02日 16:39  | 萬仟网IT编程  | 我要评论

创建对象三种方式:

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

 

 
 

 

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

◎已有 0 人评论

Copyright © 2019  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com