JavaScript 面向对象编程初学者指南

2023-03-22 11:54:03 阅读：308 来源： 互联网

什么是面向对象编程？

面向对象编程是一种编写程序的方法，可以更轻松地管理和组织程序。OOP 允许我们将代码分解为更小、更易于管理的部分，称为对象，而不是在一个长而混乱的块中编写代码。这些对象可以存储数据和如何处理这些数据的指令，从而更容易重用代码并跟踪代码的运行情况。

对象是用于存储和操作数据的基本数据单元。对象由它们的属性定义，这些属性是描述对象的特征。在 JavaScript 中，对象的属性表示为键值对。键是表示属性名称的字符串，而值是存储在该属性中的数据。请记住，一个对象可以存储多种数据类型，例如字符串、数字，甚至其他对象。

要在 JavaScript 中创建一个对象，我们首先创建一个带有大括号的变量。

常数人 = {};

然后我们将键值对分配给对象。

const person = { 
  name : "Bruce Wayne" , 
  age : 30 , 
  occupation : "Private Investigator" , 
};

在我们的person对象中name，age、和occupation关键字是对象的属性（键），而分配给它们的值是属性的值。

访问对象

这是检索存储在对象中的数据的过程。这是通过引用对象的键属性来完成的。当我们这样做时，我们可以访问存储在该属性中的值。为此，我们使用以下符号之一。

点表示法：要使用此表示法访问对象的属性或方法，我们先写对象名称，然后是点 (.)，然后是我们要访问的属性。以我们的person对象为例，让我们访问该name属性。

人名；姓名；

将此记录到控制台会提供存储在属性中的值name。

The Bracket Notation：要使用此表示法访问对象的属性或方法，我们先写对象名称，然后是一对方括号 ([ ])，然后用引号括起我们要访问的属性。

人[“姓名”]；“名字” ];

将此记录到控制台会产生与点表示法相同的结果。

构造函数

这些是可用于创建对象的特殊函数。它们用于创建具有相同属性和方法的同一对象的多个实例。要创建构造函数，我们使用以下语法。首先，我们创建一个常规函数并传入参数。

const  Person = function (姓名, 年龄) { 

};

接下来，我们用关键字调用我们的函数new。关键字new使我们的函数成为构造函数。

const person1 = new  Person ( "詹姆斯邦德" , 40 );

这将创建对象的实例Person并将其存储在person1. 此过程还会this在我们创建的每个实例上设置关键字。请记住，this关键字指向正在构造的新创建的对象。接下来，我们用创建时传递的参数填充新创建的对象。

const  Person = function (姓名, 年龄) {
  这个。名字=名字；
  这个。年龄=年龄；
};

现在将实例记录person1到控制台会产生；

这样，我们就使用构造函数创建了第一个对象！

向构造函数添加方法

要向构造函数添加方法，我们在构造函数中定义该方法。这样，所有实例对象在创建时都会继承该方法。例如，让我们向旧的构造函数添加一个方法。

const  Person = function (姓名, 年龄) {
  这个。名字=名字；
  这个。年龄=年龄；
  这个。calcBirthYear = function ( ) {
    返回 2023 -这个。年龄；
  }; 
};

为了获得此方法的结果，我们calcBirthYear使用 DOT 表示法在我们的实例上调用该方法。

person1.calcBirthYear();.calcBirthYear ();

将此记录到控制台给出

这个过程还有一个问题。每次我们创建一个实例对象时，该对象都包含该calcBirthYear方法，这会影响我们代码的性能。

“这个”关键字

JavaScript 中的关键字this是指执行函数的对象。它指示哪个对象执行该方法并表示它所属的对象。使用 DOT 表示法，我们可以使用this关键字来引用这些对象内的对象的属性和方法。重要的是要了解的值this不是恒定的，并且会根据函数的调用方式而变化。

开发者会话回放

使用OpenReplay（一个面向开发人员的开源会话重播套件）以前所未有的方式发现挫折、了解错误和修复减速。它可以在几分钟内自行托管，让您完全控制您的客户数据

调试愉快！立即尝试使用 OpenReplay。

原型继承

原型继承是一种允许对象从其他对象继承属性和方法的机制。这意味着您可以创建与现有对象共享通用属性和方法的新对象。这使得创建新对象和重用代码变得更加容易，因为您可以在现有对象的基础上进行构建，而不是为每个新对象从头开始编写新代码。

原型继承是如何工作的

在 JavaScript 中，每个对象都有一个原型，一个用于创建对象的蓝图对象。

可以使用属性访问对象的原型__proto__。
原型对象允许其他对象继承它的属性和方法。
当您尝试访问对象中的属性或方法时，JavaScript 首先检查它是否存在于对象本身。如果没有，它会检查对象的原型。如果它仍然不存在，它会检查对象的原型的原型。这种通过原型连接的对象称为prototype chain. 此过程一直持续到找到属性或方法或prototype chain到达结尾。

使用原型继承共享方法

首先，我们回顾一下我们的Person构造函数。

const  Person = function (姓名, 年龄) {
  这个。名字=名字；
  这个。年龄=年龄；
};

接下来，我们使用该prototype属性向我们的 person 对象添加一个方法。

人。原型。calcBirthYear = function ( ) {
   返回 2023 -这个。年龄；
};

该prototype属性允许我们将方法添加到构造函数的原型而不是构造函数本身。这样，从构造函数创建的实例不包含方法，但可以从构造函数的原型继承它们。查看控制台上的构造函数给出；

正如我们所看到的，我们的calcBirthYear方法不存在于构造函数中。但是记录prototype我们的构造函数会产生不同的结果。

安慰。日志（人。原型）；日志（人。原型）；

我们的方法存在于构造函数的原型中，可以被构造函数的实例继承。

班级

类允许开发人员创建具有特定属性和方法的对象，并充当创建具有共同特征的对象的蓝图。要在 JavaScript 中创建一个类，我们使用class关键字来声明一个变量。

类 PersonCl {};

接下来，我们指定一个构造函数并传入我们的参数。此构造函数的工作方式与我们之前介绍的构造函数相同。

类 PersonCl {
  构造函数（名称，年龄）{
    这个。名字=名字；
    这个。年龄=年龄；
  } 
}

为了从类中创建一个对象PersonCl，我们用关键字调用我们的新对象new。

将它记录到控制台给出

从类继承方法

与原型继承一样，对象可以从其父类继承方法。为了说明这一点，我们在类中创建了一个方法PersonCl。

类 PersonCl {
  构造函数（名称，年龄）{
    这个。名字=名字；
    这个。年龄=年龄；
  } 
  calcBirthYear ( ){
    返回 2023 -这个。年龄；
  } 
}

然后我们将该方法传递给我们的实例对象并将其记录到控制台。

控制台。日志（布鲁斯。calcBirthYear （））；

需要注意的是，当一个对象继承了一个类的方法时，该方法并不存在于该对象上，而是存在于该对象的原型上。为进一步清楚起见，请观察下图。

如上所示，该calcBirthYear函数并不存在于我们创建的对象中，而是存在于该对象的原型中。

结论

标签：JavaScript,Web开发,编程
来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9