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 ...
一周排行
  • 背景 習慣使用markdown的人應該都知道Typora這個神器,它非常簡潔高效。雖然博客園的線上markdown編輯器也不錯,但畢竟是網頁版,每次寫東西需要登錄系統-進後臺-找到文章-編輯-保存草稿。。。非常難受。。。 但是使用Typora來寫的話,文章圖片又是個問題,本地寫完粘貼到網站上,圖片全 ...
  • 案例:修改預設線程個數 1.NameValueCollection System.Collections.Specialized.NameValueCollection collection = new System.Collections.Specialized.NameValueCollecti ...
  • // from https://stackoverflow.com/questions/35381238/how-to-use-custom-fonts-in-emgucv string text = "塗聚文(Geovin Du)"; // 下麵定義一個矩形區域 int rectWidth = t ...
  • 場景 ASP.NET中新建Web網站並部署到IIS上(詳細圖文教程): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/107199747 前面講過將ASP.NET的項目部署到本機的IIS上。 但是如果將其部署到伺服器上Window ...
  • 在不同的區域中使用Convert.ToDouble可能會產生問題。 string str = "20.0"; double val = Convert.ToDouble(str); 比如在某些區域語言中得到的結果是200,如: Thread.CurrentThread.CurrentCulture ...
  • 1、前言 ​ 不知道你是否對.NET裡面的定時器產生過一些疑問,以下是武小棧個人的一些總結。 2、官方介紹 在.NET的框架之內定時器有四種,先看一下微軟官方對他們各自特點介紹: System.Timers.Timer,它將觸發事件,並定期在一個或多個事件接收器中執行代碼。 類旨在用作多線程環境中基 ...
  • 筆試考試系統需求分析 1. 引言 1.1編寫目的 項目需求分析目的是使用戶和軟體開發者雙方對項目開發目標有一個共同的理解,便於對軟體開發各個過程的控制與管理,通過對項目開發目標的描述,使開發人員能夠正確理解用戶需求,明確該系統應具有的功能。性能與界面要求。 需求分析作為項目開放的基礎和依據,其預期讀 ...
  • 使用Topshelf部署.net core windows服務 首先新建一個.net core的模板worker程式 過程 略 打開Program.cs namespace TopshelfDemo { public class Program { public static void Main(s ...
  • xaml裡面使用很簡單 xmlns:i="http://schemas.microsoft.com/xaml/behaviors" <i:Interaction.Behaviors> <i:MouseDragElementBehavior/> </i:Interaction.Behaviors> 後 ...
  • Application Insignhts是微軟開發的一套監控程式。他可以對線上的應用程式進行全方位的監控,比如監控每秒的請求數,失敗的請求,追蹤異常,對每個請求進行監控,從http的耗時,到SQL查詢的耗時,完完整整的被記錄下來。當對程式進行優化跟排錯時非常好使。它原來是visualstudio ...