JS基礎語法---創建對象---三種方式創建對象:調用系統的構造函數;自定義構造函數;字面量的方式

来源:https://www.cnblogs.com/jane-panyiyun/archive/2019/12/02/11969339.html

創建對象三種方式: 調用系統的構造函數創建對象 自定義構造函數創建對象(結合第一種和需求通過工廠模式創建對象) 字面量的方式創建對象 第一種:調用系統的構造函數創建對象 //小蘇舉例子: //實例化對象 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();

 

 
 

 


您的分享是我們最大的動力!

更多相關文章
  • 1. 對象: 有屬性和方法,特指的某個事物 對象: 一組無序屬性的集合的鍵值對,屬性的值可以是任意的類型 2.JSON格式的數據:一般都是成對的,是鍵值對, json也是一個對象, 數據都是成對的, 一般json格式的數據無論是鍵還是值都是用雙引號括起來的 var json = { "name": ...
  • 在使用jquery-validate.js插件時可以做一些初始化配置在初始化jquery-validate.js對象的時候,將外部的一些配置和該插件內部的一些預設配置合併在一起,如果有相同的配置,前者覆蓋後者(預設)的配置 // Constructor for validator $.validat ...
  • JS是一門什麼樣的語言? 是一門解釋性的語言 是一門腳本語言 是一門弱類型語言,聲明變數都用var 是一門基於對象的語言 是一門動態類型的語言: 1. 代碼(變數)只有執行到這個位置的時候,才知道這個變數中到底存儲的是什麼,如果是對象,就有對象的屬性和方法,如果是變數就是變數的作用 2. 對象沒有什 ...
  • 1. 簡書類 實現效果 html代碼 <div class="container"> <form action="" class="parent"> <input type="text" class="search" placeholder="搜索"> <input type="button" na ...
  • javascript 報錯 string.split is not a function ...
  • 自定義html元素滑鼠右鍵菜單 實現思路 在觸發contextmenu事件時,取消預設行為(也就是阻止瀏覽器顯示自帶的菜單),獲取右鍵事件對象,來確定滑鼠的點擊位置,作為顯示菜單的left和top值 編碼實現 <!DOCTYPE html> <html> <head> <meta charset=" ...
  • 功能:在文本框中輸入待辦事項按下回車後,事項會出現在未完成列表中;點擊未完成事項前邊的覆選框後,該事項會出現在已完成列表中,反之亦然;點擊刪除按鈕會刪除該事項。待辦事項的數據是保存到本地存儲的(localStorage),就算關閉頁面再打開,數據還是存在的(前提是要用相同瀏覽器)。 ToDoList ...
  • 基於Taro多端實踐TaroPop:自定義模態框|dialog對話框|msg消息框|Toast提示 taro自定義彈出框支持編譯到多端H5/小程式/ReactNative,還可以自定義彈窗類型/彈窗樣式、多按鈕事件/樣式、自動關閉、遮罩層、彈窗顯示位置及自定義內容模板 用法 ▍在相應頁面引入組件 i ...
一周排行
x