JavaScript高级---(1)面向对象编程

x33g5p2x  于2021-09-24 转载在 JavaScript  
字(1.9k)|赞(0)|评价(0)|浏览(322)

一、面向对象编程POP(Process-oriented programming)

面向对象是把事务分解成为一个个对象,然后由对象之间分工与合作。

1、举例理解

我们举个例子:
把大象装进冰箱。

面向过程的编程方式是:
打开冰箱门–>把大象放进去–>关上冰箱门

面向对象则是先抽象出对象,然后再找出对象的属性方法:
1、大象:

  • 进去

2、冰箱

  • 打开
  • 关闭

2、面向对象编程的特性

  1. 封装性
  2. 继承性
  3. 多态性

3、面向对象编程的优缺点

  • 优点:易维护、易复用、易扩展,由于面向对象有封装、继承、多态性的特性,可以设计出低耦合的系统,使系统 更加灵活、更加易于维护 。
  • 缺点:性能比面向过程低

二、类和对象

1、类

类抽象了对象的公共部分,它泛指某一大类(class)

2、对象

对象特指某一个,通过类实例化一个具体的对象 。
对象是由属性和方法组成的:

  • 属性:事物的特征,在对象中用属性来表示
  • 方法:事物的行为,在对象中用方法来表示

3、创建类及实例化对象

创建类
js一般使用class创建类,下面就利用class关键字创建了一个类。
这里constructor是类的构造函数,用于传递参数,返回实例对象,通过 new 命令生成对象实例时,自动调用该方法。如果没有显示定义, 类内部会自动给我们创建一个constructor() 。

// 构造类
        class Car {
            // 构造函数,new完之后自动执行,同时返回实例对象
            constructor(color, brand) {
                this.color = color;
                this.brand = brand;
            }

            // 添加方法
            run() {
                console.log("The car is running!");
            }
        }

实例化对象
我们使用new来创建对象

var car = new Car('red', 'toyota');

三、类的继承

1、继承

子类可以继承父类的一些属性和方法。一般使用extends关键字。

语法:

class Father{   // 父类
} 
class  Son extends Father {  // 子类继承父类
}

实例:

class Father {
      constructor(surname) {
        this.surname= surname;
      }
      say() {
        console.log('你的姓是' + this.surname);

       }
}
class Son extends Father{  // 这样子类就继承了父类的属性和方法

}
var damao= new Son('刘');
damao.say();     // 你的姓是刘

2、super关键字

super关键字 用于访问和调用对象父类上的函数。可以调用父类的构造函数,也可以调用父类的普通函数。
一般用于参数传递

class Father {
     say() {
         return '我是爸爸';

     }
}
class Son extends Father { // 这样子类就继承了父类的属性和方法
     say() {
          // super.say() super 调用父类的方法
          return super.say() + '的儿子';
     }
}
var damao = new Son();
console.log(damao.say());  // 我是爸爸

注意: 子类在构造函数中使用super, 必须放到 this 前面 (必须先调用父类的构造方法,在使用子类构造方法)

3、指向问题

这里我们举一个例子进行解释。我们先在页面上写一个button按钮。然后构造一个类,创建一个实例化对象。

class Star {
            constructor(name, age) {
                this.name = name;
                this.age = age;
                // this.sing();
                this.btn = document.querySelector("button");
                this.btn.onclick = this.sing;
            }
            sing() {
                // 这里的this指向他的调用者btn***
                console.log(this.name); //undefined
                console.log(this);
            }
            dance() {
                _that = this;
                console.log(this);
            }
        }
        var ldh = new Star('ldh', 18);

当我们实例化star类后,调用sing()方法会发生什么呢?会输出ldh吗?答案是undefined,原因是sing()方法里面的this并不指向这个对象了,而是指向它的调用者btn。
我们可以在外面定义一个that来保留这个this的指向,这时候就可以正常输出了。

四、注意点总结

  1. 在 ES6 中类没有变量提升,所以必须先定义类,才能通过类实例化对象.
  2. 类里面的共有属性和方法一定要加this使用.
  3. 类里面的this指向问题.
  4. constructor 里面的this指向实例对象, 方法里面的this 指向这个方法的调用者

下一篇:JavaScript高级—(2)构造函数和原型、继承

相关文章