JS笔记3.4--ES6中类/继承/对象的增删改查/对象的遍历/对象的解构赋值/拷贝

类

ES6中使用 class 类名{} 创建一个类

 class Person{
 //在constructor中定义的属性和方法，是实例对象的属性和方法（实例属性和方法）
 // 通过class不能自定义该类的原型对象
            constructor(myName, myAge){
                this.name = myName;
                this.age = myAge;
				this.hi = function () {
                    console.log(this.name + this.age);
                }
            }
//在constructor外定义的方法，是该类的原型对象的方法（静态方法）
            run(){
                console.log("run");
            }        
        }
//不能在constructor外定义属性。如果想定义静态属性，需要在该类的原型中动态定义    
        Person.prototype.sex = 'f';
        console.log(Person.prototype)
        var p = new Person('jiaody',23);
        p.hi()//jiaody23
        //sex: "f"  constructor: class Person run: ƒ run()  __proto__: Object

继承

        class Person{
            constructor(myName, myAge){
                this.name = myName; 
                this.age = myAge; 
            }
            say(){
                console.log(this.name, this.age);
            }
        }
        /* 在ES6中如何继承
        1 在子类后面添加extends并指定父类的名称
        2 在子类的constructor构造函数中通过super方法借助父类的构造函数
        */
        class Student extends Person{
            constructor(myName, myAge, myScore){
                // 1.在子类中通过call/apply方法借助父类的构造函数
                // Person.call(this, myName, myAge);
                super(myName, myAge);
                this.score = myScore;
            }
            study(){
                console.log("day day up");
            }
        }
        let stu = new Student("zs", 18, 98);
        stu.say();//zs 18

对象的增删改查

        class Person{} //定义一个类
        let p = new Person(); //创建该类的实例对象

增加：

       // 1.1属性的增加：
        p.name = "lnj";//1.使用对象.属性名 = 属性值
        p["name"] = "zs"; // 2.使用对象["属性名"] = 属性值
        // 1.2方法的增加：
        p["say"] = function(){
            console.log("hello world");
        } //1.使用对象["方法名"] = function(){ 方法体}
        p.say = function(){
            console.log("hello world");
        } //2.使用对象.方法名 = function(){方法体}

删除：

        // 1.属性的删除 
        delete p.name; // delete 对象.属性名
        delete p["name"]; // delete 对象["属性名"]
        // 2.方法的删除
        delete p.say;  //delete 对象.方法名
        delete p["say"]; // delete 对象["方法名"]

修改：

属性和方法的修改：对象.属性名 ="属性值" 或者 对象["属性名"] = "属性值"
        p.name = "lnj";
        p["name"] = "ww";
        p.say = function(){
            console.log("hi");
        }
        p["say"] = function(){
            console.log("hi");
        }

对象的遍历

ES之前，使用for-in可以遍历到所有的属性和方法（实例对象中的和原型中的）

ES6之前使用for-in 可以取出原型中的属性和方法
    <script>
        function Person(myName,myAge){
            this.name = myName;
            this.age = myAge;
            this.sayHi = function () {
                console.log(this.name + this.age)
            }
        }
        Person.prototype.sex = 'f'
        Person.prototype.sayName = function () {
            console.log(this.name)
        }
        var per = new Person('jiaody',23);
        for(let key in per){ //key是对象中的属性和方法 per是要遍历的对象名
            console.log(key) // name age sayHi sax sayName
            //console.log(per[key]) //输出的是属性值
            //不能使用per.key 这种写法是查找的per对象中的key属性（方法）
        }
    </script>

ES6中使用class创建类，使用for-in不能遍历到原型中的方法

    <script>
        class Person{
            constructor(myName,myAge){
                this.name = myName;
                this.age = myAge;
            }
            say(){ //该方法添加在构造函数的原型中。使用for-in不能遍历到原型中的方法
                console.log(this.name)
            }
        }
        var p = new Person('jiaody',23);
        for(key in p){
            console.log(key)// name age 没有say方法
        }
        console.log(p.__proto__)//{constructor: ƒ, say: ƒ}
    </script>

对象的解构赋值和解构赋值的应用场景

阮一峰：对象的解构赋值

        let obj = {
            name: "lnj",
            age: 34
        }
        function say({name, age}) {
            console.log(name, age);
        }
        say(obj);

深拷贝和浅拷贝

深拷贝：修改新变量的值不会影响原有变量的值。默认情况下，基本数据类型都是深拷贝

    <script>
        let num1 = 123;
        let num2 = num1;
        num2 = 666; // 修改新变量的值
        console.log(num1);//123
        console.log(num2);//666
    </script>

浅拷贝：修改新变量的值会影响原有变量的值。默认情况下，引用类型都是浅拷贝。

    <script>
        // 浅拷贝
        class Person{
            name = "lnj";
            age = 34;
        }
        let p1 = new Person();
        let p2 = p1;//变量p1和p2指向同一块地址。该地址指向Person的实例对象。
        p2.name = "zs"; // 修改变量的值
        console.log(p1.name);//zs
        console.log(p2.name);//zs
    </script>

使用Object.assign对对象进行拷贝

    <script>
        class Person{
            name = "lnj";
            age = 34;
        }
        let p1 = new Person();

        // 深拷贝
        let p2 = new Object();//让变量p2不和p1指向同一块存储空间

        // assign方法可以将第二个参数的对象的属性和方法拷贝到第一个参数的对象中。
        //但是只有在被拷贝的对象的所有属性都是基本数据类型时，才是深拷贝
        Object.assign(p2, p1);
        p2.name = "zs";
        console.log(p1.name);//lnj
        console.log(p2.name);//zs
    </script>

当被拷贝的对象的属性中有引用数据类型时，自定义拷贝函数

    <script>
        class Person{
            name = "jiaody";
            sayAge = {
                age:23
            }
            array=[1,2,3];
        }

        var p = new Person();
        var obj = new Object();
        deepCopy(obj,p);
        console.log(obj)
        function  deepCopy(target,source) {
            for(let key in source){
                //判断被拷贝对象中的数据类型，如果是引用数据类型（数组，对象和函数等）使用递归进行深拷贝
                if(source[key] instanceof Object){
                    //console.log(source[key].constructor)//数组和对象等都属于实例对象。实例对象.constructor能得到其构造函数
                    //数组.constructor是ƒ Array() { [native code] }
                    //对象.constructor是ƒ Object() { [native code] }
                    let subTarget = new source[key].constructor;//创建对象{}和数组[]的空对象
                    target[key] = subTarget;
                    deepCopy(subTarget,source[key]);
                }
                else {
                    //被拷贝对象中的基本数据类型，直接拷贝
                  //  console.log(source[key]);
                    target[key] = source[key]
                }
            }
        }
    </script>