0

0

JavaScript怎么实现基础类型和对象一样有属性和方法

WBOY

WBOY

发布时间:2022-05-19 12:03:40

|

1817人浏览过

|

来源于CSDN

转载

本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了关于基础类型和对象一样有属性和方法的相关问题,包括了基础类型当做对象使用以及基础类型构造函数等等,下面一起来看一下,希望对大家有帮助。

JavaScript怎么实现基础类型和对象一样有属性和方法

【相关推荐:javascript视频教程web前端

基础类型的“属性方法”

本文将探究一个极其有趣的概念,即基础类型的属性方法。怎么样,是不是有点懵?且听我慢慢道来~

前言

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

立即学习Java免费学习笔记(深入)”;

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

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

  1. 何为基础类型
    • JavaScript基础类型中的中一种值;
    • JavaScript中存在7种基础类型,分别是:StringNumberBooleanBigIntSymbolnullundefined
  2. 何为对象类型
    • 一个数据包,使用{ }创建,能存储多个值;
    • 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());//访问基础类型的方法

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

image-20220518174831337

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

  1. name是个字符串基础类型,它本身没啥特别的地方;
  2. 在访问name属性方法的时候,创建了一个包含字符串值的特殊对象,这个对象有toUpperCase方法;
  3. 调用特殊对象的方法toUpperCase返回一个的字符串;
  4. 特殊对象用完即销毁;

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

image-20220518175715100

妥协的结果

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

  1. 基础类型保持了本身的简单、高效;
  2. 基础类型通过特殊对象拥有了属性和方法;
  3. 保持了理论的完整,即只有对象才有属性和方法;

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

常用方法举例

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

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

String

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

    console.log("abc".length);

    以上代码结果如下:

    image-20220518182821468

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

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

    代码执行结果如下:

    image-20220518183157007

    SEEK.ai
    SEEK.ai

    AI驱动的智能数据解决方案,询问您的任何数据并立即获得答案

    下载

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

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

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

    代码执行结果如下:

    image-20220518184633292

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

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

    代码执行结果如下:

    image-20220518185009705

Number

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

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

    代码执行结果如下:

    image-20220518190008577

  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'

    代码执行结果如下:

    image-20220518191131357

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

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

    代码执行结果如下:

    image-20220518191507316

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

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

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

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

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

代码执行结果如下:

image-20220518192554506

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

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

代码执行结果如下:

image-20220518193204576

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

例如:

console.log(typeof Number('123'));
注意:null和undefined两种类型没有任何方法

本文小节

  1. nullundefined 以外的基础类型都提供了许多有用的方法;

  2. 虽然JavaScript使用了妥协的实现方式,但取得了较为满意的结果,以较低的成本实现了基础类型的属性和方法调用;

【相关推荐:javascript视频教程web前端

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

2

2026.01.29

java配置环境变量教程合集
java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

2

2026.01.29

java成品学习网站推荐大全
java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

0

2026.01.29

Java字符串处理使用教程合集
Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

0

2026.01.29

Java空对象相关教程合集
Java空对象相关教程合集

本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

3

2026.01.29

clawdbot ai使用教程 保姆级clawdbot部署安装手册
clawdbot ai使用教程 保姆级clawdbot部署安装手册

Clawdbot是一个“有灵魂”的AI助手,可以帮用户清空收件箱、发送电子邮件、管理日历、办理航班值机等等,并且可以接入用户常用的任何聊天APP,所有的操作均可通过WhatsApp、Telegram等平台完成,用户只需通过对话,就能操控设备自动执行各类任务。

25

2026.01.29

clawdbot龙虾机器人官网入口 clawdbot ai官方网站地址
clawdbot龙虾机器人官网入口 clawdbot ai官方网站地址

clawdbot龙虾机器人官网入口:https://clawd.bot/,clawdbot ai是一个“有灵魂”的AI助手,可以帮用户清空收件箱、发送电子邮件、管理日历、办理航班值机等等,并且可以接入用户常用的任何聊天APP,所有的操作均可通过WhatsApp、Telegram等平台完成,用户只需通过对话,就能操控设备自动执行各类任务。

16

2026.01.29

Golang 网络安全与加密实战
Golang 网络安全与加密实战

本专题系统讲解 Golang 在网络安全与加密技术中的应用,包括对称加密与非对称加密(AES、RSA)、哈希与数字签名、JWT身份认证、SSL/TLS 安全通信、常见网络攻击防范(如SQL注入、XSS、CSRF)及其防护措施。通过实战案例,帮助学习者掌握 如何使用 Go 语言保障网络通信的安全性,保护用户数据与隐私。

8

2026.01.29

俄罗斯Yandex引擎入口
俄罗斯Yandex引擎入口

2026年俄罗斯Yandex搜索引擎最新入口汇总,涵盖免登录、多语言支持、无广告视频播放及本地化服务等核心功能。阅读专题下面的文章了解更多详细内容。

622

2026.01.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.3万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.5万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号