Web前端开发笔记之JS提升07——类、对象拷贝

本文介绍了ES6中的类和继承的概念，通过示例展示了如何创建类和使用继承，指出这种方式比传统的构造函数更便捷。同时，讨论了对象拷贝的两种方式——浅拷贝和深拷贝，详细解释了它们的区别，并提供了实现深拷贝的递归方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

类：

其存在于ES6中的关键字，其就是构造函数和属性的封装。这对于学习过其它编程语言的朋友很友好且容易接受。下面看看用法：

<script>
    console.log("只支持EScript6")
	class Person {
		//静态成员,必须要使用构造函数来访问
		static name='polaris'
		static age=18

		static eat(){
            console.log('eating')
		}
        static drink(){
            console.log('drinking')
        }
		//实例成员
		uname='XXX'
		uage=20
		swim(){
            console.log('swimming')
		}
    }
    class Chinese extends Person{
        skin='Yellow'
    }
    let p1=new Person()
    console.log(new Person())
    console.log(p1.__proto__)
    let c1=new Chinese()
    console.log(c1)
    console.log(Chinese.age)
    console.log(c1.age)

上面我创建了一个Person类和一个Chinese类，中间使用了继承关系，而在前面的章节中我们用到继承时，是需要创建构造函数来用于继承的。这里明显方便许多。

不过，我需要提醒的是，这只在于使用ES6中可行。

类的构造函数：

使用constructor来初始化类中数据。

另外如果父类和子类同时拥有自己的构造函数，需要在子类使用super来调用父类的构造函数：

对象拷贝：

浅拷贝：

当然我们可以使用遍历的方法来浅拷贝。但是浅拷贝不能拷贝对象中的复杂数据类型。所以浅拷贝只是对表层数据实现了拷贝，而内部复杂数据依旧时地址找值。

    //这里我推荐使用Object.assign(new,old)来做浅拷贝
    s2={}
    Object.assign(s2,testObj)
    // console.log(testObj,s2)

    // 浅拷贝，当我们改变值时复杂数据会一起变动，不可取
    testObj.obj.a.a.a=22
    console.log(testObj,s2)

深拷贝：

    //那么我们只需要修改一下逻辑就可以实现深拷贝
    function deepCopy(obj,newObj) {
        //浅拷贝
        for (let objKey in obj) {
            if (obj[objKey] instanceof Array){
                newObj[objKey]=[]
                deepCopy(obj[objKey],newObj[objKey])
            }else if(obj[objKey] instanceof Object){
                newObj[objKey]={}
                deepCopy(obj[objKey],newObj[objKey])
            }else{
                newObj[objKey]=obj[objKey]
            }

        }
    }
    s2={}
    deepCopy(testObj,s2)

    // 深拷贝可以让数据完全自定化
    testObj.obj.a.a.a=22
    console.log(testObj,s2)

其中深拷贝用到了递归思想，大家可以自己尝试编写一下。