JS中‘hello’与new String(‘hello’)引出的问题详解

定义一个字符串

在工作中我们大概有3种方法去定义一个字符串：

1. var str = 'hello';
2. var str1 = String('hello');
3. var str2 = new String('hello');

(下文直接会带 以上三个变量....)

这三种方法定义出来的 'hello',都有自己的属性 例如lengh,有自己的方法例如: indexOf(),在日常工作定义中也没有感觉到任何的不同。

那是否深入过，

1.这三种方式定义出来的'hello',是否是一样的呢?

2.为什么基本类型可以直接调用其对应的方法呢?

这三种方式定义出来的'hello',是否是一样的呢?

console.log(str === str1) //true
console.log(str === str2) //false
console.log(str1 === str2) //false

我们可以发现 最后一种方式定义的 与上面两种方式定义的 不相等。

???

首先我们知道一个东西 就是:

new 出来的一定是对象。

所以分别 打出三个的类型：

console.log(typeof str) //string
console.log(typeof str1) // string
console.log(typeof str2) //object

所以这也就是为什么不会严格相等的原因。

引出数据类型 与 堆栈之间的关系

尝试深入理解原因:

我们知道，String,Number,Boolean在JS中是基本类型，基本类型是存储在栈(stack)内存中的,数据大小确定，内存空间大小可以分配。

而引用类型是存储在堆(heap)内存中的,例如对象, 栈中存在的仅仅是一个堆的指针，这也就是我们日常遇到 a = {num:1}, b=a, b.num1 = 2, 那么a.num1 也为2 的原因。因为a,b同时指向同一个地址。

前两种方式定义出来的是在栈中并且值相等，而第三种方法定义出来的仅仅是栈中的一个指针。

所以这也是为什么 三种方式定义出来的不一样。

为什么基本类型可以直接调用其对应的方法呢?

尝试:

console.log(str.length) // 5
str.say = 'world'
console.log(str.say) //undefined

 console.log(str1.lengh) // 5
str1.say = 'world'
console.log(str1.say) //undefined

console.log(str2.lengh) // 5
str2.say = 'world'
console.log(str.say) //world

引出包装对象和原始资料类型

我们发现第一种第二种方式均可访问lengh属性，

但是为什么我们并不能自定义一个属性并进行访问?

数字、字符串、布尔三者，在JS中称为原始的(primitives)资料类型,而 new String(), new Number() 就是包装对象。

包装对象也是对象。

这也就是为什么 我们打印 三种类型分别为 ： string(原始资料类型) , string(原始资料类型) , object(包装对象).

我们可以理解 new 出来的 str2 对象有 String 的一系列方法

console.log(str2.indexOf === String.prototype.indexOf) // true

那尝试一下 第一种第二种方法 是否有同样的true?

console.log(str.indexOf === String.prototype.indexOf) //true
console.log(str1.indexOf === String.prototype.indexOf) //true

但是:

str instanceof String // false
str1 instanceof String // false

str 又 不属于String 却拥有 String 的方法?????

因为:

这是JS中的设计。

这是JS中的设计。

这是JS中的设计。

原始资料类型的方法与属性是"借"来的

一个原始的资料类型值，并没有如对象会有属性或方法，

原始的资料类型在运算时用的属性与方法，是向包装对象"借来"的用的，

所以原始资料类型是可以向 new String() 或者 new Number() 借来所有的方法。但是自己本身却没有属性和方法。

所以这也就是为什么第一种第二种我们无法去自定义属性却可以使用对应类型的方法的原因

总结：

1.第一种和第二种方法定义出来的是原始资料类型

并储存于栈中,

并向包装对象(new ..())借来方法和属性.

2.第三种是 包装对象，

栈中储存堆指针，

堆中储存内容。

所以这也是发生一系列看似不正常但是又正常的事情的原因,

哈哈哈哈哈哈哈哈。

当然还有很多的东西，既然牵扯到了堆栈，

那么又不得不了解一下堆栈到底是什么,

