[對象轉原始類型總結] ('' + obj) === `${obj}`? 不一

happyhuangjinjin 發(fā)布于2019-08-23 15:14 / 3130人閱讀

摘要：一個小測試試試結論當操作需要一個字符串時當操作需要一個數(shù)字時當運算符不確定時如果存在就直接調用如果是先調用沒有再調用如果是先調用沒有再調用如果是按照處理其它按照處理如果或者返回的不是原始類型則忽略該調用轉向下一個調用如果沒有下一個調用則報

一個小測試, 試試:

let o = {
  valueOf() {
    return 0;
  },
};
console.log(+o); // 0
console.log(1 + o); // 1
console.log(1 - o); // 1
console.log("" + o); // "0"
console.log(`${o}`); // "[object Object]"

結論

當操作需要一個字符串時, hint=string, 當操作需要一個數(shù)字時, hint=number, 當運算符不確定時hint=default.

如果存在 obj[Symbol.toPrimitive](hint), 就直接調用

如果 hint 是 string, 先調用 obj.toString(), 沒有再調用 obj.valueOf()

如果 hint 是 number, 先調用 obj.valueOf(), 沒有再調用obj.toString()

如果 hint 是 default, Date 按照 hint=string處理, 其它按照 hint=number 處理

如果 toString 或者 valueOf 返回的不是原始類型, 則忽略該調用, 轉向下一個調用, 如果沒有下一個調用, 則報錯, 但是 toPrimitive 必須返回原始類型, 否則報錯

詳解根據(jù)上下文, 會有以下轉換 hint string

當操作需要一個字符串時, 對象轉換的 hint 為 string.

// alert(參數(shù)是字符串)
alert(obj);
confirm(obj);

// 對象的屬性是字符串
anotherObj[obj] = 123;

number

當操作需要一個數(shù)字時, 對象轉換的 hint 為 number.

// 明確轉換成數(shù)字
Number(obj);
// 轉換成數(shù)字(非加法)
+obj;
// 數(shù)學運算(加法除外)
1 - obj;
1 * obj;
1 / obj;

因為歷史原因大小比較的 hint 也是 number

// hint 為 number
obj1 > obj2;

default

當運算符不確定時, 對象轉換的 hint 為 default.

// 比如加法, 可以是數(shù)字相加, 也可以是字符串相加
1 + obj;
"1" + obj;

// == 弱相等比較
// obj == string/number/symbol
obj == "1";
obj == 1;

