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

自定義建構式創建物件，做了四件事情：

第三種：字面量的方式創建物件

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

標籤：JavaScript

上一篇：解決html匯出pdf中文亂碼問題的正確姿勢

下一篇：JavaScript 自定義html元素滑鼠右鍵選單