Js-ES6类的使用，ES5原型和继承

朱雀 2022-11-27 12:07 235阅读 0赞

# Ⅰ- 壹 - 类 #

1.  类 是抽象的 对象是真实存在的 。对象就是类的实例化体现，类就是对象的抽象化表现
2.  基类（BaseClass）基础的类别
3.  父类
4.  子类
5.  超类(SuperClass) 子类的父类 唯一的上一层

## 一 创建 ##

class obj{ 
    
    		a=1;//es7支持
    		//构造函数 没有参数可以不写
    		constructor(elem) { 
    			//this 指向 obj
                console.log(elem)
    		}
    		//方法
    		tow(){ 
    			console.log("aaaa");
    		}
    		tow1(){ 
            a++
    			console.log(a);
    		}
    		...
    		...
    
    
    	}

## 二 实例化类 ##

**实例化,当实例化时执行构造函数constructor**  
**对象的构造函数就是当前的类名**

//实例化,当实例化时执行构造函数constructor
    //构造函数之后互不影响
    let b=new obj();
    console.log(b.a);// 1
    b.tow();//aaaa
    b.tow1();//2
    b.tow1();//3
    b.tow1();//4
    let c=new obj();
    console.log(c.a);// 1
    c.tow();//aaaa
    c.tow1();//2
    c.tow1();//3
    c.tow1();//4
    
    //实例化传参自动执行构造函数constructor
    let b=new obj("2");
    //对象的构造函数就是当前的类名
    console.log(b.constructor===obj);//true

1.  类中除了函数中局部变量就是类中属性
2.  类中this就是实例化的对象
3.  通过构造函数实例化的对象，就是这个类的实例对象
4.  因此这个实例对象就具备了类所有属性和方法
5.  这个实例对象就可以调用他自身的方法和属性了
6.  因为构造函数默认生成实例化对象,因此不能在构造函数中使用return 返回其他内容,构造函数不允许写return
7.  谁调用方法,在类的函数中this就是那个实例对象

## 三 类继承extends ##

// 让A这个类继承了B的类
    class A extends B{ 
        constructor(r){ 
            // 继承父类后,必须在构造函数中调用超类的构造函数
            super();//超类的构造函数,超类是什么,这个就是什么
    				//超类的构造函数是有参数的,因此在这里子类中必须传入这个需要参数
        }
        //子类的方法与父类的方法相同,会覆盖
        tow(){ 
    		 super.run();//执行超类的run方法,在继续执行下面的内容
    
    	}
    }

## 四 类的静态使用static ##

静态属性 不会根据实例化对象的属性改变而改变  
静态方法，不是针对实例化对象来使用  
这个方法中的this是Box类，因此我们通常不在静态方法使用this，直接使用类名  
静态方法中是无法调用实例方法的  
独立于其他实例对象的方法  
静态方法是为了解决一类问题的方法

class Box{ 
                // 静态属性 不会根据实例化对象的属性改变而改变
                static a=1;
                a=10;
                constructor(_a){ 
                    this.a=_a;
                }
                // 静态方法，静态方法不是针对实例对象来使用的，
                // 这个方法中this是Box类，因此我们通常不在静态方法使用this，直接使用类名
                // 静态方法中是无法调用实例方法的
                // 独立于其他实例对象的方法
                // 为了解决某一类问题的方法
                static play(){ 
                    // console.log("aa");
                    // Box.a //1
                }
                play(){ 
    
                }
    
            }

## 五 模块化开发 ##

**创建模块**首先创建一个JS文件

export default class C{ 
        constructor(){ 
            this.play();
        }
        play(){ 
            console.log(“ssss”);
        }
    }

**模块继承**

import A from "./a.js";
    export default class B extends A{ 
        constructor(){ 
            super();
        }
        run(){ 
            super.run();
            console.log("bbbb");
        }
    }

**HTML：**  
**引用模块**  
\*\*script type=“module”\*\*引用模块

## 六 模块化知识点： ##

**防抖**：  
**延时执行一个函数**

var time=3；
    function intervalCreate() { 
        time--;
        if(time>0) return;
        time=3;
        createCircle();
    }

### 一 动画效果：requestAnimationFrame(animation)和setTimeout对比; ###

1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。

2、在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。

