首頁 > web前端 > js教程 > JavaScript怎麼實作基礎型別和物件一樣有屬性和方法

JavaScript怎麼實作基礎型別和物件一樣有屬性和方法

WBOY
發布: 2022-05-19 12:03:40
轉載
1751 人瀏覽過

本篇文章為大家帶來了關於javascript的相關知識,其中主要介紹了關於基礎類型和物件一樣有屬性和方法的相關問題,包括了基礎類型當做物件使用以及基礎類型構造函數等等,下面一起來看一下,希望對大家有幫助。

JavaScript怎麼實作基礎型別和物件一樣有屬性和方法

【相關推薦:javascript影片教學web前端

基礎類型的「屬性方法」

本文將探究一個極為有趣的概念,即基礎型別的屬性方法。怎麼樣,是不是有點懵?且聽我慢慢道來~

前言

在其他物件導向的程式語言中,例如JavaC ,屬性是對象的獨有概念,基礎類型就是基礎類型,是不存在屬性方法概念的。

沒錯,又是JavaScript的鑷主意,其引擎允許我們像操作物件一樣使用屬性方法操作基礎類型的資料。

在講解這個奇怪的特性之前,我們要先明確基礎類型和物件類型之間的差異是什麼?

  1. 何為基礎型別
    • JavaScript基礎型別中的中一種值;
    • JavaScript#中存在7種基礎類型,分別是:StringNumberBooleanBigIntSymbol nullundefined;
  2. #何為物件類型
    • 一個封包,使用 { }創建,能儲存多個值;
    • JavaScript還有其他類型的對象,例如函數;

#物件導向中會涉及,引入物件的一個關鍵特性是封裝,它可以把各種亂七八糟的資料、方法統一的儲存在一個物件中,從而降低使用的複雜性。

例如:<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">let user = {     name : &quot;xiaoming&quot;,     hello() {         console.log(`你好,我是${this.name}`);     }}user.hello();</pre><div class="contentsignin">登入後複製</div></div>我們把物件user的屬性和方法封裝變成一個對象,這樣在使用的時候就非常簡單,我們只需要使用

obj.attr

的方式就能呼叫方法或屬性。

但是,這麼做是由額外的開銷的(物件導向有額外的開銷),這也是物件導向的語言C 比起

C

慢的地方。

    基礎類型當作物件使用
  1. 面臨的問題
  2. #基礎類型作為物件使用存在兩個難以調和的問題:

我們希望對基礎類型的操作可以像使用物件一樣,例如"abc".toUpperCase()

物件有額外開銷,我們又希望保持基礎類型的簡單、高效特性;

  1. 解決的方法
  2. #JavaScript解決上述問題的方式相當的「和稀泥」:基礎類型就是基礎類型,提供獨立的、單一的值;允許存取
  3. String
  4. Number

Boolean

Symbol類型的方法和屬性;

為了保證理論的完整,在使用基礎類型的方法和屬性時,先將其包裝成對象,隨後在銷毀;

以上規則的意思是,基礎類型仍然是基礎類型,但是呢,如果我們想存取基礎類型的方法和屬性,就會把基礎類型包裝成物件(物件包裝器),等訪問完了再銷毀。講真,聽起來多少有點扯。

JavaScript怎麼實作基礎型別和物件一樣有屬性和方法背後的事件

舉例:
    let name = "Trump";console.log(name.toUpperCase());//访问基础类型的方法
    登入後複製
  1. 以上程式碼的執行結果如下:
  2. 看起好像也沒什麼大問題,但是,其中發生了很多事情,我們需要知道以下幾點:
  3. #name
  4. 是字串基礎類型,它本身沒啥特別的地方;在存取name屬性方法的時候,創建了一個包含字串值的特殊對象,這個物件有
  5. toUpperCase
  6. 方法;
呼叫特殊物件的方法

toUpperCase

傳回一個

JavaScript怎麼實作基礎型別和物件一樣有屬性和方法的字串;

特殊物件用完即銷毀;

變數本身的值並沒有改變,如下:###############妥協的結果######雖然解決方法充滿了妥協(鑷主意),但是,結果還是好的,達成的成就如下:###
  1. 基础类型保持了本身的简单、高效;
  2. 基础类型通过特殊对象拥有了属性和方法;
  3. 保持了理论的完整,即只有对象才有属性和方法;

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

常用方法举例

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

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

String

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

    console.log("abc".length);
    登入後複製

    以上代码结果如下:

    JavaScript怎麼實作基礎型別和物件一樣有屬性和方法

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

    console.log("abc".indexOf('b'));console.log("abc".indexOf('d'));
    登入後複製

    代码执行结果如下:

    JavaScript怎麼實作基礎型別和物件一樣有屬性和方法

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

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

    let str1 = "hello ";let str2 = "world!";console.log(str1.concat(str2));console.log(str1);console.log(str2);
    登入後複製

    代码执行结果如下:

    JavaScript怎麼實作基礎型別和物件一樣有屬性和方法

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

    let str = "javascript";console.log(str.replace('java','996'));console.log(str);
    登入後複製

    代码执行结果如下:

    JavaScript怎麼實作基礎型別和物件一樣有屬性和方法

Number

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

    console.log(9.3333333.toFixed(3));console.log(9.3333333.toFixed(0));
    登入後複製

    代码执行结果如下:

    JavaScript怎麼實作基礎型別和物件一樣有屬性和方法

  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怎麼實作基礎型別和物件一樣有屬性和方法

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

    console.log(3.1415926.toExponential());console.log(3.1415926.toExponential(2));console.log(3.1415926.toExponential(3));
    登入後複製

    代码执行结果如下:

    JavaScript怎麼實作基礎型別和物件一樣有屬性和方法

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

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

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

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

let num = new Number(0);console.log(typeof num);console.log(typeof 0);
登入後複製

代码执行结果如下:

JavaScript怎麼實作基礎型別和物件一樣有屬性和方法

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

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

代码执行结果如下:

JavaScript怎麼實作基礎型別和物件一樣有屬性和方法

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

例如:

console.log(typeof Number('123'));
登入後複製

注意:

nullundefined两种类型没有任何方法

本文小节

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

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

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

以上是JavaScript怎麼實作基礎型別和物件一樣有屬性和方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:csdn.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板