zoukankan      html  css  js  c++  java
  • JS基础语法---创建对象---三种方式创建对象:调用系统的构造函数;自定义构造函数;字面量的方式

    创建对象三种方式:

    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();
     
     
  • 相关阅读:
    react中refs的使用
    在npm发布自己造的轮子
    如何阅读一本书——分析阅读模板
    如何阅读一本书——检视阅读模板
    Redis教程——检视阅读
    如何阅读一本书——分析阅读Pre
    SVN常用功能介绍(二)
    SVN常用功能介绍(一)
    分页sql大全
    .NetCore 登录(密码盐+随机数)
  • 原文地址:https://www.cnblogs.com/jane-panyiyun/p/11969339.html
Copyright © 2011-2022 走看看