学习ES6（二十二） -- 创建对象详解

面向对象是遵循真实世界建模的软件开发范例。面向对象，将程序视为对象的集合，这些对象通过称为方法的机制相互通信。ES6也支持这些面向对象的组件。

面向对象的编程概念

首先，让我们了解

• 对象 -对象是任何实体的实时表示。根据Grady Brooch的说法，每个对象都具有3个特征-

  • 状态 -由对象的属性描述。

  • 行为 -描述对象的行为。

  • 身份 -唯一值，将一个对象与一组类似的对象区分开。

• 类 -就OOP而言，类是用于创建对象的蓝图。一个类封装对象的数据。

• 方法 -方法有助于对象之间的通信。

让我们将这些面向对象的概念转换为现实世界中的概念。例如：汽车是具有数据（品牌，型号，门数，车号等）和功能（加速，变速，开门，打开大灯等）的对象。

在ES6之前，创建类是一件大事。可以使用ES6中的class关键字创建类。

定义一个类语法：class Class_name { }  或者  var var_name = new Class_name { }

类定义可以包括以下内容-

• 构造函数 -负责为类的对象分配内存。

• 功能 -功能代表对象可以采取的行动。它们有时也称为方法。

将这些组件放在一起称为类的数据成员。

注 –类主体只能包含方法，而不能包含数据属性。

 

创建对象

要创建类的实例，使用new关键字，后跟类名称。

语法：var object_name= new class_name([ arguments ])

• new关键字负责实例化。

• 表达式的右侧调用构造函数。如果构造函数已参数化，则应传递值。

'use strict' 
class Polygon { 
   constructor(height, width) { 
      this.h = height; 
      this.w = width;
   } 
   test() { 
      console.log("The height of the polygon: ", this.h) 
      console.log("The width of the polygon: ",this. w) 
   } 
} 

//creating an instance  
var polyObj = new Polygon(10,20); 
polyObj.test();      

设置者和获取者

尝试设置属性值时，将调用setter函数。该set关键字用来定义setter函数。下面给出了用于定义setter函数的语法-

{set prop(val) { . . . }}
{set [expression](val) { . . . }}

prop是绑定到给定函数的属性的名称。val是变量的别名，该变量保存尝试分配给属性的值。ES6中的表达式可以用作绑定到给定函数的属性名称。

<script>
   class Student {
      constructor(rno,fname,lname){
         this.rno = rno
         this.fname = fname
         this.lname = lname
         console.log('inside constructor')
      }
      set rollno(newRollno){
         console.log("inside setter")
         this.rno = newRollno
      }
   }
   let s1 = new Student(101,'Sachin','Tendulkar')
   console.log(s1)
   //setter is called
   s1.rollno = 201
   console.log(s1)
</script>

输出：

inside constructor
Student {rno: 101, fname: "Sachin", lname: "Tendulkar"}
inside setter
Student {rno: 201, fname: "Sachin", lname: "Tendulkar"}

通过setter函数将表达式用作属性名称。

<script>
   let expr = 'name';
      let obj = {
      fname: 'Sachin',
      set [expr](v) { this.fname = v; }
   };
   console.log(obj.fname); //Sachin
   obj.name = 'John';
   console.log(obj.fname);//John
</script>

Getters

有一个 getter function时，有获取一个属性的值的尝试将被调用。在get关键字用来定义一个getter函数。下面给出了定义getter函数的语法-

{get prop() { ... } }
{get [expression]() { ... } }

prop是绑定到给定函数的属性的名称。

expression-从ES6开始，还可以将表达式用作属性名称以绑定到给定的函数。

 

<script>
   class Student {
      constructor(rno,fname,lname){
         this.rno = rno
         this.fname = fname
         this.lname = lname
         console.log('inside constructor')
      }
      get fullName(){
         console.log('inside getter')
         return this.fname + " - "+this.lname
      }
   }
   let s1 = new Student(101,'Sachin','Tendulkar')
   console.log(s1)
   //getter is called
   console.log(s1.fullName)
</script>

输出：

inside constructor
Student {rno: 101, fname: "Sachin", lname: "Tendulkar"}
inside getter
Sachin - Tendulkar

静态关键字

可以将static关键字应用于类中的函数。静态成员由类名称引用。

instanceof 

如果对象属于指定的类型，则instanceof运算符返回true。

类继承

ES6支持继承的概念。继承是程序从现有实体（这里是类）创建新实体的能力。扩展为创建新类的类称为父类/超级类。新创建的类称为子类/子类。

一个类使用'extends'关键字从另一个类继承。子类继承父类中除构造函数之外的所有属性和方法。

语法：class child_class_name extends parent_class_name

继承可以分类为-

• 单个 -每个类最多只能从一个父类扩展。

• 多个 -一个类可以从多个类继承。ES6不支持多重继承。

• 多层 

类继承和方法重写​​​​​​​

方法覆盖是子类重新定义超类方法的一种机制。

'use strict' ;
class PrinterClass { 
   doPrint() { 
      console.log("doPrint() from Parent called… ");
   }
}
class StringPrinter extends PrinterClass { 
   doPrint() { 
      console.log("doPrint() is printing a string…"); 
   } 
} 
var obj = new StringPrinter(); 
obj.doPrint();//输出：doPrint() is printing a string… 

super关键字

ES6使子类可以调用其父类数据成员。这是通过使用super关键字实现的。super关键字用于引用类的直接父级。

 

'use strict' 
class PrinterClass { 
   doPrint() {
      console.log("doPrint() from Parent called…") 
   } 
}  
class StringPrinter extends PrinterClass { 
   doPrint() { 
      super.doPrint() 
      console.log("doPrint() is printing a string…") 
   } 
} 
var obj = new StringPrinter() 
obj.doPrint()

//输出：

doPrint() from Parent called. 
doPrint() is printing a string.