JS面向对象编程浅析

JS面向对象编程浅析

在JavaScript中,面向对象编程(Object-Oriented Programming,OOP)是一种非常常见的编程思想。OOP的核心概念是“对象”,它可以把一系列的数据和行为聚合在一起,形成一个具有特定功能的“物体”。本文将会从以下几点详细讲解JavaScript面向对象编程的相关知识。

面向对象的基本概念

类和对象

类(Class)是对象集合的抽象表示形式,具有相似特征、相同行为的对象集合。在JavaScript中,类是由构造函数(Constructor)创建的。构造函数是一种特殊的函数,用来初始化对象的属性和方法,其名称通常以大写字母开头。例如:

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log("Hello, my name is " + this.name + ", I'm " + this.age + " years old.");
  }
}

在上述代码中,我们用构造函数Person创建了一个Person类。这个类包含两个属性(name和age)和一个方法(sayHello),方法用来输出对象的信息。在JavaScript中,我们可以使用new关键字来创建对象。例如:

var person1 = new Person("Bob", 20);
var person2 = new Person("Tom", 22);
person1.sayHello(); // Hello, my name is Bob, I'm 20 years old.
person2.sayHello(); // Hello, my name is Tom, I'm 22 years old.

在上述代码中,我们使用Person类创建了两个对象(person1和person2),并调用每个对象的sayHello方法输出对象的信息。

封装、继承和多态

面向对象编程中的三大特征是封装、继承和多态。

封装(Encapsulation)是指将对象的属性和方法隐藏起来,保护数据不被外部直接访问。封装是对象的基础,可以使对象的使用更加安全和方便。

继承(Inheritance)是指从父类(或超类)派生出子类(或子类型),子类会自动拥有父类的属性和方法,同时可以添加自己的属性和方法。继承可以简化代码的编写,提高代码的可重用性。

多态(Polymorphism)是指不同的对象可以响应同一个消息,并表现出不同的行为。它是面向对象编程中最具有灵活性和扩展性的特征之一。

JavaScript中实现面向对象编程

实现面向对象编程的方法有很多,在JavaScript中实现OOP最常见的方法是使用构造函数和原型链。这一小节我们将详细讲解这种方法。

构造函数

在JavaScript中,我们可以使用构造函数创建对象。概括来说,构造函数是一个普通的函数,可以使用new关键字来创建一个对象。例如:

function Animal(name) {
  this.name = name;
  this.sayName = function() {
    console.log("My name is " + this.name);
  }
}
var dog = new Animal("dog");
dog.sayName(); // My name is dog

在上述代码中,我们创建了一个Animal类,包含一个属性(name)和一个方法(sayName)。然后使用new关键字来创建一个dog对象,并调用这个对象的sayName方法输出dog对象的名称。

原型链

在JavaScript中,每个对象都有一个原型(prototype)属性,原型定义了属性和方法的集合。对象可以通过原型链访问到这些属性和方法。原型链是一种对象之间的链接方式,使得一个对象可以通过另一个对象克隆所有的属性和方法。

  • 使用原型

我们可以使用Object.create方法来创建原型对象,并使用原型对象创建对象。例如:

var animal = {
  name: "",
  sayName: function() {
    console.log("My name is " + this.name);
  }
};
var dog = Object.create(animal);
dog.name = "dog";
dog.sayName(); // My name is dog

在上述代码中,我们使用Object.create方法创建了一个名为animal的原型对象,并在原型对象中定义了一个属性(name)和一个方法(sayName)。然后我们使用原型对象创建了一个dog对象,并为dog对象的name属性赋值。最后调用这个对象的sayName方法输出对象的名称。

  • 直接在原型对象中定义属性和方法

我们也可以直接在构造函数的原型对象中定义属性和方法。例如:

function Animal(name) {
  this.name = name;
}
Animal.prototype.sayName = function() {
  console.log("My name is " + this.name);
}
var dog = new Animal("dog");
dog.sayName(); // My name is dog

在上述代码中,我们定义了一个Animal类,并在Animal类的原型对象中添加了一个方法(sayName)。然后使用new关键字创建一个dog对象,并调用这个对象的sayName方法输出对象的名称。

示例说明

示例一

一家公司有多个员工,公司想对每个员工进行薪资管理。每个员工有姓名和工资两个属性,需要按照不同的算法计算工资。例如,普通员工每天的工资是基本工资加班费,经理每个月的工资由基本工资、奖励和补贴组成,销售员的工资由基本工资和销售提成组成。请用面向对象的思想设计出一个薪资管理系统。

设计思路

在这个案例中,我们可以设计一个基础的Employee类,包含员工的姓名和工资属性。然后定义三个子类(Manager,Salesman,Worker)分别表示经理、销售员和普通员工。每个子类可以继承Employee类,同时定义自己的工资计算算法。

代码实现

function Employee(name, salary) {
  this.name = name;
  this.salary = salary;
}
Employee.prototype.getSalary = function() {
  return this.salary;
}
function Manager(name, salary, reward, allowance) {
  Employee.call(this, name, salary);
  this.reward = reward;
  this.allowance = allowance;
}
Manager.prototype = Object.create(Employee.prototype);
Manager.prototype.constructor = Manager;
Manager.prototype.getSalary = function() {
  return this.salary + this.reward + this.allowance;
}
function Salesman(name, salary, commission) {
  Employee.call(this, name, salary);
  this.commission = commission;
}
Salesman.prototype = Object.create(Employee.prototype);
Salesman.prototype.constructor = Salesman;
Salesman.prototype.getSalary = function() {
  return this.salary + this.commission;
}
function Worker(name, salary, overtimePay) {
  Employee.call(this, name, salary);
  this.overtimePay = overtimePay;
}
Worker.prototype = Object.create(Employee.prototype);
Worker.prototype.constructor = Worker;
Worker.prototype.getSalary = function() {
  return this.salary + this.overtimePay;
}

