当前位置: 代码迷 >> 综合 >> 学习ES6(二十二) -- 创建对象详解
  详细解决方案

学习ES6(二十二) -- 创建对象详解

热度:99   发布时间:2023-10-24 11:28:48.0

面向对象是遵循真实世界建模的软件开发范例。面向对象,将程序视为对象的集合,这些对象通过称为方法的机制相互通信。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 = rnothis.fname = fnamethis.lname = lnameconsole.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 calleds1.rollno = 201console.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); //Sachinobj.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 = rnothis.fname = fnamethis.lname = lnameconsole.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 calledconsole.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. 
  相关解决方案