zoukankan      html  css  js  c++  java
  • ES6与ES5的继承

    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>
  • 相关阅读:
    ResNet主要思想(总结)
    TensorFlow2_200729系列---24、一些卷积网络创新点
    Android GIS开发系列-- 入门季(1) 起点
    [官方]Beyond Compare里面 二进制比较的含义.
    Chrome 下载地址
    本地图文直接复制到网页编辑器中
    本地图文直接复制到在线编辑器中
    js+php分片上传大文件源码
    js+php分片上传大文件插件
    js+php分片上传大文件控件
  • 原文地址:https://www.cnblogs.com/jfen625/p/12180288.html
Copyright © 2011-2022 走看看