js的基本类型、引用类型、包装类型

liangzai_cool 发布于2019-08-23 18:17 / 2484人阅读

摘要：每当读取这个基本类型时，后台会创建一个对应的基本包装类型的对象。类型判断主要是用来判断基本数据类型返回类型新增所以只能用来判断基本数据类型。引用类型基本包装类型都会返回。

最近重温JS高程设计以及与朋友的讨论。决定趁热打铁记录JS的各种类型，并做下深入总结。

js的几种类型

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

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

基本类型

就是我们平常用来做简单赋值的类型。这种数据类型是存在栈中以值得形式存在，赋值时也是直接进行值传递

引用类型

是高级的类型，可以添加方法和熟悉等。真正的数据存在堆中，赋值时是进行址传递

    //举个例子
    var a = [3,4,5];
    var b = a;//赋值的是 存储 a变量的地址。这时候a、b指向同一片内存区域
    b[0] = 9;//改变内存区域中的值 a的值也进行更改
    console.log(a);//[9,4,5]

基本包装类型介绍

我们都知道只有引用类型才能添加、调用属性和方法，那为什么基本类型Boolean、String、Number能调用方法？按说它是没有方法才对呀！这是因为ECMAScript提供了三个特殊的包装类型：Boolean、String、Number。每当读取这个基本类型时，后台会创建一个对应的基本包装类型的对象。使得可以操作这个基本类型了。

当我们在内存中读取基本类型时，后台会做以下操作：

1.创建对应包装类型(Boolean、String、Number)的实例
2.在实例上调用对应的方法
3.销毁这个实例

    //举个实际操作的例子  
    var str = "have a good time";
    var str2 = str.charAt(0);//h;
    str.color = "red";
    console.log(str.color);//undefined

这是因为引用类型和基本包装类型的生存期不一样。引用类型在执行流离开当前作用域时一直存在内存中。自动创建的基本包装类型的对象，只存在于执行这一行代码的一瞬间，执行完立马被销毁了。这就是为什么我们给str.color添加对象时打印出来为undefined。因为在执行完str的color这一行代码时，自动创建的包装类型对象被销毁了。下面console出来的str是新创建的String对象，没有color这个属性。

js类型判断

typeof 主要是用来判断基本数据类型

//返回类型： 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只能用来判断基本数据类型。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()返回对象的字符串表示。但是由于数值、布尔、字符串、数组都有重写toString方法,直接调用的时候使用的是自身原型对象上有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]

总结：使用Object的toString(),可以检测出各值的类型。基本数据类型和基本包装类型返回的值是一样。所以不用担心别人是通过基本包装类型定义的变量(面试时被问过)

面试题：判断一个值的数据类型

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引用的数据类型 js的基本数据类型 js中的基本数据类型有哪些

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104961.html

js 中的基本类型，引用类型，基本包装类型

摘要：基本类型引用类型等，说白了就是对象。。。基本包装类型如下基本类型毫无疑问上面的是一个基本类型，但是它却能召唤出一个的方法，这是什么原因呢主要是因为在基本类型中，有三个比较特殊的存在就是，这三个基本类型都有自己对应的包装对象。基本类型：Undefined,Null,Boolean,Number,String 引用类型：Object,Array,Date,RegExp等，说白了就是对象。...

kun_jian 2019-08-22 14:03 评论0 收藏0
JS中，基本数据类型、引用类型与基本包装类型

摘要：例子中，属于基本类型对象。基本数据类型和引用类型作方法入参时的差异通常，在函数调用时，如果入参为基本数据类型时，函数的参数将以值传递的方式传递。前言：再次翻阅JS高程(第3版)过程中，看到了基本包装类型，趁热留下此文，对JS的数据类型做个较为深入的小结（2018-10-19）。虽然JS与其他强类型语言不一样，声明中无需预设数据类型，但是JS也是有数据类型区分的。基本数据类型（...

Tychio 2019-08-23 12:26 评论0 收藏0
轻松理解JS基本包装对象

摘要：今天来讨论一下中的基本包装对象也叫基本包装类型，之前刚学到这里的时候，自己也是一头雾水，不明白这个基本包装对象到底是个什么鬼，后来找了很多资料，终于看清了它的真面目。基本类型引用类型等，说白了就是对象。。。今天来讨论一下JS中的基本包装对象（也叫基本包装类型），之前刚学到这里的时候，自己也是一头雾水，不明白这个基本包装对象到底是个什么鬼，后来找了很多资料，终于看清了它的真面目。首先呢...

seal_de 2019-08-23 15:28 评论0 收藏0
js 中的数据类型

摘要：来自你不知道的对未初始化和未声明的变量执行操作符都返回了值类型是第二个只有一个值的数据类型，这个特殊的值是。基本类型主要有：undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、Symbol undefined 在使用 var,let,const 声明变量但未对其加以初始化时，这个变量的值就是undefined 注意点： ...

Jensen 2019-08-23 17:08 评论0 收藏0
JS中数据类型、内置对象、包装类型对象、typeof关系

摘要：平时在复习基础知识时，经常会遇到数据类型基础数据类型内置对象包装类型对象，检测数据类型时，用到的值，感觉都差不多，但是又有差异。值与数据类型关系对比下图，即可知值相较于基础数据类型少多平时在复习JS基础知识时，经常会遇到JS数据类型、基础数据类型、内置对象、包装类型对象，检测数据类型时，用到的typeof值，感觉都差不多，但是又有差异。今天特地整理下，方便理解。 JS数据类型基础数...

OldPanda 2019-08-23 15:28 评论0 收藏0