JS 中 物件 基礎認識

CodeYarn發表於2022-05-02
JS物件

俗話說：“萬物皆物件”，在 Javascript  中除了原始值幾乎所有的東西都可以看做物件：

  • 布林是物件（ new 關鍵詞定義）
  • 數字是物件（ new 關鍵詞定義）
  • 字串是物件（ new 關鍵詞定義）
  • 日期永遠都是物件
  • 算術永遠都是物件
  • 正規表示式永遠都是物件
  • 陣列永遠都是物件
  • 函式永遠都是物件
  • 物件永遠都是物件

 

一、什麼是原始值

Javascript 中原始值是指沒有屬性和方法的值。

原始資料型別（擁有原始值的型別）：

  • string
  • number
  • boolean
  • null
  • undefined

 

二、什麼是物件

“萬物皆物件”，在 Java 中物件的定義：物件就是存在的具體實體，具有明確定義的狀態和行為，是物件導向程式設計的核心，用來描述現實世界中的實體，為計算機應用程式提供實體基礎，也是完成特定任務一個封裝。

Javascript 中的物件是包含變數的變數，但是物件能夠包含很多值。可以理解為：物件是屬性和方法的命名值得容器  

var person = {firstName:"Coder", lastName:"Yarn", age:22, eyeColor:"black"};

 

物件命名值 即 物件屬性

屬性 值
firstName Coder
lastName Yarn
age 22
eyeColor black

 

物件方法：方法是可以在物件上執行的動作，即在物件身上發生的事件。

屬性 方法
fullName function() {return this.firstName + " " + this.lastName;}

 

三、物件的建立

建立物件主要三種方法：

  • 物件字面量； 
    var person = {
    firstName:"Coder", 
    lastName:"Yarn", 
    age:22, 
    eyeColor:"black",
    fullName:function() {
        return this.firstName + " " + this.lastName;
    },
};
  • new object(); 
    let person = new Object();
    person.firstName = "Coder"; 
    person.lastName = "Yarn";
    person.age = 22; 
    person.eyeColor = "black";
    person.fullName = function() {
        return this.firstName + " " + this.lastName;
    };
  • 自定義建構函式； 
    function Person(){
    constructor(firstName,lastName,age,eyeColor){
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
        this.eyeColor = eyeColor;
    };
    this.fullName = function() {
        return this.firstName + " " + this.lastName;
    };
};

var person1 = new Person("Coder","Yarn",22,"black");

console.log(personl);
console.log(person1.fullName());

//列印的結果
Coder
Yarn
22
black
Coder Yarn

 

注意：出於簡易性、可讀性和執行速度的考慮不會使用第二種方法（new Object()），而是使用第一種建立方法（物件字面量方法）。

在 ES5 中為了簡化程式碼，將物件共同擁有的屬性和方法都放在同一個函式中，這個函式就是我們自定義的建構函式，即 Java 中的類，然後可以通過 new 一個例項物件來使用這些屬性和方法，不過這種方法特別地浪費記憶體。 ES6 後幾乎都使用物件字面量方法來建立物件。

相關文章