JavaScript:ES5与ES6中的OOP概念
#javascript #编程 #开源 #twitter

JavaScript最初是一种功能性编程语言。直到ES5是JavaScript引入的概念。

面向对象的编程(OOP)是喜欢编程到现实生活的概念。这是在编程对象中对象在现实中的特征进行编程的过程。例如,实际上,诸如汽车之类的物体具有颜色,门数,车轮驱动器数等属性,并执行一些动作,例如开始,速度,停止等。

可以在通过OOP编程中进行 CAR 的这种特征的复制。在面向对象的编程中,这些属性称为属性,而这些操作称为方法。

在JavaScript中创建对象的方法

可以使用ES5中的原型和ES6中的类构造函数来创建对象。

在ES5中,以对象为导向的编程(OOP)是通过使用构造器函数创建对象来完成的。假设您想要一个 Person 对象,您创建一个构造函数函数并传递要设置为参数/参数的属性。传递它们后,我们将它们设置为使用 this 的关键字的对象的属性。请参阅下面的代码段。

function Person(firstName, lastName, dateOfBirth){
    this.firstName = firstName;
    this.lastName = lastName;
    this.dateOfBirth = new Date(dateOfBirth);

然后,我们用构造函数函数实例化对象,如下所示。

const person1 = new Person(‘Busari’, ‘Ridwan’, ’14-09-1998’);

上面的代码创建了 Person1 对象。当您 console.log(person1); 应该得到一个对象。


console.log(person1);

// Outputs result to the console

注意 dateofbirth 是作为对象而不是字符串显示的,这是因为,我们将其传递给 date 对象,以便我们可以使用日期获得出生年度,出生月和日的方法。

const person2 = new Person(‘Sari’, Wan’, ’24-07-2004’);

console.log(person2.dateOfBirth.getFullYear());

// We get 2004

现在,让我们添加基本上是我们 Person 对象的方法。

在ES5中有两种方法可以做到这一点。我们可以直接在我们的 Person 对象中添加方法,也可以使用 .prototype 在外部添加方法。您将在阅读时看到下面的实现。

将方法直接添加到es5
中的对象中


function Person(firstname, lastname, dob){
    this.firstName = firstname;
    this.lastName = lastname;
    this.dateOfBirth = new Date(dob);

    this.getBirthYear = function() {
        return this.dateOfBirth.getFullYear(); 
// the getFullYear() is a method of the Date object.
    }

    this.getFullName = () => `${this.firstName} ${this.lastName}`;

// I used template literal and arrow function above. 

}

现在让我们调用我们的方法 - get birthyear并将其记录到控制台。

console.log(person1.getBirthYear()); // logs the birth year
console.log(person1.getFullName());  // logs the full name

现在让我们谈论原型。这实际上是在ES5中创建对象方法的更好方法。

function Person(firstname, lastname, dob){
    this.firstName = firstname;
    this.lastName = lastname;
    this.dateOfBirth = new Date(dob);
}

Person.prototype.getBirthYear = function() {
    return this.dateOfBirth.getFullYear();
}

让我们使用getfullname方法做同样的事情。


Person.prototype.getBirthYear = () => `${this.firstName} ${this.lastName}`;


让我们记录新创建的方法


console.log(person2.getFullName());

在JavaScript ES5

中,它是针对对象的编程

现在,让我们在ES6中潜入面向对象的编程也称为ES2015。

如何使用类关键字在JavaScript ES6中创建对象

我们使用类在ES6中创建对象。这与ES5及其原型的构造函数相同,但这只是编写它的一种漂亮的方法。

让我们使用一个构造函数/方法来创建我们的人类班级,该构建器/方法将参数分配给其属性。


class Person {
    constructor(firstName, lastName, dob ){
        this.lastName = lastName;
        this.firstName = firstName;
        this.dob = dob; 
// I have deliberately changed dateOfBirth to dob for ease of writing
    }

// Now let’s create our prototypes or methods.
    getBirthYear(){
        return this.dob.getFullYear();
    }

    getFullName() {
        return `${this.firstName} ${this.lastName}`;
    }
}

现在,让我们实例化我们新创建的对象。


const person1 = new Person(‘You’, ‘Me’, ’05-11-2022’);

console.log(person1.getBirthYear());  // 2022
console.log(person1.getFullName());   // Busari Ridwan


代码与ES5的构造函数相同,如您所见,创建对象人的一种更短,更容易,更清洁的方法。

下次见...

这是我的社交媒体处理方法:
Twitter
LinkedIn