让前端口试不在难(深度克隆 clone)

本日聊一下clone这个前端口试高频题目,由此引出typeof、instanceof、Object.prototype.toString这些javascript Api。

下面我们先细致的聊一下,完了处理下口试官的题目。

typeof

typeof能猎取一个变量或表达式的范例。

  • 原始范例

    • Boolean
    • Null
    • Undefined
    • String
    • Symbol
    • Number
    • Symbol
  • 和 援用范例 Object,Function

下面看一些栗子

        //基本范例也能够说非援用范例
        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

        //复合范例也能够说是援用范例,
        let obj = {
            a: 1
        }
        console.log(typeof obj) //object
        let arr = [1, 2, 3]
        console.log(typeof arr) //object

        //函数也属于援用范例,不过typeof却能正确的返回范例
        function fn() {}
        console.log(typeof fn) //function

从以上的实行效果能够看出,typeof不能够正确分返回一切范例

instenceof

我们从instenceof的完成来了解下instenceof是干什么的

        // 模仿instenceof完成
        // 1、instenceof吸收两个参数
        // 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也不够靠谱,模仿完成就是推断X的原型知否在Y的原型链上。
数组之所以instenceof Object为true是因为 [].prototype->new Array->new Object->null

上边说了typeof和instenceof实在就是想说这两个关于深度clone的完成来讲不够严谨要不就是多层推断。

Object.prototype.toString.call()

接下里我们说个靠谱的

        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]

靠谱!

接下来我们就用Object.prototype.toString.call()来解答一下口试题

      function clone(obj, o) {
            //Object.prototype.toString.call(obj)返回相似[Object Array] 应用slice来截取我们须要的字符串
            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]);
                }
                // 如果是对象
            } else if (type === 'Array') {
                o = []
                for (let i = 0; i < obj.length; i++) {
                    o.push(clone(obj[i]));
                }
            } else {
                // 非援用范例
                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)

测试打印效果,obj2的转变不会影响到obj1。
《让前端口试不在难(深度克隆 clone)》

迎接吐槽!

    原文作者:我是一个前端
    原文地址: https://segmentfault.com/a/1190000018052919
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