摘要：今天聊一下這個(gè)前端面試高頻問(wèn)題，由此引出這些。下面我們先詳細(xì)的聊一下，完了解決下面試官的問(wèn)題。數(shù)組之所以為是因?yàn)樯线呎f(shuō)了和其實(shí)就是想說(shuō)這兩個(gè)對(duì)于深度的實(shí)現(xiàn)來(lái)說(shuō)不夠嚴(yán)謹(jǐn)要不就是多層判斷。

今天聊一下clone這個(gè)前端面試高頻問(wèn)題，由此引出typeof、instanceof、Object.prototype.toString這些javascript Api。

下面我們先詳細(xì)的聊一下，完了解決下面試官的問(wèn)題。

typeof能獲取一個(gè)變量或表達(dá)式的類(lèi)型。

原始類(lèi)型

Boolean

Null

Undefined

String

Symbol

Number

Symbol

和?引用類(lèi)型 Object，F(xiàn)unction

下面看一些栗子

        //基礎(chǔ)類(lèi)型也可以說(shuō)非引用類(lèi)型
        let str = "hello word!"
        console.log(typeof str) //string
        let num = 12
        console.log(typeof num) //number
        let udf = undefined
        console.log(typeof udf) //undefined
        let bl = true
        console.log(typeof bl) //boolean
        let nl = null
        console.log(nl) //null
        let sl = Symbol()
        console.log(typeof sl) //symbol

        //復(fù)合類(lèi)型也可以說(shuō)是引用類(lèi)型，
        let obj = {
            a: 1
        }
        console.log(typeof obj) //object
        let arr = [1, 2, 3]
        console.log(typeof arr) //object

        //函數(shù)也屬于引用類(lèi)型，不過(guò)typeof卻能準(zhǔn)確的返回類(lèi)型
        function fn() {}
        console.log(typeof fn) //function

從以上的執(zhí)行結(jié)果可以看出，typeof不能夠準(zhǔn)確分返回所有類(lèi)型

我們從instenceof的實(shí)現(xiàn)來(lái)了解下instenceof是干什么的

        // 模擬instenceof實(shí)現(xiàn)
        // 1、instenceof接收兩個(gè)參數(shù)
        // 2、返回true或false

        function myInstenceof(X, Y) {
            let L = X._proto_
            let R = Y.prototype
            if (L !== R) {
                return false
            }
            return true
        }

        // test
        function Fn() {

        }
        let newFn = new Fn()
        console.log(newFn)
        console.log(new Fn())


        console.log(myInstenceof(newFn, new Fn())) //true
        console.log(myInstenceof([], new Array())) //true
        console.log(myInstenceof([], new Object())) //true

以上demo我們就能看出，instenceof也不夠靠譜，模擬實(shí)現(xiàn)就是判斷X的原型知否在Y的原型鏈上。
數(shù)組之所以instenceof Object為true是因?yàn)?[].prototype->new Array->new Object->null

上邊說(shuō)了typeof和instenceof其實(shí)就是想說(shuō)這兩個(gè)對(duì)于深度clone的實(shí)現(xiàn)來(lái)說(shuō)不夠嚴(yán)謹(jǐn)要不就是多層判斷。

接下里我們說(shuō)個(gè)靠譜的

        Object.prototype.toString.call(""); // [object String]
        Object.prototype.toString.call(1); // [object Number]
        Object.prototype.toString.call(true); // [object Boolean]
        Object.prototype.toString.call(undefined); // [object Undefined]
        Object.prototype.toString.call(null); // [object Null]
        Object.prototype.toString.call(new Function()); // [object Function]
        Object.prototype.toString.call(new Date()); // [object Date]
        Object.prototype.toString.call([]); // [object Array]
        Object.prototype.toString.call(new RegExp()); // [object RegExp]
        Object.prototype.toString.call(new Error()); // [object Error]
        Object.prototype.toString.call(document); // [object HTMLDocument]
        Object.prototype.toString.call(window); //[object Window]

靠譜！

接下來(lái)我們就用Object.prototype.toString.call()來(lái)解答一下面試題

      function clone(obj, o) {
            //Object.prototype.toString.call(obj)返回類(lèi)似[Object Array] 利用slice來(lái)截取我們需要的字符串
            let type = Object.prototype.toString.call(obj).slice(8, -1)
                // 如果是Object
            if (type === "Object") {
                o = {}
                for (let k in obj) {
                    o[k] = clone(obj[k]);
                }
                // 如果是對(duì)象
            } else if (type === "Array") {
                o = []
                for (let i = 0; i < obj.length; i++) {
                    o.push(clone(obj[i]));
                }
            } else {
                // 非引用類(lèi)型
                o = obj
            }
            return o
        }

        let obj1 = {
            a: [1, 2, 3, 4, 5, 6],
            b: {
                c: 2
            },
            d: 1,
            f: function() {
                return 1
            }
        }
        let obj2 = clone(obj1)
        obj2.f = function() {
            return 2
        }
        obj2.a = 1
        console.log(obj1)
        console.log(obj2)

測(cè)試打印結(jié)果，obj2的改變不會(huì)影響到obj1。

歡迎吐槽！