微语 微语:代码适合中午敲,早晚出BUG

SE5寄生组合式继承 JavaScript

   // ES5继承三步骤:
        // 1).在子类构造函数中调用父类构造函数,让子类实例化出来的对象拥有父类的属性
        // 2).让子类的原型成为父类的实例,让子类实例化出来的对象拥有父类的方法
        // 3).找回丢失的构造函数
        // 定义父类
        function User(username, password) {
            this.username = username;
            this.password = password;
        }
        User.prototype.login = function () {
            console.log(this.username + "登录成功!");
        }
        // 定义子类
        function Student(uid, ...arr) {
            this.uid = uid;
            // 1)
            User.apply(this, arr);
        }
        Student.prototype = Object.create(User.prototype)
        Student.prototype.constructor = Student
        let p1 = new Student("001", "小明", "151568")
        console.log(p1);
        p1.login()

        //寄生组合式继承原理
        function create(obj) {
            function F() {

            };
            F.prototype = obj;
            return new F();
        }

ES6继承 JavaScript

      // SE6的继承
        class User {
            constructor(username, password) {
                this.username = username;
                this.password = password;
            }
            login() {
                console.log(this.username + "登录成功!");
            }

        }
        class Student extends User {

        }
        //实例化
        let p1 = new Student("张三", 16456486)
        console.log(p1);
        p1.login()

类型检测-toString JavaScript

        //   toString可以检测所有类型
        // 前言:由于大部分的类型都有 toString()方法,无法通过原型链找到Object的toString() 方法,所以需要强制使用Object.prototype.toString.call(对象)

        //基本类型检测
        console.log(Object.prototype.toString.call(100)); //返回值:[object Number]
        console.log(Object.prototype.toString.call('张三'));//返回值:[object String]
        console.log(Object.prototype.toString.call('张三'));//返回值:[object String]
        console.log(Object.prototype.toString.call(true));//返回值:[object Boolean]
        console.log(Object.prototype.toString.call(undefined));//返回值:[object Undefined]
        console.log(Object.prototype.toString.call(null));//返回值:[object Null]

        //引用类型检测
        function show() {

        }
        console.log(Object.prototype.toString.call([1, 2, 3, 4, 5]));//返回值:[object Array]
        console.log(Object.prototype.toString.call({ name: "tom" }));//返回值:[object Object]
        console.log(Object.prototype.toString.call(show));//返回值:[object Function]
        // 注:call 指的是修改this指向

检测类型-isArray JavaScript

        // isArray判断是否为数组
        let arr = [1, 2, 3, 4, 5]
        let arr1 = {
            name: "张三"
        }
        console.log(Array.isArray(arr)); //判断arr是否为数组,返回值:true
        console.log(Array.isArray(arr1));//判断arr1是否为数组,返回值false

类型检测-instanceof JavaScript

  let arr = [1, 2, 3, 4]
        // 判断arr是否属于某个类
        console.log(arr instanceof Array);//判断是否属于数组类  返回值:true
        console.log(arr instanceof Object);//判断是否属于引用类 返回值: true

        let obj = {}
        console.log(obj instanceof Array);//判断是否为数组类 返回值:false
        console.log(obj instanceof Object);//判断是否为引用类 返回值:true

        //检测构造函数
        function Person(color, like) {
            this.color = color;
            this.link = like;
        }
        let p1 = new Person("#ff0000", "旅游")
        console.log(p1 instanceof Person); //判断p1是否属于Person类 返回值:true
        console.log(p1 instanceof Function); //判断p1是否属于Function类 返回值:false

深拷贝 JavaScript

 // 浅拷贝存在的问题:浅拷贝只能拷贝一层数据。
        let obj1 = {
            name: "小白",
            color: "#ff0000",
            like: ["爬山", "旅游"]
        }
        let obj2 = {}
        for (let key in obj1) {
            obj2[key] = obj1[key]
        }
        // 修改拷贝后的boj2里面值
        obj2.like[0] = "赏花 "
        // 发现修改之后会影响到boj1,所以没有拷贝成功
        console.log(obj1);
        console.log(obj2);

        // 解决办法:遍历数组或对象的所有子数据,每一层都单独拷贝
        let obj3 = JSON.parse(JSON.stringify(obj1))
        obj3.like[0] = "钓鱼"
        // 这里修改之后,发现并没有影响到obj1和obj2的数据,说明拷贝成功了
        console.log(obj3);

变量的拷贝 JavaScript

    // 引用类型的拷贝

        let obj1 = {
            name: "小红",
            age: 18,
            sex: "女",
        }
        let obj2 = obj1;

        console.log(obj1);
        console.log(obj2);

        /*
                | 执行流程 |

                        1).定义了一个obj1对象
                        2).定义了一个obj2,吧obj1的值赋值给obj2(这里赋值的是obj1的地址,由于obj1是一个对象,也就是引用型数据,会存放到堆中,栈区存放的是堆中数据的地址,由栈区的地址,找到堆中的实体)
                        3).执行console.log() 分别打印obj1,obj2
                        执行结果:{name: '小红', age: 18, sex: '女'}
                        注:此处拷贝的只是一个地址,不是一个全新的实体,指向的还是同一个实体。
        */

基本类型和引用类型 JavaScript

        // 基本数据类型(存放在栈里面)
        let a1 = 50;
        let b1 = a1;
        a1 = 40;
        console.log("a1=", a1, "b1=", b1);

        /*     | 执行流程 |
                    1).定义变量a1赋值50
                    2).定义变量b1 把a1的50赋值给b1,此时b1=50;
                    3).对a1重新赋值,此时a1为40
                    4).执行 console.log();
                    结果为:a1= 40 ,b1= 50
        */

        //引用类型:存储在堆里面
        let c1 = [1, 2, 3, 4];
        let d1 = c1;
        c1[0] = 10; //修改数组C1下标0的值为10
        console.log(c1);
        console.log(d1);

        /*

                | 执行流程  |

                        1).定义一个数组为c1 传入数组元素[1, 2, 3, 4]
                        2).把数组C1的值赋值给d1(由于是引用类型,这里的赋值指的是地址(实体存在堆里面,栈里面存放的是一个地址,指向堆中的实体))
                        3).对数组c1的下标为0的元素进行元素修改为 10
                        4).执行 console.log()打印c1和c2;

                        结果为:C1=[10, 2, 3, 4] ,b1=[10, 2, 3, 4]
                        注:这里虽然修改了c1下标为0的数组元素,但是由于c1赋值给d1的值是地址,所以他们始终指向的是同一个实体,这里对c1的元素进行了修改,所以d1也一样会发生改变。
        */