js的基本類型、引用類型、包裝類型

liangzai_cool 發(fā)布于2019-08-23 18:17 / 2483人閱讀

摘要：每當讀取這個基本類型時，后臺會創(chuàng)建一個對應的基本包裝類型的對象。類型判斷主要是用來判斷基本數(shù)據(jù)類型返回類型新增所以只能用來判斷基本數(shù)據(jù)類型。引用類型基本包裝類型都會返回。

最近重溫JS高程設計以及與朋友的討論。決定趁熱打鐵記錄JS的各種類型，并做下深入總結(jié)。

js的幾種類型

基本類型：Boolean、String、Number、Null、Undefined

引用類型：
2.1 Object、Array、Date、RegExp等
2.2 基本包裝類型：Boolean、String、Number

基本類型

就是我們平常用來做簡單賦值的類型。這種數(shù)據(jù)類型是存在棧中以值得形式存在，賦值時也是直接進行值傳遞

引用類型

是高級的類型，可以添加方法和熟悉等。真正的數(shù)據(jù)存在堆中，賦值時是進行址傳遞

    //舉個例子
    var a = [3,4,5];
    var b = a;//賦值的是 存儲 a變量的地址。這時候a、b指向同一片內(nèi)存區(qū)域
    b[0] = 9;//改變內(nèi)存區(qū)域中的值 a的值也進行更改
    console.log(a);//[9,4,5]

基本包裝類型介紹

我們都知道只有引用類型才能添加、調(diào)用屬性和方法，那為什么基本類型Boolean、String、Number能調(diào)用方法？按說它是沒有方法才對呀！這是因為ECMAScript提供了三個特殊的包裝類型：Boolean、String、Number。每當讀取這個基本類型時，后臺會創(chuàng)建一個對應的基本包裝類型的對象。使得可以操作這個基本類型了。

當我們在內(nèi)存中讀取基本類型時，后臺會做以下操作：

1.創(chuàng)建對應包裝類型(Boolean、String、Number)的實例
2.在實例上調(diào)用對應的方法
3.銷毀這個實例

    //舉個實際操作的例子  
    var str = "have a good time";
    var str2 = str.charAt(0);//h;
    str.color = "red";
    console.log(str.color);//undefined

這是因為引用類型和基本包裝類型的生存期不一樣。引用類型在執(zhí)行流離開當前作用域時一直存在內(nèi)存中。自動創(chuàng)建的基本包裝類型的對象，只存在于執(zhí)行這一行代碼的一瞬間，執(zhí)行完立馬被銷毀了。這就是為什么我們給str.color添加對象時打印出來為undefined。因為在執(zhí)行完str的color這一行代碼時，自動創(chuàng)建的包裝類型對象被銷毀了。下面console出來的str是新創(chuàng)建的String對象，沒有color這個屬性。

js類型判斷

typeof 主要是用來判斷基本數(shù)據(jù)類型

//返回類型： string、number、boolean、object、undefined、function、Symbol(ES6新增)
typeof 123; // "number"
typeof "cherry";// "string"
typeof false; //"boolean"
typeof undefined; //"undefined"
typeof null; // "object"
typeof {name:"cherry"};//"object"
var fun = function(){};
typeof fun; //"function"
typeof new String("xxx");//"object"

所以typeof只能用來判斷基本數(shù)據(jù)類型。null、引用類型、基本包裝類型都會返回object。

instanceof 用法:A instanceof B,主要是判斷A是否是某個對象的實例，簡單來說就是A的原型鏈上(__proto__)是否有B的原型對象(prototype)。

// 例子
var obj= {"name":"cherry"};
obj instanceof Object; //true

var strObj = new String("hello");
strObj instanceof String;//true

var str = "hello";
str instanceof String;//false

//判斷的原理 就是計算逐級計算左邊對象的__proto__是否等于右邊對象的prototype即可
function instance(left,right){
    var obj = right.prototype;
    var left = left.__proto__;
    while(true){
        if(left === null){
            return false;
        }
        if(left == obj){
            return true;
        }
        left = left.__proto__;
    }
}

Object.prototype.toString.call()(點擊看此方法具體原理)
Object.toString()返回對象的字符串表示。但是由于數(shù)值、布爾、字符串、數(shù)組都有重寫toString方法,直接調(diào)用的時候使用的是自身原型對象上有toString方法則不會往上去找Object的toString方法。這里強制使用Object原型對象上的toString方法。

