JavaScript如何实现基础类型、对象一样有属性和方法

这篇文章主要介绍“JavaScript如何实现基础类型、对象一样有属性和方法”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JavaScript如何实现基础类型、对象一样有属性和方法”文章能帮助大家解决问题。

JavaScript如何实现基础类型、对象一样有属性和方法  javascript 第1张

基础类型的“属性方法”

前言

在其他面向对象的编程语言中,例如JavaC++,属性是对象的独有概念,基础类型就是基础类型,是不存在属性方法概念的。

没错,又是JavaScript的馊主意,其引擎允许我们像操作对象一样使用属性方法操作基础类型的数据。

在讲解这个奇怪的特性之前,我们要先明确基础类型和对象类型之间的差别是什么?

  1. 何为基础类型

  • JavaScript基础类型中的中一种值;

  • JavaScript中存在7种基础类型,分别是:StringNumberBooleanBigIntSymbolnullundefined

  • 何为对象类型

    • 一个数据包,使用{ }创建,能存储多个值;

    • JavaScript还有其他类型的对象,例如函数;

    面向对象中会涉及,引入对象的一个关键特性是封装,它可以把各种乱七八糟的数据、方法统一的存储在一个对象中,从而降低使用的复杂性。

    例如:

    let user = {
        name : "xiaoming",
        hello() {
            console.log(`你好,我是${this.name}`);
        }}user.hello();

    我们把对象user的属性和方法封装成了一个对象,这样在使用的时候就非常简单,我们只需要使用obj.attr的方式就能调用方法或者属性。

    但是,这么做是由额外的开销的(面向对象有额外的开销),这也是面向对象的语言C++相比于C慢的地方。

    基础类型当作对象使用

    面临的问题

    基础类型作为对象使用存在两个难以调和的问题:

    1. 我们希望对基础类型的操作可以像使用对象一样,例如"abc".toUpperCase()

    2. 对象有额外开销,我们又希望保持基础类型的简单、高效特性;

    解决的方法

    JavaScript解决以上问题的方式相当的“和稀泥”:

    1. 基础类型就是基础类型,提供独立的、单个的值;

    2. 允许访问StringNumberBooleanSymbol类型的方法和属性;

    3. 为了保证理论的完整,在使用基础类型的方法和属性时,先将其包装成对象,随后在销毁;

    以上规则的意思是,基础类型仍然是基础类型,但是呢,如果我们想访问基础类型的方法和属性,就会把基础类型包装成对象(对象包装器),等访问完了再销毁。讲真,听起来多少有点扯。

    背后的事件

    举个例子:

    let name = "Trump";console.log(name.toUpperCase());//访问基础类型的方法

    以上代码的执行结果如下:

    JavaScript如何实现基础类型、对象一样有属性和方法  javascript 第2张

    看起好像也没什么大问题,但是,其中发生了很多事情,我们需要知道以下几点:

    1. name是个字符串基础类型,它本身没啥特别的地方;

    2. 在访问name属性方法的时候,创建了一个包含字符串值的特殊对象,这个对象有toUpperCase方法;

    3. 调用特殊对象的方法toUpperCase返回一个的字符串;

    4. 特殊对象用完即销毁;

    变量本身的值并没有发生改变,如下:

    JavaScript如何实现基础类型、对象一样有属性和方法  javascript 第3张

    妥协的结果

    虽然解决方法充满了妥协(馊主意),但是,结果还是好的,达成的成就如下:

    1. 基础类型保持了本身的简单、高效;

    2. 基础类型通过特殊对象拥有了属性和方法;

    3. 保持了理论的完整,即只有对象才有属性和方法;

    理论上虽然如此,但实际上JavaScript引擎高度优化了这个过程,我怀疑它根本就没有创建额外的对象。只是在口头上表示自己遵循了规范,好像真的搞了个临时对象一样。

    常用方法举例

    本文只是简单的介绍基础类型方法的概念,并不对各种方法进行讲解,伴随着教程不断深入,会逐步涉及大量的方法。这里只简单的列举基础类型常用的一些方法和属性。

    不同的基础类型,拥有不同的属性方法,以下分类列举:

    String

    1. length属性,返回字符串长度

      console.log("abc".length);

      以上代码结果如下:

      JavaScript如何实现基础类型、对象一样有属性和方法  javascript 第4张

    2. indexOf(ch)方法,返回字符串中第一个字符ch的下标

      console.log("abc".indexOf('b'));console.log("abc".indexOf('d'));

      代码执行结果如下:

      JavaScript如何实现基础类型、对象一样有属性和方法  javascript 第5张

      当字符存在于字符串返回下标(从0开始计),如果找不到就返回-1

    3. concat(str)方法,拼接两个字符串

      let str1 = "hello ";let str2 = "world!";console.log(str1.concat(str2));console.log(str1);console.log(str2);

      代码执行结果如下:

      JavaScript如何实现基础类型、对象一样有属性和方法  javascript 第6张

    4. replace(str1,str2)方法,使用str2替换str1

      let str = "javascript";console.log(str.replace('java','996'));console.log(str);

      代码执行结果如下:

      JavaScript如何实现基础类型、对象一样有属性和方法  javascript 第7张

    Number

    1. toFixed(num)方法,四舍五入小数到指定精度

      console.log(9.3333333.toFixed(3));console.log(9.3333333.toFixed(0));

      代码执行结果如下:

      JavaScript如何实现基础类型、对象一样有属性和方法  javascript 第8张

    2. toString()方法,转数字为字符串

      3.14.toString();//转为'3.14'console.log((8).toString(2));//转为二进制'1000'console.log((9).toString(2));//转为二进制'1001'console.log((996).toString(16));//转为16进制字符串'3e4'

      代码执行结果如下:

      JavaScript如何实现基础类型、对象一样有属性和方法  javascript 第9张

    3. toExponential()方法,转为指数计数法

      console.log(3.1415926.toExponential());console.log(3.1415926.toExponential(2));console.log(3.1415926.toExponential(3));

      代码执行结果如下:

      JavaScript如何实现基础类型、对象一样有属性和方法  javascript 第10张

    后继章节会展示更多的方法,这里就不过的赘述。

    基础类型构造函数(不推荐使用的特性)

    Java一样,JavaScript可以通过new操作符,显式的为基础类型创建“对象包装器”,这种做法是极其不推荐的,这里提出,仅为了知识的完整性。

    这种做法存在问题,举例如下:

    let num = new Number(0);console.log(typeof num);console.log(typeof 0);

    代码执行结果如下:

    亦或者,在判断中会出现混淆:

    let zero = new Number(0);if (zero) { // zero 为 true,因为它是一个对象
      console.log('true');}

    代码执行结果如下:

    JavaScript如何实现基础类型、对象一样有属性和方法  javascript 第11张

    同时,大家不要忘了,不带 new(关键字)的 String/Number/Boolean 函数可以将一个值转换为相应的类型:转成字符串、数字或布尔值(原始类型)。

    例如:

    console.log(typeof Number('123'));

    注意:

    nullundefined两种类型没有任何方法

    关于“JavaScript如何实现基础类型、对象一样有属性和方法”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注蜗牛博客行业资讯频道,小编每天都会为大家更新不同的知识点。

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:niceseo99@gmail.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    评论

    有免费节点资源,我们会通知你!加入纸飞机订阅群

    ×
    天气预报查看日历分享网页手机扫码留言评论Telegram