­

前端學習(37)~js學習(十四):對象的創建

  • 2020 年 3 月 18 日
  • 筆記

創建自定義對象的幾種方法

方式一:對象字面量

對象的字面量就是一個{}。裡面的屬性和方法均是鍵值對:

  • 鍵:相當於屬性名。
  • 值:相當於屬性值,可以是任意類型的值(數字類型、字元串類型、布爾類型,函數類型等)。

例如:

var o = {              name: "千古壹號",              age: 26,              isBoy: true,              sayHi: function() {                  console.log(this.name);              }          };    console.log(o);

控制台輸出:

方式二:工廠模式

通過該方法可以大批量的創建對象。

    /*          * 使用工廠方法創建對象          *  通過該方法可以大批量的創建對象          */      function createPerson(name, age, gender) {          //創建一個新的對象          var obj = new Object();          //向對象中添加屬性          obj.name = name;          obj.age = age;          obj.gender = gender;          obj.sayName = function() {              alert(this.name);          };          //將新的對象返回          return obj;      }        var obj2 = createPerson("豬八戒", 28, "男");      var obj3 = createPerson("白骨精", 16, "女");      var obj4 = createPerson("蜘蛛精", 18, "女");

第一次看到這種工廠模式時,你可能會覺得陌生。如果簡化一下,可以寫成下面這種形式,更容易理解:(也就是,利用new Object創建對象)

var obj = new Obect();  obj.name = '豬八戒';  obj.age = 28;  obj.gender = '男';  obj.sayHi = function() {      alert('hello world');  };

弊端:

使用工廠方法創建的對象,使用的構造函數都是Object。所以創建的對象都是Object這個類型,就導致我們無法區分多種不同類型的對象。

方式三:利用構造函數

        //利用構造函數自定義對象          var stu1 = new Student("smyh");          console.log(stu1);          stu1.sayHi();            var stu2 = new Student("vae");          console.log(stu2);          stu2.sayHi();              // 創建一個構造函數          function Student(name) {              this.name = name;    //this指的是當前對象實例【重要】              this.sayHi = function () {                  console.log(this.name + "厲害了");              }          }

列印結果:

接下來,我們專門來講一下構造函數。

構造函數

程式碼引入

      // 創建一個構造函數,專門用來創建Person對象        function Person(name, age, gender) {          this.name = name;          this.age = age;          this.gender = gender;          this.sayName = function() {            alert(this.name);          };        }          var per = new Person("孫悟空", 18, "男");        var per2 = new Person("玉兔精", 16, "女");        var per3 = new Person("奔波霸", 38, "男");          // 創建一個構造函數,專門用來創建 Dog 對象        function Dog() {}          var dog = new Dog();

構造函數的概念

構造函數:是一種特殊的函數,主要用來創建和初始化對象,也就是為對象的成員變數賦初始值。它與 new 一起使用才有意義。

我們可以把對象中一些公共的屬性和方法抽取出來,然後封裝到這個構造函數裡面。

構造函數和普通函數的區別

構造函數的創建方式和普通函數沒有區別,不同的是構造函數習慣上首字母大寫。

構造函數和普通函數的區別就是調用方式的不同:普通函數是直接調用,而構造函數需要使用new關鍵字來調用。

this的指向也有所不同:

  • 1.以函數的形式調用時,this永遠都是window。比如fun();相當於window.fun();
  • 2.以方法的形式調用時,this是調用方法的那個對象
  • 3.以構造函數的形式調用時,this是新創建的實例對象

new 一個構造函數的執行流程

new 在執行時,會做下面這四件事:

(1)開闢記憶體空間,在記憶體中創建一個新的空對象。

(2)讓 this 指向這個新的對象。

(3)執行構造函數裡面的程式碼,給這個新對象添加屬性和方法。

(4)返回這個新對象(所以構造函數裡面不需要return)。

因為this指的是new一個Object之後的對象實例。於是,下面這段程式碼:

        // 創建一個函數          function createStudent(name) {              var student = new Object();              student.name = name;      //第一個name指的是student對象定義的變數。第二個name指的是createStudent函數的參數。二者不一樣          }

可以改進為:

        // 創建一個函數          function Student(name) {              this.name = name;       //this指的是構造函數中的對象實例          }

注意上方程式碼中的注釋。

類、實例

使用同一個構造函數創建的對象,我們稱為一類對象,也將一個構造函數稱為一個類。

通過一個構造函數創建的對象,稱為該類的實例。

instanceof

使用 instanceof 可以檢查一個對象是否為一個類的實例。

語法如下:

對象 instanceof 構造函數

如果是,則返回true;否則返回false。

程式碼舉例:

      function Person() {}          function Dog() {}          var person1 = new Person();          var dog1 = new Dog();          console.log(person1 instanceof Person); // 列印結果: true        console.log(dog1 instanceof Person); // 列印結果:false          console.log(dog1 instanceof Object); // 所有的對象都是Object的後代。因此,列印結果為:true

根據上方程式碼中的最後一行,需要補充一點:所有的對象都是Object的後代,因此 任何對象 instanceof Object 的返回結果都是true。

others

json的介紹

JSON:JavaScript Object Notation(JavaScript對象表示形式)。

JSON和對象字面量的區別:JSON的屬性必須用雙引號引號引起來,對象字面量可以省略。

json舉例:

      {              "name" : "zs",              "age" : 18,              "sex" : true,              "sayHi" : function() {                  console.log(this.name);              }          };

註:json里一般放常量、數組、對象等,但很少放function。

另外,對象和json沒有長度,json.length的列印結果是undefined。於是乎,自然就不能用for循環遍歷(因為遍歷時需要獲取長度length)。json和對象都不能用for循環遍歷。實際都是for … in

json遍歷的方法:

json 採用 for...in...進行遍歷,和數組的遍歷方式不同。如下:

<script>      var myJson = {          "name": "smyhvae",          "aaa": 111,          "bbb": 222      };        //json遍歷的方法:for...in...      for (var key in myJson) {          console.log(key);   //獲取 鍵          console.log(myJson[key]); //獲取 值(第二種屬性綁定和獲取值的方法)          console.log("------");      }  </script>

列印結果: