JS 堆棧Object詳解

Js——萬物皆對象??!

對于初學(xué)Js的碼農(nóng)來說,Js的對象是令大家困惑的一個難點,而面向?qū)ο蟮乃枷雲(yún)s是掌握Js編程的核心。因此,想要學(xué)好Js必須搞清楚什么是對象,什么是面向?qū)ο蟆?br> 萬物皆對象,這句話可能對很多學(xué)習(xí)Js的人來說都不陌生,但是Js中是真的是 萬物皆對象?接下來我們就聊聊這件事吧~


Js數(shù)據(jù)類型

  • ES6中將數(shù)據(jù)分為七中類型
  1. String 字符串
  2. Number 數(shù)值
  3. Boolean 布爾
  4. Null 空
  5. Undefined 未定義
  6. Symbol 標志
  7. Object 對象

如果對這其中這七中數(shù)據(jù)類型是否為對象系統(tǒng)再劃分,又可分為兩類。前六種數(shù)據(jù)類型為元數(shù)據(jù)類型(基本數(shù)據(jù)類型),對象系統(tǒng)(Array,Map,Set,F(xiàn)unction,Object)。
至于為何如此劃分,還需要從堆棧值類型、引用類型聊起


值類型

存儲在棧區(qū)的數(shù)據(jù),無法添加、刪除屬性,如果直接賦值給另一個變量,兩個變量互不影響,修改其中任意一個變量的值,都對另一個變量的值無影響。

舉例

var str   =  "李四"; 
         
str.name  = "字符串";   //無法添加屬性
          
console.log(str.name)  //打印 undefined  屬性沒有添加上
          
var str2 = str;       //將str的值賦給變量str2
        
str2 = "張三";        //修改str2的值 
         
console.log(str)       //打印 "李四"   str的值不變

結(jié)論:String、NumberBoolean、Null、Undefined、Symnol 都屬于值類型


引用類型

引用類型的值儲存再堆區(qū),再棧區(qū)數(shù)據(jù)的引用地址。如果直接賦值給另一個變量,其實是把數(shù)據(jù)的存放地址拷貝給了另一個變量,共享一個地址,共用一份數(shù)據(jù),任何一方更改數(shù)據(jù),都會導(dǎo)致另一方數(shù)據(jù)發(fā)生改變。

舉例

var arr = [1,2,3]; 

arr.name = "score";    //添加屬性

console.log(arr.name); //打印 "score"  屬性添加成功

delete arr.name;       //刪除屬性

console.log(arr.name); //打印 undefined 屬性刪除成功

var arr2 = arr;        //將arr的值賦值給另一個變量

arr2[0] = 4;           //修改其中一個變量的值

console.log(arr);      //打印 [4,2,3] 數(shù)據(jù)改變       

console.log(arr2);     //打印 [4,2,3] 數(shù)據(jù)改變

結(jié)論:基本數(shù)據(jù)類型除外的(ArrayMap、Set、Object、Date...)都屬于引用類型


Js 對象(Object)

  • 概括講:
    對象就是屬性和方法的集合,結(jié)合上面的結(jié)論,值類型無法添加屬性和方法,因此不滿足對象的定義。而引用類型都可以設(shè)置屬性和方法。
引用類型的數(shù)據(jù)都是對象,換言之,非值類型的其它數(shù)據(jù)類型都是對象。
個人理解js中"萬物皆對象的"真正含義
即:js中除了六種值類型以外的所有數(shù)據(jù)類型都是對象。

對象創(chuàng)建方式

一、字面量創(chuàng)建
二、new創(chuàng)建
三、工廠模式
四、構(gòu)造函數(shù)模式

  1. 字面量創(chuàng)建
var obj = {
  "name":"張三",
  age:10,
  say:function(){
    alert('hellow')
  } 
}
  1. new關(guān)鍵字創(chuàng)建
var obj = new Object();
obj.name = "張三";
obj.say = function(){
  alert('hellow')
};
  1. 工廠模式
function people(){
   var obj = new Object();
   obj.name = "張三";
   obj.say = function(){
     console.log("你好")
   }
} 
var p1 = people();
  1. 構(gòu)造函數(shù)模式
function People(){  
    this.name = "張三";
    this.say = function(){
       console.log("你好")
    }
}
var p1 = new People();

prototype 、constructor、 _proto _

  • prototype(顯式原型)

每一個函數(shù)都有一個默認的屬性prototype,稱之為原型。原型本身就是一個對象,可以設(shè)置屬性和方法,默認帶有一個屬性constructor。通過原型設(shè)置的屬性和方法能夠被實例對象擁有,也可以用來實現(xiàn)繼承。

  • constructor(構(gòu)造器)
    存在于函數(shù)的prototype(原型)中,實質(zhì)就是指向構(gòu)造函數(shù)的指針,或者說它的值就是原型所在的函數(shù)。
  • _proto_ (隱式原型)
    每一個實例對象默認的隱式屬性,指向創(chuàng)建這個對象的函數(shù)的原型,或者簡單理解為與prototype的值一樣。一般不上場,交由prototype處理屬性的增刪改查。所以兩者關(guān)系可以概括為臺前(prototype)幕后(_ proto_)。

總結(jié):
1.任何一種對象的創(chuàng)建方式其實內(nèi)部都是通過函數(shù)來實現(xiàn)的;
2.每一個函數(shù)都會在生成的時候擁有一個默認的原型屬性(prototype),如果把這個函數(shù)作為類來理解,prototype里存放的就是類的共同屬性特征(Eg:人類都有鼻子眼睛嘴巴,會行走)。
3.每一個原型(prototype)中都有一個默認constructor屬性,用來獲取原型存在的函數(shù)。
4.每一個創(chuàng)建出來的實例對象(Eg:張三),都會擁有默認的隱式屬性proto,指向prototype。所以只要是prototype中有的屬性,proto都擁有,因此每個實例對象都擁有(Eg:張三擁有人類的所有共同特征)


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容