ES6新特性-class、深浅拷贝

一、ES6新语法-class

JavaScript 语言的传统方法是通过构造函数定义并生成新对象。ES6中引入了class的概念，通过class关键字自定义类。实质上是构造函数的语法糖，封装后有了一个更清晰的写法，而且更加像一个面向对象编程语言。

• ES5用法

        function Person(name, age) {
            this.name = name;
            this.age = age;
            this.sayName = function () {
                console.log(this.name)
            }
        }
        Person.prototype.getName = function () {
            console.log(this.name)
        }

        let p1 = new Person('小明', 12);
        console.log(p1.name, p1.age);
        p1.getName();

• ES6新语法-class和extends

 class Person {
            constructor(name, age) {
                this.name = name;
                this.age = age
            }
            // 原型对象
            getName() {
                return this.name
            }
            sayName = () => {
                console.log(this.name)
            }
        }
                //子类Student继承父类Person
        class Student extends Person {
            constructor(name, age) {
                super(name, age) //调用父类的属性和方法
            }
        }
                let s1 = new Student('小花', 23)
        console.log(s1.name, s1.age)
        s1.sayName();

二、浅拷贝和深拷贝

• 浅拷贝：将一个对象的属性和方法复制到另一个对象上, 只复制一层，如果属性是对象，只复制对象的地址。
  • 例子

 // 旧对象
        const oldObj = {
            name: '小明',
            age: 12,
            sex: '男',
            action: {
                run: '跑步',
                watchTv: '看电视'
            }
        }
        // 新对象
        const newObj = {}
        // 将旧对象拷贝到新对象里
        const copy = (oldObj, newObj) => {
            for (const key in oldObj) {
                newObj[key] = oldObj[key]
            }
        }
        copy(oldObj, newObj);
        console.dir(oldObj);
        console.dir(newObj)
//=======================================================
打印结构的内容
Object
    name: "小明"
    age: 12
    sex: "男"
    action: {run: "跑步", watchTv: "看电视"}
    __proto__: Object

Object
    name: "小明"
    age: 12
    sex: "男"
    action: {run: "跑步", watchTv: "看电视"}
    __proto__: Object
//=======================================================//

当我们去改变旧对象的属性时：

   oldObj.action.run = '走路'
//=======================================================
打印结构的内容
Object
    name: "小明"
    age: 14
    sex: "男"
    action: {run: "走路", watchTv: "看电视"}
    __proto__: Object

Object
    name: "小明"
    age: 14
    sex: "男"
    action: {run: "走路", watchTv: "看电视"}
    __proto__: Object
//=======================================================//

可以看到当改变旧对象的属性对象时，新对象的属性对象也会改变。这就是浅拷贝的弊端

• 深拷贝：会克隆出一个对象，数据相同，但是引用地址不同。就是拷贝出来的完完全全就是一个新的对象，不受原对象的影响

         //旧对象
        const oldObj = {
            name: '小明',
            age: 18,
            sex: '男',
            fun: {
                swiming: '游泳',
                lookbook:'看书',
            }
        }

        //新对象
        const newObj = {}

        //拷贝函数
        const copyObj = (oldObj, newObj) => {
            for (key in oldObj) {
                let item = oldObj[key];
                if(item instanceof Object){
                    newObj[key] = {}; //创建一个新空间
                    copyObj(item,newObj[key]);
                }else{
                    newObj[key] = oldObj[key]
                }
            }
        }
        copyObj(oldObj, newObj);
                //分别改变旧对象和新对象的属性
        oldObj.sex = '女';
        oldObj.fun.swiming = '象棋'
        newObj.fun.lookbook = '读书'

        console.dir(oldObj);
        console.dir(newObj);
//=======================================================
打印结构的内容
Object
    name: "小明"
    age: 18
    sex: "女"
    fun: {swiming: "象棋", lookbook: "看书"}
    __proto__: Object
  
Object
    name: "小明"
    age: 18
    sex: "男"
    fun: {swiming: "游泳", lookbook: "读书"}
    __proto__: Object
//=======================================================//

从上述代码可以看到分别改变旧对象的属性对象后对新对象没有影响

图解： 深拷贝