JavaScript 中的 OOP

码道人 2022-06-23 13:36:45 阅读数:97

javascriptoop码道人technology-development

面向对象编程是一种简单的编程模式,它基于不同类型的对象及其属性的概念。现在,几乎所有的编程语言都支持OOP,但在本文中,我们将研究javascript 中的 OOP 并确保使用简单的示例来举例说明。

构造函数和“this”关键字。

在 javascript 和几乎任何其他编程语言的面向对象编程中,最重要的两件事是this关键字和构造函数。

虽然 Es6+ 被认为是一种语法糖,并且提供了一种更方便的方式来编写构造函数或声明类,但我将在本文中使用Es5,以便我们可以更深入地了解构造函数的工作原理。

就像将键值对对象分配给变量的对象文字一样,构造函数也可以工作,但是对于多个实例,与对象文字不同,构造函数由原型继承组成。

首先,拥有一个或多个属性的构造函数,我们可以使用new关键字从它实例化一个对象。请参阅下面的代码演示和控制台结果:

function Entity(name) {
this.name = name;
} // declaration of a single property "Entity" constructor taking in a "name" argument
const human = new Entity('Creature'); // instantiating using the "new" keyword and assigning "Creature" as a name
console.log(human); // calling instantiated variable

this 关键字是一个非常重要的关键字,它的值取决于你的代码运行的当前上下文。在我们的示例中,其值的范围是Entity函数上下文。而如果在函数范围之外或在全局范围内使用,你将获得 window 对象,因为它现在存在于全局上下文中。

你也可以向构造函数添加多个属性并以不同的方式实例化它们。

原型和原型继承

javascript 中的每个对象都有一个原型。原型本身就是一个对象,所有对象都可以从它们的原型中继承属性和方法。这意味着我们也可以将我们选择的函数分配或附加到构造函数原型链中。

请参阅下面的代码表示:

function Entity(name, dod) {
this.name = name;
this.creationDate = new Date(dod);
} // declaration of a multiple property "Entity" constructor
Entity.prototype.getTotalYears = function() {
return new Date().getFullYear() - this.creationDate.getFullYear();
} // inputing the "getTotalYears" function into the "Entity" constructor's prototype
const human = new Entity('Creature', 'january 09 2000'); // instantiating using the "new" keyword and assigning a name and date
console.log(human.getTotalYears()); // logging the total years of the instantiated variable using the "getTotalYears" function in the prototype
console.log(human); // logging the instantiated variable

原型继承指的是一个对象从同一代码上下文中的另一个对象继承其属性,这可以借助object.create()方法来实现。

请参阅下面的代码表示:

function person(name) {
this.name = name;
} // initializing "person" constructor
person.prototype.greets = function() {
return `${this.name} says hi`;
} // creating a "greets" function for the person constructor and assigning to it's prototype
const Yasir = new person('Yasir'); // instantiating a new student object
function Entity(name, regards) {
person.call(this, name); // calling the "person" constructor and assigning it to the "Entity" constructor
this.regards = regards;
} // initializing "Entity" constructor
Entity.prototype = Object.create(person.prototype); // INHEERITING THE "PERSON" CONSTRUCTOR PROTOTYPE TO THE "ENTITY" CONSTRUCTOR PROTOTYPE
const MrSmith = new Entity('Mr.Smith', 'how are you?'); // instantiating a new "Entity" object
console.log(Yasir); // logging the student object
console.log(MrSmith); // logging the teacher object
console.log(MrSmith.greets()); // calling the "greets()" function from "person" constructor on the "Entity" constructor and printing the result to the console

结论

有些核心对象用到了构造函数,但我们不建议使用,例如Date()对象。当使用对象字面量时,原型是从object.prototype获取的,但是当使用构造函数对象时,它是从 (the constructor name).prototype 获取的,for-in 循环不能访问原型。

版权声明:本文为[码道人]所创,转载请带上原文链接,感谢。 https://markdowner.net/v1/article/by_user/327537920049168384