大数据最全【JavaScript 进阶教程】面向对象_js进阶面向对象(2)

---

三：创建类与生成实例

此版块我们学习创建类与对象的实例化

基本书写格式：（此处举例类名为 Animal）

//创建类

class Animal {

…

}

//实例化对象dog

var dog=new Animal()

<script>
//创建类
      class Animal{
           //填充内容
      }
//实例化对象
      var dog=new Animal();
</script>

---

注意点：

• 类名最好首字母大写！!
• 类名后直接跟花括号，不需要加小括号
• 实例化对象必须使用关键字new
• 实例化对象要加小括号
• 要先有了类，才能对象实例化，因为在es6中没有变量提升

---

四：constructor 构造函数

constructor 是类的默认构造函数，用于传参并返回给实例对象，在使用new生成实例对象时自动调用该方法，如果没有在类中明确写出该方法，则系统也会默认创建一个该方法

基本书写格式：（以参数为uname为例）

constructor (uname**){**

this.uname=uname；

}

<script>
      class Animal{
           constructor(uname){
               this.uname=uname;
           }
      }
      var dog=new Animal('旺财');
      console.log(dog.uname);
</script>

传参过程：

• **第一步：**在 new 实例化对象时就会调用 constructor 构造函数，并把参数 ‘旺财’ 传递给构造函数的参数 uname
• **第二步：**于是 uname 就把旺财传递给了 this.uname
• **第三步：**this 指向的就是创建好的实例化对象，于是对象 dog 就有了 uname=旺财

---

注意点：

• 类内的方法不需要加 function
• 类内的共有属性和方法的使用一定要在前面加 this**（非常非常非常重要）**

---

五：类中添加共有方法

类中不止只会有constructor构造函数，还会有普通的共有方法

基本书写格式：

eat(****){

…

}

<script>
      class Animal{
           constructor(uname){
               this.uname=uname;
           }
           eat(food){
               console.log(this.uname + '在吃' + food);
           }
      }
      var dog=new Animal('旺财');
      var cat=new Animal('咪咪');
      dog.eat('骨头');
      cat.eat('鲤鱼');
</script>

---

注意点：

• 可以有参可以无参
• 类中的多个方法之间不需要逗号分隔
• 类中的方法不需要加 function

---

六：类继承 extends

面向对象三大特点：封装，继承，多态，这里我们讲解继承，继承顾名思义，就是一个子类可以调用父类中的内容

继承书写格式：（此处举例子类继承父类）

class Son extends Father{

…

}

<script>
      class Father{
          constructor(){ }
          say(){
              console.log('hello');
          }
      }
      class Son extends Father{
      }
      var son1=new Son();
      son1.say();
</script>

---

对于有传参情况的，可能需要用到super关键字，下一个内容将讲到

---

七：super关键字

super() 作为函数调用时就代表父类的构造函数，ES6要求子类构造函数必须执行super()

7.1 构造函数内的 super 使用

在开始讲解super前我们先看一个报错案例：

例如我们要调用父类的加法函数，但是在子类实例化传参

<script>
      class Father{
          constructor(x,y){
              this.x=x;
              this.y=y;
          }
          sum(){
              console.log(this.x+this.y);
          }
      }
      class Son extends Father{
          constructor(x,y){
              this.x=x;
              this.y=y;
          }
      }
      var son1=new Son(1,5);
      son1.sum();
</script>

---

报错原因分析：

• **第一步：**我们实例化了对象son1，new的同时会调用son类的构造函数，并把参数1和5传递给子类的构造函数中，子类构造函数中的this指向对象son1
• **第二步：**而对象son1调用父类sum函数时，sum中的this.x与this.x指向的是父类的构造函数中的值，所以会报错

---

2. 使用 super关键字 更正错误

只需要将子类构造函数内加入super()关键字并传参进去即可，实际内部产生了以下步骤：

• **第一步：**实例化传参给子类构造函数，构造函数内的函数会自动调用，于是调用了super方法
• **第二步：**子类构造函数内的值传递给了super()，super实际上为调用父类构造函数，于是参数传递给了父类构造函数
• **第三步：**父类sum方法的this指向的是父类构造函数内的值，而此时已经通过super传入了值，故不会再报错

<script>
      class Father{
          constructor(x,y){
              this.x=x;
              this.y=y;
          }
          sum(){
              console.log(this.x+this.y);
          }
      }
      class Son extends Father{
          constructor(x,y){
              super(x,y)
          }
      }
      var son1=new Son(1,5);
      son1.sum();
</script>

构造****函数内使用super注意点：

• super 必须放在子类的 this 之前

---

7.2 super 调用父类的普通方法

在继承中调用普通方法，我们要记住一个 就近原则 ，那就是在继承中调用一个方法时，要先看子类自身有没有该方法，如果子类自身有而父类没有，就调用子类自身的，如果子类自身没有而父类有，就调用父类，如果都有，就会默认调用子类的，父类的则可以使用super调用

• **格式：**super . 方法

下面我们举例继承中父子同名的方法的调用：

<script>
      class Father{
           constructor(){

           }
           say(){
                return '我是爸爸';
           }
      }
      class Son extends Father{
           say(){
               console.log(super.say()+'的儿子');
           }
      }
      var son1=new Son(1,5);
      son1.say();
</script>

这样就做到了即调用了父类的也调用了子类的同名方法

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

a96772bef974c5.png)

这样就做到了即调用了父类的也调用了子类的同名方法

[外链图片转存中…(img-8GolZxER-1714771564853)]
[外链图片转存中…(img-DoxE571V-1714771564854)]
[外链图片转存中…(img-1VFyXsWf-1714771564854)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取