定义个函数animation();     
    function animation() { 
        requestAnimationFrame(animation);
        // var id=requestAnimationFrame(animation);
        // cancelAnimationFrame(id); 删除逐帧回调
    }

cancelAnimationFrame(id);  删除逐帧回调

1.  setTimeout（）方法按照指定的时间间隔（30ms）执行函数

var timer = null;
    		timer = setInterval(function () { 
    			autoplay();
    		},30);

clearInterval(timer);停止调用；

**运行机制不同：**  
setInterval()执行的时间不确定，该设置的时间间隔是将代码添加到异步队列中等待的时间。只有当主线程中的任务以及队列前面的任务是执行完毕，才真正开始执行动画代码；  
requestAnimationFramel()浏览器每刷新一次，动画代码执行一次，不会造成丢帧现象以及动画卡顿；

# Ⅱ - 贰 - ES5类的原型 #

## 一 关于原型相关属性的含义： ##

*  prototype：原型，只有构造函数才有的属性，指向该构造函数的原型对象。
 *  **proto**：原型链，只有实例对象才有的属性，指向new这个实例的构造函数的原型对象 。
 *  constructor：原型对象中的属性，指向该原型对象的构造函数。

## 二 关于原型方面： ##

*  当 new 一个函数的时候会创建出一个对象，所以【被创建对象.**proto**】等于【函数.prototype】。
 *  一切函数都是由 Function 这个函数创建的，所以【被创建的函数.**proto**】等于【Function.prototype】。
 *  一切函数的原型对象都是由 Object 这个函数创建的，所以【一切函数.prototype.**proto**】等于【Object.prototype】。
 *  \_\_proto\_\_和constructor属性是对象所独有的；prototype属性是函数所独有的。但是由于JS中函数也是一种对象，所以函数也拥有\_\_proto\_\_和constructor属性，每个构造函数都有一个prototype属性，指向它的原型对象，而且构造函数生成的每个实例也都有一个指向原型对象的内部指针。原型对象上的属性和方法是它所属构造函数生成的实例共享的。

## 三 给Fn方法加一个属性方法 ##

//给Fn方法加一个属性方法
    function Fn(){ }
    //ES6的静态方法相同
    Fn,run=function(){ }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70_pic_center]

## 四 在原型上面添加一个方法 ##

ES5中，在给构造函数设置原型属性和方法时，尽量避免采用对象的形式来写，因为这样会覆盖该函数原来的 prototype 内容。

//给Fn方法太能加一个属性方法
    function Fn(){ }
    //ES6的静态方法相同
    Fn,run=function(){ }
    //在原型上面添加一个方法
    Fn.prototype.play = function () { }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70_pic_center 1]

## 五 函数执行和new 实例化执行 ##

实例化构造函数，实例化类  
实例化时会将构造函数的prototype对象下的所有方法和属性添加在实例化对象的原型链中

*  new 函数和执行函数是不一样
 *  函数如果没有return 执行函数会undefined
 *  只有实例化的时候才能添加trototype添加的函数

//函数执行
    var a = Fn();
    console.log(a);
    
    //实例化执行
    var f = new Fn();
    console.log(f);

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DoM9PO3w-1597461486941)(C:\\Users\\幻影旅团\\AppData\\Roaming\\Typora\\typora-user-images\\image-20200814212148538.png)\]

## 六 实现ES6构造函数 ##

// 第一种方式
    function Box() { 
    
        }
    
    
    
        Box.prototype = { 
          a: 1,
          run: function () { 
    
    
          },
          play: function () { 
    
          }
        }
        Object.defineProperty(Box.prototype, "constructor", { 
          value: Box
        })
        var b = new Box();
        console.log(b);
    
    //第二种方式
    
        function Box() { 
    
        }
    
        Box.prototype.run = function () { 
    
        }
        Box.prototype.play = function () { 
    
        }
    
    
    
        Box.run = function () { 
    
        }
    
    
        var b = new Box();
        console.log(b);
    
        console.log(Box.prototype === b.__proto__);//true

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q5niA68C-1597461486946)(C:\\Users\\幻影旅团\\AppData\\Roaming\\Typora\\typora-user-images\\image-20200814213414478.png)\]

# Ⅲ - 叁 - ES5继承 #

在js里，被继承的函数称为超类型（父类，基类也行，其他语言叫法），继承的函数称为子类型（子类，派生类）。继承也有之前问题，比如字面量重写原型会中断关系，使用引用类型的原型，并且子类型还无法给超类型传递参数。

