面向对象

0 阅读3分钟

一,类

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

对象特指某一个,通过类实例化一个具体的对象。

面向对象的思维特点:

  • 抽取(抽象)对象共用的属性和行为组织(封装)成一个(模板)。
  • 对类进行实例化,获取类的对象

语法:

```js
```
class name{
// class body
}

创建实例:

```js
```var xx=new name();	

注意:类必须使用new实例化对象

1,构造器

constructor()方法是类的构造函数(默认方法),用于传递参数,返回实例对象,通过new命令生成对象实例时,自动调用该方法。如果没有显示定义,类内部会自动给我们创建一个constructor()

image.png

image.png

2,类中的方法

语法:

```js
```
class Person {
cnstructor (name,age) { // constructor 构造器或者构造函数
this .name = name; 
this .age = age;
say() {
console.log (this.name+'你好';}}

例子如下:

image.png

image.png

3,继承

image.png

image.png

(1)super关键字

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

语法:

```js
```
class Person{ //父类
constructor(surname){
this.surname =surname;
    }
}
class student extends Person {	//子类继承父类
constructor (surname,firstname){
super(surname);	//调用父类的constructor(surname)	
this.firstname = firstname; // 定义子类独有的属性
    }
}

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

子类的参数传递给父类的参数,即调用父类的构造函数的例子如下:

image.png

image.png

子类中调用父类的方法的例子:

image.png

image.png

super必须放在this前的例子:

image.png

image.png

注意:

image.png

image.png

创建对象后直接调用里面的方法可以如下这样写(这时的this指向的是对象刘德华):

image.png

创建的对象中有一个方法,这个方法为按钮的点击事件,这个点击的事件可以调用类里面的其他方法,例子如下:

在btn中的this指向的是对象刘德华,在sing方法中的this指向的是调用者,调用者为btu按钮,所以在输出this.uname时的值为undefined

image.png

image.png

为了实现在调用了sing方法后中输出的this.uname的值不为undefined,可以在类外面定义一个全局的变量,使这个变量获取到当前的对象,再利用到获取到的该对象来调用uname,这样就会调用到该对象的uname了,值就不会显示undefined了。显示undefined的原因是因为获取到的是btu对象而该对象并没有uname这个属性。

image.png

image.png

注意: constructor 里面的this指向实例对象,方法里面的this指向这个方法的调用者。

类的功能与构造函数+原型对象的功能类似:

image.png

image.png