通常, 內(nèi)置對象(除了 Date 外), default 轉換和 number 轉換是相同的
Date 的 default 轉換和 string 相同 [Date.prototype[@@toPrimitive]](https://developer.mozilla.org...

轉換步驟

如果存在 obj[Symbol.toPrimitive](hint), 就直接調用

如果 hint 是 string, 先調用 obj.toString(), 沒有再調用 obj.valueOf()

如果 hint 是 number, 先抵用 obj.valueOf(), 沒有再調用obj.toString()

example Symbol.toPrimitive

type primitiveType = null | undefined | number | boolean | string | symbol;
type hintType = "string" | "number" | "default";

obj[Symbol.toPrimitive] = function(hint: hintType): primitiveType {
  console.log(`hint is: ${hint}`);

  return hint == "string" ? "一個字符串" : 0;
};

toString / valueOf

let user = {
  name: "John",
  money: 1000,

  // for hint="string"
  toString(): string {
    return `{name: "${this.name}"}`;
  },

  // for hint="number" or "default"
  valueOf(): number {
    return this.money;
  },
};

alert(user); // toString -> {name: "John"}
alert(+user); // valueOf -> 1000
alert(user + 500); // valueOf -> 1500

let obj = {
  toString() {
    return "2";
  },
};

// 加法, 調用 `default` hint, `default` 和 `number` 轉換相同,
// 先調用 valueOf 方法, 因為不存在, 所以調用 toString 方法, 返回 "2"
// "2" + 2 = "22"
alert(obj + 2); // "22"

// 存在 valueOf, 所以 2+2 = 4
let obj = {
  toString() {
    return "2";
  },
  valueOf() {
    return 2;
  },
};

alert(obj + 2); // 4

let d = new Date();
let d2 = d.getTime() - 1;

// 加法, 調用 `default` hint, Date 的 `default` 和 `string` 相同
alert(1 + d); // 1Fri Feb 15 2019 20:59:00 GMT+0800 (China Standard Time)

// 減法, 調用 `number` hint
alert(d - d2); // 1

參考文檔

https://javascript.info/object-toprimitive

[Date.prototype[@@toPrimitive]](https://developer.mozilla.org...

文章若有紕漏請大家補充指正,謝謝~~  
http://blog.xinshangshangxin.com SHANG 殤

云服務器 GPU云服務器 objs obj xcode obje 讀取obj

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/101730.html

&#039;{ }&#039;在不同上下文中的作用

摘要：大括號的作用，在不同的上下文中差別很大以下觀點若有錯誤，請前輩及時指出一被當做對象字面量如，外層的被賦值給了，這里的被當做對象處理。本文參考你不知道的大括號‘{ }’的作用，在不同的上下文中差別很大！以下觀點若有錯誤，請前輩及時指出！一、{ }被當做對象字面量如：var obj = { foo: function(){} };，外層的{...}被賦值給了obj，這里的{...}被...

Reducto 2019-08-20 11:27 評論0 收藏0
《You Don&#039;t Know JS》閱讀理解——this

摘要：運行規(guī)則根據(jù)的運作原理，我們可以看到，的值和調用棧通過哪些函數(shù)的調用運行到調用當前函數(shù)的過程以及如何被調用有關。 1. this的誕生假設我們有一個speak函數(shù)，通過this的運行機制，當使用不同的方法調用它時，我們可以靈活的輸出不同的name。 var me = {name: me}; function speak() { console.log(this.name); }...

tianren124 2019-08-20 14:50 評論0 收藏0
<<編寫可維護的javascript>> 筆記8(避免&#039;空比較&#

摘要：中常常會看到這種代碼變量與的比較這種用法很有問題用來判斷變量是否被賦予了一個合理的值比如不好的寫法執(zhí)行一些邏輯這段代碼中方法顯然是希望是一個數(shù)組因為我們看到的擁有和這段代碼的意圖非常明顯如果參數(shù)不是一個數(shù)組則停止接下來的操作這種寫法的問題在 js中, 常常會看到這種代碼: 變量與null的比較(這種用法很有問題), 用來判斷變量是否被賦予了一個合理的值. 比如: const Contr...

young.li 2019-08-21 18:40 評論0 收藏0
( 第二篇 )仿寫&#039;Vue生態(tài)&#039;系列___&#039;模板小故事.&#039;

摘要：第二篇仿寫生態(tài)系列模板小故事本次任務承上完成第一篇未完成的熱更新配置核心完成模板解析模塊的相關編寫很多文章對模板的解析闡述的都太淺了本次我們一起來深入討論一下盡可能多的識別用戶的語句啟下在結構上為雙向綁定等模塊的編寫打基礎最終效果圖一模板頁 ( 第二篇 )仿寫Vue生態(tài)系列___模板小故事. 本次任務承上: 完成第一篇未完成的熱更新配置. 核心: 完成模板解析模塊的相關編寫, ...

wangtdgoodluck 2019-08-26 14:06 評論0 收藏0
( 第二篇 )仿寫&#039;Vue生態(tài)&#039;系列___&#039;模板小故事.&#039;

摘要：第二篇仿寫生態(tài)系列模板小故事本次任務承上完成第一篇未完成的熱更新配置核心完成模板解析模塊的相關編寫很多文章對模板的解析闡述的都太淺了本次我們一起來深入討論一下盡可能多的識別用戶的語句啟下在結構上為雙向綁定等模塊的編寫打基礎最終效果圖一模板頁 ( 第二篇 )仿寫Vue生態(tài)系列___模板小故事. 本次任務承上: 完成第一篇未完成的熱更新配置. 核心: 完成模板解析模塊的相關編寫, ...

ivydom 2019-08-30 15:44 評論0 收藏0