*  实例化时会将构造函数的prototype对象下的所有方法和属性添加在实例化对象的原型链中
 *  ES5中自身会有prototype对象（原型）\_*proto*\_ 是原型链

## 一 组合继承 ##

为了解决引用共享和超类型无法传递参数的问题，我们采用一种借用构造函数的技术或者成为对象冒充（伪造对象、经典继承）的技术来解决这两种问题。

原型链继承的基本思路就是利用原型让一个引用类型继承另一个引用类型的属性和方法。  
原型链+借用构造函数的模式，这种模式称为组合继承。

//Ball继承Box
    
    function Box(v) { 
          this.v = v;//box属性
          console.log(v);//第一次打印 undefined 第二次打印 3
        }
    
    	//run a存在于Ball__proto__上面
        Box.prototype.run = function () { 
    
        }
        Box.prototype.a = 10;
    
        function Ball(v) { 
            console.log(this);//this指向Ball 
          Box.call(this, v); //冒充继承
        }
    	//Ball的__proto__添加实例的Box
        Ball.prototype = new Box();
    	//在Ball原型上面添加原型方法constructor
        Object.defineProperty(Ball.prototype, "constructor", { 
          value: Ball
        })
        var c = new Ball(3);
        console.log(c);//Ball
    	console.log(c.v);//3

## 二 寄生式继承 ##

寄生式继承把原型式+工厂模式结合而来，目的是为了封装创建对象的过程。

// 寄生式继承
        //给Function 添加一个原型方法extend
        //superClass方法参数是Box
    
        Function.prototype.extend = function (superClass) { 
    
          function F() { }
          F.prototype = superClass.prototype; //给F这个方法原型添加 参数（box）的原型
          // console.dir(this)//指向Ball
          var proto = this.prototype; //存放 Ball的原型内容
          this.prototype = new F(); //Ball的原型添加一个 f实例化的内容
    
          //getOwnPropertyNames 获取对象下所有属性的名称，不包括__proto__，把所有的属性名放在一个数组中返回
          var names = Object.getOwnPropertyNames(proto);
          //遍历获取的对象的所有属性
          for (var i = 0; i < names.length; i++) { 
            //getOwnPropertyDescriptor 获取对象下属性的描述，也就是使用Object.defineProperty定义的所有属性的描述内容。
            var desc = Object.getOwnPropertyDescriptor(proto, names[i]); //获取每一个属性的具体表述
    
            //defineProperty第一个参数为对象名称，第二个参数为属性名称，第三个参数为属性描述对象，
            Object.defineProperty(this.prototype, names[i], desc); //相当于复制了每一个属性的具体表述到Ball的原型属性
          }
          //给Ball的原型 添加一个属性为Ball方法
          Object.defineProperty(this.prototype, "constructor", { 
            value: this,
          });
          //在Ball原型上添加一个属性superClass为extend的参数（这里是Ball）
          this.prototype.superClass = superClass;
          //判断这个参数的原型上面有没有这个参数方法 若果没有就添加一个
          if (superClass.prototype.constructor !== superClass) { 
            Object.defineProperty(superClass.prototype, "constructor", { 
              value: superClass,
            });
          }
        };
    
    
    
        //Ball继承Box
    
        //创建Box
        function Box(v) { 
          this.v = v;
          console.log(v);
        }
        //在Box的原型上面添加两个属性
        Box.prototype.run = function () { 
          console.log("a");
        };
        Box.prototype.a = 10;
    
        //
        function Ball(v) { 
          // console.log(this)//Ball
          //
          this.superClass.apply(this, arguments);//类似于ES6 super（） 函数
        }
        Ball.prototype.play = function () { 
    
        }
        //执行Function方法 是所有方法的父类 所有Ball可以执行他的函数 extend 参数为box 既extend里面this指向为Ball
        Ball.extend(Box);
        Ball.prototype.run = function () { 
          this.superClass.prototype.run.apply(this, arguments);
          console.log("b");
        }
    
        var c = new Ball(5);
        console.log(c);
        c.run();

# 0 - 0 - 知识点： #

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/2049fcfa8ad0477b81b80574cf3bc8c4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/0fc8f9cc055a487a8b03db1622e6c8b2.png