ES6与ES5的继承

Posted 2021-03-16 jfen625

ES6

　　ES6中的类

　　　　类与ES5中的构造函数写法类似

　　　　区别在于属性要放入constructor中，静态方法和属性实列不会继承

<script>
    class Person{
      height="178cm";
        constructor(name,age){
            //属性
            this.name = name;
            this.age = age;
        }
        //方法
        getName(){
            console.log("姓名是:"+this.name);
        }
        //静态方法
        static hobby(){
            console.log("喜欢篮球");
        }
    }
    //静态属性
    Person.height = "178cm";

    let student = new Person("张三",20);
    student.getName();
    //通过类来调用
    Person.hobby();
    console.log(Person.height);
</script>

　

　　类的继承

　　　子类与父类不会相互影响

<script>
    class Dad{
        name = "张三";
        age = 40;
       constructor(height,age){//多个参数 “，” 号处理
                this.height = height;
        }
        hobby(){
            console.log("父类爱好");
        }
    }

    class Son extends Dad{
        constructor(height,age){
            //表示调用父类的构造函数
            super(height);
        }
        hobby(){
            super.hobby();    
            console.log("子类爱好")
        }
    }
</script>

 

ES5

　　在ES5中要想实现构造函数的继承我们需要先了解三个函数：call()，apply()，bind()

　　这三个函数是用来改变this的指向。听不懂没关系，我们来看个例子就明白。

    <script>
//        function foo(){
//            console.log(this);
//        }
//        foo();//这里的this指向window
//        let obj = {
//            name:"张三"
//        }
//        foo.call(obj);//这里就会将foo的this指向obj
        
        //以下是三个函数间的差别
        function foo(name,age){
            console.log(this,"姓名是"+name+"年龄是"+age);
        }
//        foo();
        let obj = {
            name:"张三"
        }
//        foo.call(obj,"张三",20);//第一个是改变this的指向，之后的是函数本身需要传递的参数
//        foo.apply(obj,["张三",20]);//apply不同的是参数传入只接受一个数字
        foo.bind(obj)("张三",20);//需要再执行一遍，参数放入第二个()内
    </script>

 

　　构造函数的继承

　　　　继承：子类继承父类所有属性和行为，父类不受影响。

　　　　目的：找到类之间的共性，精简代码，提高代码复用性，保持父类纯洁性

    <script>
        //继承；
        function Dad(name,age){
            this.name = name;
            this.age = age;
            this.money = "100000"
        }
        
        function Son(name,age){
              Dad.call(this,name,age);
//            Dad.apply(this,[name,age]);
//            Dad.bind(this)(name,age);
            this.sex = ‘男‘
        }
        
        let zhangsan = new Son("张三",20);
        console.log(zhangsan.money);
        console.log(zhangsan.sex);
    </script>

 

　　原型的继承

　　　　我们的原型prototype 继承不能够简单的用=进行，因为涉及到传值和传址的问题。

　　　　传值和传址问题（简单数据类型传值，复杂数据类型传址）

• 　　　　基本数据类型：Number、String、Boolean、Null、Undefined
• 　　　　复杂数据类型：Array、Date、Math、RegExp、Object、Function等

　　　　为了解决这个问题，我们有两种解决方式

　　　　1.深拷贝继承

　　　　2.组合继承

<script>
    //递归深拷贝
    function deepCopy(obj){
        let newObj = Array.isArray(obj)?[]:{};//判断对象是否是个数组
        for(let key in obj){
            if(obj.hasOwnProperty(key)){//只拿对象本身的属性
                if(typeof obj[key] === "object"){//若为对象，即复杂数据类型
                    newObj[key] = deepCopy(obj[key]);//进一步循环
                }else{
                    newObj[key] = obj[key]
                }
            }
        }
        return newObj;
    }
</script>

<script>
    //组合继承
    function Dad(){
        this.name = "张三";
    }
    Dad.prototype.hobby = function(){
        console.log("喜欢篮球");
    }
    function Son(){
        Dad.call(this);
    }
    let F = function(){}//中间函数，空的构造函数
    F.prototype = Dad.prototype;
    Son.prototype = new F();
    Son.prototype.constructor = Son;

    let newSon = new Son();
    newSon.hobby();
</script>

 

下篇文章写下ES6的模块化。