Object.prototype.toString.call("123");//[object String]
var objStr = new String("123");//包裝類型檢測出來也是對應類型而不是對象
Object.prototype.toString.call(objStr);//[object String]
Object.prototype.toString.call(123);//[object Number]
Object.prototype.toString.call(true);//[object Boolean]
Object.prototype.toString.call(null);//[object Null]
Object.prototype.toString.call(undefined);//[object Undefined]
var obj = {"name":"cherry"};
Object.prototype.toString.call(obj);//[object Object]
var arr = [1,2,3];
Object.prototype.toString.call(arr);//[object Array]

總結(jié)：使用Object的toString(),可以檢測出各值的類型。基本數(shù)據(jù)類型和基本包裝類型返回的值是一樣。所以不用擔心別人是通過基本包裝類型定義的變量(面試時被問過)

面試題：判斷一個值的數(shù)據(jù)類型

function valueType(data){
    var type = null;
    var typeList = ["Object","Number","Boolean","String","Function","Object","Null","Undefined"];
    for(var item of typeList){
        if(Object.prototype.toString.call(str) == `[object ${item}]`){
            type = item;
            break;
        }
    }
    return type;
}

GPU云服務器云服務器 js引用類型的存儲 js引用的數(shù)據(jù)類型 js的基本數(shù)據(jù)類型 js中的基本數(shù)據(jù)類型有哪些

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/104961.html

js 中的基本類型，引用類型，基本包裝類型

摘要：基本類型引用類型等，說白了就是對象。。。基本包裝類型如下基本類型毫無疑問上面的是一個基本類型，但是它卻能召喚出一個的方法，這是什么原因呢主要是因為在基本類型中，有三個比較特殊的存在就是，這三個基本類型都有自己對應的包裝對象。基本類型：Undefined,Null,Boolean,Number,String 引用類型：Object,Array,Date,RegExp等，說白了就是對象。...

kun_jian 2019-08-22 14:03 評論0 收藏0
JS中，基本數(shù)據(jù)類型、引用類型與基本包裝類型

摘要：例子中，屬于基本類型對象。基本數(shù)據(jù)類型和引用類型作方法入?yún)r的差異通常，在函數(shù)調(diào)用時，如果入?yún)榛緮?shù)據(jù)類型時，函數(shù)的參數(shù)將以值傳遞的方式傳遞。前言：再次翻閱JS高程(第3版)過程中，看到了基本包裝類型，趁熱留下此文，對JS的數(shù)據(jù)類型做個較為深入的小結(jié)（2018-10-19）。雖然JS與其他強類型語言不一樣，聲明中無需預設數(shù)據(jù)類型，但是JS也是有數(shù)據(jù)類型區(qū)分的。基本數(shù)據(jù)類型（...

Tychio 2019-08-23 12:26 評論0 收藏0
輕松理解JS基本包裝對象

摘要：今天來討論一下中的基本包裝對象也叫基本包裝類型，之前剛學到這里的時候，自己也是一頭霧水，不明白這個基本包裝對象到底是個什么鬼，后來找了很多資料，終于看清了它的真面目。基本類型引用類型等，說白了就是對象。。。今天來討論一下JS中的基本包裝對象（也叫基本包裝類型），之前剛學到這里的時候，自己也是一頭霧水，不明白這個基本包裝對象到底是個什么鬼，后來找了很多資料，終于看清了它的真面目。首先呢...

seal_de 2019-08-23 15:28 評論0 收藏0
js 中的數(shù)據(jù)類型

摘要：來自你不知道的對未初始化和未聲明的變量執(zhí)行操作符都返回了值類型是第二個只有一個值的數(shù)據(jù)類型，這個特殊的值是。基本類型主要有：undefined、null、布爾值（Boolean）、字符串（String）、數(shù)值（Number）、Symbol undefined 在使用 var,let,const 聲明變量但未對其加以初始化時，這個變量的值就是undefined 注意點： ...

Jensen 2019-08-23 17:08 評論0 收藏0
JS中數(shù)據(jù)類型、內(nèi)置對象、包裝類型對象、typeof關系

摘要：平時在復習基礎知識時，經(jīng)常會遇到數(shù)據(jù)類型基礎數(shù)據(jù)類型內(nèi)置對象包裝類型對象，檢測數(shù)據(jù)類型時，用到的值，感覺都差不多，但是又有差異。值與數(shù)據(jù)類型關系對比下圖，即可知值相較于基礎數(shù)據(jù)類型少多平時在復習JS基礎知識時，經(jīng)常會遇到JS數(shù)據(jù)類型、基礎數(shù)據(jù)類型、內(nèi)置對象、包裝類型對象，檢測數(shù)據(jù)類型時，用到的typeof值，感覺都差不多，但是又有差異。今天特地整理下，方便理解。 JS數(shù)據(jù)類型基礎數(shù)...

OldPanda 2019-08-23 15:28 評論0 收藏0