在上述代码中,我们定义了一个Employee类表示员工,包含name和salary属性。然后定义了三个子类,分别为Manager、Salesman和Worker。这三个子类都继承了Employee类,同时定义了自己的getSalary方法来计算工资。

示例二

设计一个Person类表示人,包含name、age、gender三个属性和一个sayHello方法,该方法可以输出“I'm {name}, I'm {age} years old, I'm {gender}” 的语句。然后定义两个子类(Student和Teacher),分别包含major属性(表示专业)和subject属性(表示教授科目)。

设计思路

在这个案例中,我们可以设计一个基础的Person类,包含name、age和gender三个属性和一个sayHello方法。然后定义两个子类(Student和Teacher),分别继承Person类,同时增加自己的属性。Student类增加了major属性,Teacher类增加了subject属性。

代码实现

function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}
Person.prototype.sayHello = function() {
  console.log("I'm " + this.name + ", I'm " + this.age + " years old, I'm " + this.gender);
}
function Student(name, age, gender, major) {
  Person.call(this, name, age, gender);
  this.major = major;
}
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;
function Teacher(name, age, gender, subject) {
  Person.call(this, name, age, gender);
  this.subject = subject;
}
Teacher.prototype = Object.create(Person.prototype);
Teacher.prototype.constructor = Teacher;

在上述代码中,我们定义了一个Person类,包含name、age和gender三个属性和一个sayHello方法。然后定义了两个子类,Student和Teacher,每个子类继承了Person类,同时定义了自己的属性。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS面向对象编程浅析 - Python技术站

(0)
上一篇 2023年5月18日
下一篇 2023年5月18日

相关文章

  • Javascript String对象扩展HTML编码和解码的方法

    下面是关于”Javascript String对象扩展HTML编码和解码的方法”的完整攻略: 1. HTML编码的概念 在编写HTML文件时,我们经常会使用一些特殊的字符,比如”<“、”>”、”&”等。但是,在HTML文档中,这些字符并不是直接显示出来的,因为它们被解释为HTML标签或其他功能。 如果我们需要在HTML文档中直接显示这些字…

    JavaScript 2023年5月20日
    00
  • JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法

    JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法主要依赖于浏览器提供的File API。该API提供了File对象和FileReader对象,可以让我们通过JavaScript读取本地文件并进行上传。下面是实现该功能的步骤: 在HTML页面中添加上传文件的表单元素,例如: <form> <input type=&qu…

    JavaScript 2023年5月27日
    00
  • JavaScript async/await使用详解

    JavaScript async/await使用详解 什么是async/await async/await是ES2017中的语法,它使得异步的代码看起来更像同步的代码。async/await基于Promise,是Promise写法的一种简洁写法。 使用async/await async/await需要使用async定义异步函数,使用await等待异步操作完成…

    JavaScript 2023年5月28日
    00
  • 一起来学习一下JavaScript的事件流

    关于JavaScript事件流,我为大家准备了一份完整攻略,一起来学习一下。 什么是JavaScript事件流 JavaScript事件流是指浏览器中发生事件(如鼠标点击、键盘输入等)时,事件在DOM树结构中按照特定顺序发送和处理的过程。这个过程包含三个阶段:捕获阶段、目标阶段和冒泡阶段。 捕获阶段 在事件到达目标元素之前,从根节点到目标元素之间的所有节点都…

    JavaScript 2023年6月10日
    00
  • JavaScript常用本地对象小结

    下面我将详细讲解JavaScript常用本地对象的知识点,包含对象的定义、属性和方法,以及两个示例说明。 什么是本地对象 在 JavaScript 中,除了语言本身提供的全局对象和全局函数之外,很多对象也是由浏览器端或者 node.js 端提供的本地对象。本地对象可分为三个大类(原生对象、宿主对象、自定义对象),原生对象又称为内置对象。 常用本地对象 本地对…

    JavaScript 2023年5月27日
    00
  • 利用js正则表达式验证手机号,email地址,邮政编码

    对于利用js正则表达式验证手机号、email地址、邮政编码,可以按照以下步骤进行: 一、编写正则表达式 验证手机号 手机号码一般为11位数字组成,以1开头,比较简单,可以使用以下正则表达式进行匹配: /^1[3456789]\d{9}$/ 该表达式的解释: ^ 为开始符号,表示匹配输入的开始 1 为手机号码开头的数字,即必须以1开头 [3456789] 表示…

    JavaScript 2023年5月19日
    00
  • JavaScript 事件冒泡简介及应用

    JavaScript 事件冒泡简介及应用 事件冒泡是指在 HTML 的 DOM 树结构中,当某个元素触发了一个事件后,它会向父元素逐层传递,直至到达文档根节点。这种事件传递方式被称为事件冒泡。 冒泡机制的触发方式 当一个元素触发一个事件时,事件将从触发元素开始,然后向上冒泡到它的父元素,父元素的父元素,依此类推,直到冒泡到文档中的根元素为止。整个过程称为事件…

    JavaScript 2023年6月10日
    00
  • javascript 检测浏览器类型和版本的代码

    要检测浏览器类型和版本,我们可以使用JavaScript中的navigator对象。该对象提供了关于浏览器的详细信息,包括应用程序名称、代码名称、浏览器版本、当前操作系统和语言等。 以下是使用JavaScript检测浏览器类型和版本的代码: // 检测浏览器类型和版本的代码 const getBrowserInfo = () => { const ua…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部