有什么区别等等。

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • javascript中new Array()和var arr=[]用法区别

    大家在学习javascript中对于数组函数new Array()和var arr=[]很多朋友不知道如何区别,也不知道用法,下面看看我们总结的. var arr=[] 这是一种字面量定义数组的方法 var arr=new Array() 这是调用数组构造函数生成的数组 上面的2种定义数组的方法到底一样不一样 目前我们大致的认同是下面这样的 用new 关键字去内存开辟一个存储地址比较耗资源,耗内存. 而字面量方式直接在内存开辟一个存储字段相对简单,不耗资源. 我们首先不去否定上面的结论对不对.

  • JavaScript中new运算符的实现过程解析

    这篇文章主要介绍了JavaScript中new运算符的实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 废话不多说直接进入正题,首先我们需要先知道new运算符到底做了哪些事情,再来模拟它实现这一功能. 1. 建立一个空的Object对象: 2. 把这个空对象用__proto__链接到原型 3. 用apply绑定对象的this指向 4. 返回新的对象 知道了new的具体过程之后,我们就可以来试一下用代码实现这一过程. // 传参 New

  • 用Newtonsoft将json串转为对象的方法(详解)

    首先,将json串转为一个JObject对象: JObject jo = (JObject)JsonConvert.DeserializeObject(CurrentSelectedItemReq); 这个JObject是一个"值对"类型,比如说我们的json串是这样: { "rows":[ [ {"NumIid":"001"}, {"PicUrl":"xxx.png"}, {"

  • JavaScript new对象的四个过程实例浅析

    本文实例讲述了JavaScript new对象的四个过程.分享给大家供大家参考,具体如下: new对象: function Person(name, age) { this.name = name; this.age = age; } var person = new Person("Alice", 23); new一个对象的四个过程: 1.创建一个空对象 var obj = new Object(); 2.让Person中的this指向obj,并执行Person的函数体 var re

  • js中new一个对象的过程

    使用new关键字调用函数(new ClassA(-))的具体步骤: 1. 创建空对象{} 2. 使用新对象,调用函数,函数中的this被指向新实例对象:          {}.构造函数();          3. 设置新对象的constructor属性为构造函数的名称,设置新对象的__proto__属性指向构造函数的prototype对象 4. 将初始化完毕的新对象地址,保存到等号左边的变量中 注意:若构造函数中没有返回值或返回值是基本类型(Number.String.Boolean)的值,

  • JS中使用new Option()实现时间联动效果

    1.基础准备: 先来了解下,如何运用js实现select动态添加option. //1.动态创建select function createSelect(){ var mySelect = document.createElement("select"); mySelect.id = "mySelect"; document.body.appendChild(mySelect); } //2.添加选项option function addOption(){ //根据

  • 详解Javascript中new()到底做了些什么？

    详解Javascript中new()到底做了些什么？

    前言 和其他高级语言一样 javascript 中也有 new 运算符,我们知道 new 运算符是用来实例化一个类,从而在内存中分配一个实例对象. 但在 javascript 中,万物皆对象,为什么还要通过 new 来产生对象? 本文将带你一起来探索 javascript 中 new 的奥秘... 要创建 Person 的新实例,必须使用 new 操作符. 以这种方式调用构造函数实际上会经历以下 4个步骤: (1) 创建一个新对象: (2) 将构造函数的作用域赋给新对象(因此 this 就指向了

  • 原生JS封装_new函数实现new关键字的功能

    一.前言 众所周知:没有对象怎么办?那就new一个! 那么在JS中,当我们new一个对象的时候,这个new关键字内部都干了什么呢? 现在我们就来剖析一下原生JS中new关键字内部的工作原理. 二.原始的new 首先,我们先new一个对象看看: //创建Person构造函数,参数为name,age function Person(name,age){ this.name = name; this.age = age; } //实例化对象小明 xm = new Person('xiaoming',1

  • JS中‘hello’与new String(‘hello’)引出的问题详解

    定义一个字符串 在工作中我们大概有3种方法去定义一个字符串: 1. var str = 'hello'; 2. var str1 = String('hello'); 3. var str2 = new String('hello'); (下文直接会带 以上三个变量....) 这三种方法定义出来的 'hello',都有自己的属性 例如lengh,有自己的方法例如: indexOf(),在日常工作定义中也没有感觉到任何的不同. 那是否深入过, 1.这三种方式定义出来的'hello',是否是一样的呢

  • JS中call/apply、arguments、undefined/null方法详解

    JS中call/apply、arguments、undefined/null方法详解

    a.call和apply方法详解 -------------------------------------------------------------------------------- call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call 方法可以用来代替另一个对象调用一个方法.call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指

  • JS中队列和双端队列实现及应用详解

    JS中队列和双端队列实现及应用详解

    队列 队列 双端队列数据结构 应用 用击鼓传花游戏模拟循环队列 用双端对列检查一个词是否构成回文 生成 1 到 n 的二进制数 队列和双端队列 队列遵循先进后出(FIFO, 也称为先来先服务) 原则的. 日常有很多这样场景: 排队购票.银行排队等. 由对列的特性,银行排队为例, 队列应该包含如下基本操作: 加入队列(取号) enqueue 从队列中移除(办理业务离开) dequeue 当前排队号码(呼叫下一个人) peek 当前队列长度(当前排队人数) size 判断队列是不是空 isEmpty

  • JS中script标签defer和async属性的区别详解

    JS中script标签defer和async属性的区别详解

    向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一种直接在script标签之间插入js代码,第二种即是通过src属性引入外部js文件.由于解释器在解析执行js代码期间会阻塞页面其余部分的渲染,对于存在大量js代码的页面来说会导致浏览器出现长时间的空白和延迟,为了避免这个问题,建议把全部的js引用放在</body>标签之前. script标签存在两个属性,defer和async,因此script标签的使用分为三种情况: 1.<script

  • js中使用使用原型(prototype)定义方法的好处详解

    经常在前端面试或是和其他同行沟通是,在谈到构造在JS定义构造函数的方法是最好使用原型的方式:将方法定义到构造方法的prototype上,这样的好处是,通过该构造函数生成的实例所拥有的方法都是指向一个函数的索引,这样可以节省内存. 当然,这种说法没有任何问题,只是在实现上,并非只有使用prototype的方式才能达到这样的效果,我们可以将方法以函数的形式定义在构造函数之外,然后在构造函数中通过this.method = method的方式,这样生成的实例的方法也都通过索引指向一个函数,具体如下:

  • JS中数据结构与算法---排序算法(Sort Algorithm)实例详解

    排序算法的介绍 排序也称排序算法 (Sort Algorithm),排序是将 一组数据 , 依指定的顺序 进行 排列的过程 . 排序的分类 1)  内部排序 : 指将需要处理的所有数据都加载 到 内部存储器(内存) 中进行排序. 2) 外部排序法: 数据量过大,无法全部加载到内 存中,需要借助 外部存储(文件等) 进行 排序. 常见的排序算法分类 算法的时间复杂度 度量一个程序(算法)执行时间的两种方法 1.事后统计的方法 这种方法可行, 但是有两个问题:一是要想对设计的算法的运行性能进行评测,

  • C#中的char、string和StringBuilder的使用详解

    char 字符 char代表一个Unicode字符,它是System.Char的别名 char someChar = 'a';//定义了一个字符 char newLine= '\n';//这是一个换行符 System.Char定义了一组静态方法: ToUpper 将指定的字符转换为等效的大写形式 ToLower 将指定的字符转换为等效的小写形式 IsWhiteSpace 判断指定的字符是否为空白字符 -- 例子: Console.WriteLine(char.ToUpper('c'));//输出

  • JS中的算法与数据结构之栈(Stack)实例详解

    JS中的算法与数据结构之栈(Stack)实例详解

    本文实例讲述了JS中的算法与数据结构之栈(Stack).分享给大家供大家参考,具体如下: 栈(Stack) 上一篇我们说到了列表,它是一种最自然的数据组织方式,如果对数据的存储顺序要求不重要,那么列表就是一种非常适合的数据结构,但对于计算机其他的一些应用(比如后缀表达式),那么列表就显得有些无能为力, 所以,我们需要一种和列表功能相似但更复杂的数据结构. 栈,又叫堆栈,是和列表类似的一种数据结构,但是却更高效,因为栈内的元素只能通过列表的一端访问,称为栈顶,数据只能在栈顶添加或删除,遵循 先入后

  • JS中DOM元素的attribute与property属性示例详解

    JS中DOM元素的attribute与property属性示例详解

    一.'表亲戚':attribute和property 为什么称attribute和property为'表亲戚'呢?因为他们既有共同处,也有不同点. attribute 是 dom 元素在文档中作为 html 标签拥有的属性: property 是 dom 元素在 js 中作为对象拥有的属性. 从定义上可以看出: 对于 html 的标准属性来说,attribute 和 property 是同步的,是会自动更新的 但是对于自定义的属性来说,他们是不同步的.(自定义属性不会自动添加到property)

  • 如何让js中的if判断如丝般顺滑详解

    目录 前言 代码实现 思路一 思路二 总结 参考文档 前言 项目中的一个小需求点,点击按钮,验证几十个条件框,判断所有条件框是否填写(选择)过数据(至少有一个条件判断为真)再执行对应操作 判断的条件框包含 Radio 单选框,Checkbox 多选框,Input 输入框,InputNumber 计数器, Select 选择器, Switch 开关等 项目使用的 Element 组件库  V2.15.6 不同条件对应的数据类型以及默认值 Radio 单选框  string  '' Checkbox

随机推荐