首页 >> js开发 >> js代码JavaScript面向对象三个基本特征实例详解【封装、继承与多态】
js代码JavaScript面向对象三个基本特征实例详解【封装、继承与多态】
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
本文实例讲述了JavaScript面向对象三个基本特征。分享给大家供大家参考，具体如下：了解过面向对象的同学应该都知道，面向对象三个基本特征是：封装、继承、多态，但是对于这三个词具体可能不太了解。对于前端来讲接触最多的可能就是封装与继承，对于多态来说可能就不是那么了解了。封装继承封装在说封装之先了解一下封装到底是什么？什么是封装封装：将对象运行所需的资源封装在程序对象中——基本上，是方法和数据。对象是“公布其接口”。其他附加到这些接口上的对象不需要关心对象实现的方法即可使用这个对象。这个概念就是“不要告诉我你是怎么做的，只要做就可以了。”对象可以看作是一个自我包含的原子。对象接口包括了公共的方法和初始化数据。（节选自百度百科）封装我对于封装的理解，可能还有一个步骤就是抽离，首先你要清楚在一个对代码中你应该抽离那些属性方法，有了这些为基础才能更好的做好封装。抽离封装无非就是其属性和方法封装。
类：封装对象的属性和行为
方法：封装具体逻辑功能
访问封装：访问修饰封装无非就是对其访问权限进行封装
类：封装对象的属性和行为方法：封装具体逻辑功能访问封装：访问修饰封装无非就是对其访问权限进行封装
class Employees {
constructor(name,age){
this.name = name;
this.age = age;
}
getInfo(){
let {name,age} = this;
return {name,age};
}
static seyHi(){
console.log("Hi");
}
}
let lisi = new Employees("Aaron",18);
lisi.seyHi();
// lisi.seyHi is not a function
lisi.getInfo(); // {name: "Aaron", age: 18}
Employees.seyHi(); // Hi
class Employees {
constructor(name,age){
this.name = name;
this.age = age;
}
getInfo(){
let {name,age} = this;
return {name,age};
}
static seyHi(){
console.log("Hi");
}
}
let lisi = new Employees("Aaron",18);
lisi.seyHi();
// lisi.seyHi is not a function
lisi.getInfo(); // {name: "Aaron", age: 18}
Employees.seyHi(); // Hi在Employees中抽出的公共属性有name,age,公共方法有getInfo,seyHi，然而getInfo与seyHi所不同的是seyHi使用了static修饰符，改变其为静态方法，seyHi只属于Employees这个类。然而getInfo方法则是属于实例的。EmployeesnameagegetInfoseyHigetInfoseyHiseyHistaticseyHiEmployeesgetInfo这里使用了static对seyHi方法对其进行了访问权限的封装。staticseyHi再举一个例子。
Promise.then() // Promise.then is not a function
let p1 = new Promise(() => {})
p1.then(); // Promise {}
Promise.all([1]);
// Promise {: Array(1)}
Promise.then() // Promise.then is not a function
let p1 = new Promise(() => {})
p1.then(); // Promise {}
Promise.all([1]);
// Promise {: Array(1)}从上面的代码中可以看出Promise也使用了static对其方法的访问权限进行了封装。Promisestatic继承继承：说到继承并不太陌生，继承可以使得子类具有父类的各种的公有属性和公有方法。而不需要再次编写相同的代码。在令子类别继承父类别的同时，可以重新定义某些属性，并重写某些方法，即覆盖父类别的原有属性和方法，使其获得与父类别不同的功能。（节选自百度百科）继承属性方法子类继承父类后，子类具有父类属性和方法，然而也同样具备自己所独有的属性和方法，也就是说，子类的功能要比父类多或相同，不会比父类少。
class Employees {
constructor(name){
this.name = name;
}
getName(){
console.log(this.name)
}
static seyHi(){
console.log("Hi");
}
}
class Java extends Employees{
constructor(name){
super(name);
}
work(){
console.log("做后台工作");
}
}
let java = new Java("Aaron");
java.getName();
java.work();
// java.seyHi();
// java.seyHi is not a function
class Employees {
constructor(name){
this.name = name;
}
getName(){
console.log(this.name)
}
static seyHi(){
console.log("Hi");
}
}
class Java extends Employees{
constructor(name){
super(name);
}
work(){
console.log("做后台工作");
}
}
let java = new Java("Aaron");
java.getName();
java.work();
// java.seyHi();
// java.seyHi is not a function从上面的例子可以看出继承不会继承父类的静态方法，只会继承父类的公有属性与方法。这一点需要注意。子类继承之后既拥有了getName方法，同样也拥有自己的worker方法。getNameworker多态多态：按字面的意思就是“多种状态”，允许将子类类型的指针赋值给父类类型的指针。（节选自百度百科）多态说白了多态就是相同的事物，一个接口，多种实现，同时在最初的程序设定时，有可能会根据程序需求的不同，而不确定哪个函数实现，通过多态不需要修改源代码，就可以实现一个接口多种解决方案。多态的表现形式重写与重载。什么是重写重写：子类可继承父类中的方法，而不需要重新编写相同的方法。但有时子类并不想原封不动地继承父类的方法，而是想作一定的修改，这就需要采用方法的重写。方法重写又称方法覆盖。（节选自百度百科）重写
class Employees {
constructor(name){
this.name = name;
}
seyHello(){
console.log("Hello")
}
getName(){
console.log(this.name);
}
}
class Java extends Employees{
constructor(name){
super(name);
}
seyHello(){
console.log(`Hello,我的名字是${this.name},我是做Java工作的。`)
}
}
const employees = new Employees("Aaron");
const java = new Java("Leo");
employees.seyHello();
// Hello
java.seyHello();
// Hello,我的名字是Leo,我是做Java工作的。
employees.getName();
// Aaron
java.getName(); // Leo
class Employees {
constructor(name){
this.name = name;
}
seyHello(){
console.log("Hello")
}
getName(){
console.log(this.name);
}
}
class Java extends Employees{
constructor(name){
super(name);
}
seyHello(){
console.log(`Hello,我的名字是${this.name},我是做Java工作的。`)
}
}
const employees = new Employees("Aaron");
const java = new Java("Leo");
employees.seyHello();
// Hello
java.seyHello();
// Hello,我的名字是Leo,我是做Java工作的。
employees.getName();
// Aaron
java.getName(); // Leo通过上面的代码可以看出Java继承了Employees,然而子类与父类中都存在seyHello方法，为了满足不同的需求子类继承父类之后重写了seyHello方法。所以在调用的时候会得到不同的结果。既然子类继承了父类，子类也同样拥有父类的getName方法。JavaEmployeesseyHelloseyHellogetName什么是重载重载就是函数或者方法有相同的名称，但是参数列表不相同的情形，这样的同名不同参数的函数或者方法之间，互相称之为重载函数或者方法。（节选自百度百科）
class Employees {
constructor(arg){
let obj = null;
switch(typeof arg)
{
case "string":
obj = new StringEmployees(arg);
break;
case "object":
obj = new ObjEmployees(ObjEmployees);
break;
case "number":
obj = new NumberEmployees(ObjEmployees);
break;
}
return obj;
}
}
class ObjEmployees {
constructor(arg){
console.log("ObjEmployees")
}
}
class StringEmployees {
constructor(arg){
console.log("StringEmployees")
}
}
class NumberEmployees {
constructor(arg){
console.log("NumberEmployees")
}
}
new Employees({})
// ObjEmployees
new Employees("123456") // StringEmployees
new Employees(987654)
// NumberEmployees
class Employees {
constructor(arg){
let obj = null;
switch(typeof arg)
{
case "string":
obj = new StringEmployees(arg);
break;
case "object":
obj = new ObjEmployees(ObjEmployees);
break;
case "number":
obj = new NumberEmployees(ObjEmployees);
break;
}
return obj;
}
}
class ObjEmployees {
constructor(arg){
console.log("ObjEmployees")
}
}
class StringEmployees {
constructor(arg){
console.log("StringEmployees")
}
}
class NumberEmployees {
constructor(arg){
console.log("NumberEmployees")
}
}
new Employees({})
// ObjEmployees
new Employees("123456") // StringEmployees
new Employees(987654)
// NumberEmployees因为JavaScript是没有重载的概念的所以要自己编写逻辑完成重载。在上面的代码中定义了Employees,ObjEmployees,StringEmployees,NumberEmployees类,在实例化Employees的时候在constructor里面进行了判断，根据参数的不同返回不同的对应的类。EmployeesObjEmployeesStringEmployeesNumberEmployeesEmployeesconstructor这样完成了一个简单的类重载。总结
封装可以隐藏实现细节，使得代码模块化；
继承可以扩展已存在的代码模块（类），它们的目的都是为了——代码重用。
多态就是相同的事物，调用其相同的方法，参数也相同时，但表现的行为却不同。多态分为两种，一种是行为多态与对象的多态。
封装可以隐藏实现细节，使得代码模块化；继承可以扩展已存在的代码模块（类），它们的目的都是为了——代码重用。多态就是相同的事物，调用其相同的方法，参数也相同时，但表现的行为却不同。多态分为两种，一种是行为多态与对象的多态。在编程的是多多运用这个写思想对其编程时很有用的，能够使你的代码达到高复用以及可维护。感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools./code/HtmlJsRun测试上述代码运行效果。在线HTML/CSS/JavaScript代码运行工具在线HTML/CSS/JavaScript代码运行工具http://tools./code/HtmlJsRun关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》javascript面向对象入门教程JavaScript错误与调试技巧总结JavaScript数据结构与算法技巧总结JavaScript遍历算法与技巧总结JavaScript数学运算用法总结希望本文所述对大家JavaScript程序设计有所帮助。
类：封装对象的属性和行为
方法：封装具体逻辑功能
访问封装：访问修饰封装无非就是对其访问权限进行封装
类：封装对象的属性和行为方法：封装具体逻辑功能访问封装：访问修饰封装无非就是对其访问权限进行封装
class Employees {
constructor(name,age){
this.name = name;
this.age = age;
}
getInfo(){
let {name,age} = this;
return {name,age};
}
static seyHi(){
console.log("Hi");
}
}
let lisi = new Employees("Aaron",18);
lisi.seyHi();
// lisi.seyHi is not a function
lisi.getInfo(); // {name: "Aaron", age: 18}
Employees.seyHi(); // Hi
class Employees {
constructor(name,age){
this.name = name;
this.age = age;
}
getInfo(){
let {name,age} = this;
return {name,age};
}
static seyHi(){
console.log("Hi");
}
}
let lisi = new Employees("Aaron",18);
lisi.seyHi();
// lisi.seyHi is not a function
lisi.getInfo(); // {name: "Aaron", age: 18}
Employees.seyHi(); // Hi在Employees中抽出的公共属性有name,age,公共方法有getInfo,seyHi，然而getInfo与seyHi所不同的是seyHi使用了static修饰符，改变其为静态方法，seyHi只属于Employees这个类。然而getInfo方法则是属于实例的。EmployeesnameagegetInfoseyHigetInfoseyHiseyHistaticseyHiEmployeesgetInfo这里使用了static对seyHi方法对其进行了访问权限的封装。staticseyHi再举一个例子。
Promise.then() // Promise.then is not a function
let p1 = new Promise(() => {})
p1.then(); // Promise {
Promise.all([1]);
// Promise {
Promise.then() // Promise.then is not a function
let p1 = new Promise(() => {})
p1.then(); // Promise {
Promise.all([1]);
// Promise {
class Employees {
constructor(name){
this.name = name;
}
getName(){
console.log(this.name)
}
static seyHi(){
console.log("Hi");
}
}
class Java extends Employees{
constructor(name){
super(name);
}
work(){
console.log("做后台工作");
}
}
let java = new Java("Aaron");
java.getName();
java.work();
// java.seyHi();
// java.seyHi is not a function
class Employees {
constructor(name){
this.name = name;
}
getName(){
console.log(this.name)
}
static seyHi(){
console.log("Hi");
}
}
class Java extends Employees{
constructor(name){
super(name);
}
work(){
console.log("做后台工作");
}
}
let java = new Java("Aaron");
java.getName();
java.work();
// java.seyHi();
// java.seyHi is not a function从上面的例子可以看出继承不会继承父类的静态方法，只会继承父类的公有属性与方法。这一点需要注意。子类继承之后既拥有了getName方法，同样也拥有自己的worker方法。getNameworker多态多态：按字面的意思就是“多种状态”，允许将子类类型的指针赋值给父类类型的指针。（节选自百度百科）多态说白了多态就是相同的事物，一个接口，多种实现，同时在最初的程序设定时，有可能会根据程序需求的不同，而不确定哪个函数实现，通过多态不需要修改源代码，就可以实现一个接口多种解决方案。多态的表现形式重写与重载。什么是重写重写：子类可继承父类中的方法，而不需要重新编写相同的方法。但有时子类并不想原封不动地继承父类的方法，而是想作一定的修改，这就需要采用方法的重写。方法重写又称方法覆盖。（节选自百度百科）重写
class Employees {
constructor(name){
this.name = name;
}
seyHello(){
console.log("Hello")
}
getName(){
console.log(this.name);
}
}
class Java extends Employees{
constructor(name){
super(name);
}
seyHello(){
console.log(`Hello,我的名字是${this.name},我是做Java工作的。`)
}
}
const employees = new Employees("Aaron");
const java = new Java("Leo");
employees.seyHello();
// Hello
java.seyHello();
// Hello,我的名字是Leo,我是做Java工作的。
employees.getName();
// Aaron
java.getName(); // Leo
class Employees {
constructor(name){
this.name = name;
}
seyHello(){
console.log("Hello")
}
getName(){
console.log(this.name);
}
}
class Java extends Employees{
constructor(name){
super(name);
}
seyHello(){
console.log(`Hello,我的名字是${this.name},我是做Java工作的。`)
}
}
const employees = new Employees("Aaron");
const java = new Java("Leo");
employees.seyHello();
// Hello
java.seyHello();
// Hello,我的名字是Leo,我是做Java工作的。
employees.getName();
// Aaron
java.getName(); // Leo通过上面的代码可以看出Java继承了Employees,然而子类与父类中都存在seyHello方法，为了满足不同的需求子类继承父类之后重写了seyHello方法。所以在调用的时候会得到不同的结果。既然子类继承了父类，子类也同样拥有父类的getName方法。JavaEmployeesseyHelloseyHellogetName什么是重载重载就是函数或者方法有相同的名称，但是参数列表不相同的情形，这样的同名不同参数的函数或者方法之间，互相称之为重载函数或者方法。（节选自百度百科）
class Employees {
constructor(arg){
let obj = null;
switch(typeof arg)
{
case "string":
obj = new StringEmployees(arg);
break;
case "object":
obj = new ObjEmployees(ObjEmployees);
break;
case "number":
obj = new NumberEmployees(ObjEmployees);
break;
}
return obj;
}
}
class ObjEmployees {
constructor(arg){
console.log("ObjEmployees")
}
}
class StringEmployees {
constructor(arg){
console.log("StringEmployees")
}
}
class NumberEmployees {
constructor(arg){
console.log("NumberEmployees")
}
}
new Employees({})
// ObjEmployees
new Employees("123456") // StringEmployees
new Employees(987654)
// NumberEmployees
class Employees {
constructor(arg){
let obj = null;
switch(typeof arg)
{
case "string":
obj = new StringEmployees(arg);
break;
case "object":
obj = new ObjEmployees(ObjEmployees);
break;
case "number":
obj = new NumberEmployees(ObjEmployees);
break;
}
return obj;
}
}
class ObjEmployees {
constructor(arg){
console.log("ObjEmployees")
}
}
class StringEmployees {
constructor(arg){
console.log("StringEmployees")
}
}
class NumberEmployees {
constructor(arg){
console.log("NumberEmployees")
}
}
new Employees({})
// ObjEmployees
new Employees("123456") // StringEmployees
new Employees(987654)
// NumberEmployees因为JavaScript是没有重载的概念的所以要自己编写逻辑完成重载。在上面的代码中定义了Employees,ObjEmployees,StringEmployees,NumberEmployees类,在实例化Employees的时候在constructor里面进行了判断，根据参数的不同返回不同的对应的类。EmployeesObjEmployeesStringEmployeesNumberEmployeesEmployeesconstructor这样完成了一个简单的类重载。总结
封装可以隐藏实现细节，使得代码模块化；
继承可以扩展已存在的代码模块（类），它们的目的都是为了——代码重用。
多态就是相同的事物，调用其相同的方法，参数也相同时，但表现的行为却不同。多态分为两种，一种是行为多态与对象的多态。
封装可以隐藏实现细节，使得代码模块化；继承可以扩展已存在的代码模块（类），它们的目的都是为了——代码重用。多态就是相同的事物，调用其相同的方法，参数也相同时，但表现的行为却不同。多态分为两种，一种是行为多态与对象的多态。在编程的是多多运用这个写思想对其编程时很有用的，能够使你的代码达到高复用以及可维护。感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools./code/HtmlJsRun测试上述代码运行效果。在线HTML/CSS/JavaScript代码运行工具在线HTML/CSS/JavaScript代码运行工具http://tools./code/HtmlJsRun关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》javascript面向对象入门教程JavaScript错误与调试技巧总结JavaScript数据结构与算法技巧总结JavaScript遍历算法与技巧总结JavaScript数学运算用法总结希望本文所述对大家JavaScript程序设计有所帮助。
相关文章:
- JavaScriptthree.js欧拉角和四元数的使用方法
- jsVue中的this.$options.data()和this.$data用法说明js大全
- js解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题js大全
- JavaScript深入了解Vue.js 混入（mixins）
- js解决父组件将子组件作为弹窗调用只执行一次created的问题js大全
- jsvuex中store存储store.commit和store.dispatch的用法js大全
- jsvue+axios全局添加请求头和参数操作js大全
- jsvue data对象重新赋值无效(未更改)的解决方式js大全
- jsVUE项目axios请求头更改Content-Type操作js大全
- jsvue在响应头response中获取自定义headers操作js大全
刚刚发布热门点击发布时间
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
- [07/19]适老化与信息无障碍是什么关系，二者有何异同？
- [07/19]网站如何进行适老化改造？
- [07/12]老年群体面临“数字鸿沟” 数字化网站适老化改造服务彰显人文关怀
- [07/12]数字适老化改造方案 老龄群体数字化改造受关注
- [07/11]什么是重绘?什么是回流?常见引起回流属性和方法：
