JavaScript面向对象编程简介-yiteyi-C++库

由于JavaScript在Web开发中被广泛使用，在本文中，我们将探讨一些 面向对象 支持的机制 JavaScript 最大限度地利用它。在面向对象的JavaScript中，一些常见的面试问题包括：“JavaScript是如何实现面向对象编程的？它们与其他语言有何不同？能否在JavaScript中实现继承等等……”

null

有一些特性或机制使语言面向对象，比如：

对象
班级
封装
遗产

让我们深入了解其中每一个的细节，看看它们是如何在JavaScript中实现的。

1.反对 –一个物体就是一个物体 唯一的 包含 所有物 和方法例如，“汽车”是一个现实生活中的物体，它具有颜色、类型、型号、马力等特征，并执行某些动作，如驾驶。在面向对象编程中，对象的特征称为属性，动作称为方法。一个物体就是一个物体例子一个班级的学生。对象在JavaScript中无处不在几乎每个元素都是一个对象，无论它是函数、数组还是字符串。

注： javascript中的方法是其值为函数的对象的属性。

对象可以通过两种方式在JavaScript中创建：

使用 对象字面量

Javascript

                           //Defining object                         
                           let person = {                         
                                                     first_name:                                        'Mukul'                                        ,                         
                                                     last_name:                                        'Latiyan'                                        ,                         
            
                                                     //method                         
                                                     getFunction :                                        function                                        (){                         
                                                     return                                        (`The name of the person is                         
                                                     ${person.first_name} ${person.last_name}`)                         
                                                     },                         
                                                     //object within object                         
                                                     phone_number : {                         
                                                     mobile:                                        '12345'                                        ,                         
                                                     landline:                                        '6789'                         
                                                     }                         
                           }                         
                           console.log(person.getFunction());                         
                           console.log(person.phone_number.landline);                         

输出：

图片[1]-JavaScript面向对象编程简介-yiteyi-C++库

使用 对象构造函数：

Javascript

                           //using a constructor                         
                           function                                        person(first_name,last_name){                         
                                                     this                                        .first_name = first_name;                         
                                                     this                                        .last_name = last_name;                         
                           }                         
                           //creating new instances of person object                         
                           let person1 =                                        new                                        person(                                        'Mukul'                                        ,                                        'Latiyan'                                        );                         
                           let person2 =                                        new                                        person(                                        'Rahul'                                        ,                                        'Avasthi'                                        );                         
            
                           console.log(person1.first_name);                         
                           console.log(`${person2.first_name} ${person2.last_name}`);                         

输出：

图片[2]-JavaScript面向对象编程简介-yiteyi-C++库

使用 对象create（）方法： 物体。方法创建一个新对象，使用现有对象作为新创建对象的原型。

Javascript

                           // Object.create() example a                         
                           // simple object with some properties                         
                           const coder = {                         
                                                     isStudying :                                        false                                        ,                         
                                                     printIntroduction :                                        function                                        (){                         
                                                     console.log(`My name is ${                                        this                                        .name}. Am I                         
                                                     studying?: ${                                        this                                        .isStudying}.`)                         
                                                     }                         
                           }                         
                           // Object.create() method                         
                           const me = Object.create(coder);                         
            
                           // "name" is a property set on "me", but not on "coder"                         
                           me.name =                                        'Mukul'                                        ;                         
            
                           // Inherited properties can be overwritten                         
                           me.isStudying =                                        true                                        ;                         
            
                           me.printIntroduction();                         

输出：

图片[3]-JavaScript面向对象编程简介-yiteyi-C++库

2.课程 –课程是蓝图指一个物体。一个类可以有很多对象，因为类是一个样板而对象是实例类或具体实现。在我们进一步进入实现之前，我们应该知道与其他面向对象语言不同的是 JavaScript中没有类 我们只有目标。更准确地说，JavaScript是一种基于原型的面向对象语言，这意味着它没有类，而是使用构造函数定义行为，然后使用原型重用。

注：甚至ECMA2015提供的类也是对象。

ECMAScript 2015中引入的JavaScript类主要是对JavaScript现有的基于原型的继承的语法支持。该类语法没有向JavaScript引入新的面向对象继承模型。JavaScript类提供了更简单、更清晰的语法来创建对象和处理继承。 – Mozilla开发者网络

例子： 让我们使用ES6类，然后我们将研究定义对象的传统方式，并将它们模拟为类。

Javascript

                           // Defining class using es6                         
                           class Vehicle {                         
                                                     constructor(name, maker, engine) {                         
                                                     this                                        .name = name;                         
                                                     this                                        .maker =  maker;                         
                                                     this                                        .engine = engine;                         
                                                     }                         
                                                     getDetails(){                         
                                                     return                                        (`The name of the bike is ${                                        this                                        .name}.`)                         
                                                     }                         
                           }                         
                           // Making object with the help of the constructor                         
                           let bike1 =                                        new                                        Vehicle(                                        'Hayabusa'                                        ,                                        'Suzuki'                                        ,                                        '1340cc'                                        );                         
                           let bike2 =                                        new                                        Vehicle(                                        'Ninja'                                        ,                                        'Kawasaki'                                        ,                                        '998cc'                                        );                         
            
                           console.log(bike1.name);                                        // Hayabusa                         
                           console.log(bike2.maker);                                        // Kawasaki                         
                           console.log(bike1.getDetails());                         

输出：

图片[4]-JavaScript面向对象编程简介-yiteyi-C++库

传统的方式。

Javascript

                           // Defining class in a Traditional Way.                         
                           function                                        Vehicle(name,maker,engine){                         
                                                     this                                        .name = name,                         
                                                     this                                        .maker = maker,                         
                                                     this                                        .engine = engine                         
                           };                         
            
                           Vehicle.prototype.getDetails =                                        function                                        (){                         
                                                     console.log(                                        'The name of the bike is '                                        +                                        this                                        .name);                         
                           }                         
            
                           let bike1 =                                        new                                        Vehicle(                                        'Hayabusa'                                        ,                                        'Suzuki'                                        ,                                        '1340cc'                                        );                         
                           let bike2 =                                        new                                        Vehicle(                                        'Ninja'                                        ,                                        'Kawasaki'                                        ,                                        '998cc'                                        );                         
            
                           console.log(bike1.name);                         
                           console.log(bike2.maker);                         
                           console.log(bike1.getDetails());                         

输出：

图片[5]-JavaScript面向对象编程简介-yiteyi-C++库

如上例所示，在ES6中定义和重用对象要简单得多。因此，我们将在所有示例中使用ES6。

3.封装 –过程 包装的性质和功能 在一分钟之内 单个单元 被称为封装。让我们用一个例子来理解封装。

Javascript

                           //encapsulation example                         
                           class person{                         
                                                     constructor(name,id){                         
                                                     this                                        .name = name;                         
                                                     this                                        .id = id;                         
                                                     }                         
                                                     add_Address(add){                         
                                                     this                                        .add = add;                         
                                                     }                         
                                                     getDetails(){                         
                                                     console.log(`Name is ${                                        this                                        .name},Address is: ${                                        this                                        .add}`);                         
                                                     }                         
                           }                         
            
                           let person1 =                                        new                                        person(                                        'Mukul'                                        ,21);                         
                           person1.add_Address(                                        'Delhi'                                        );                         
                           person1.getDetails();                         

输出：

图片[6]-JavaScript面向对象编程简介-yiteyi-C++库

在上面的例子中，我们只是创建一个人对象，并初始化它的属性和使用它的函数。我们不必担心实现细节。我们正在使用一个对象接口，而不考虑实现细节。有时封装指的是 数据隐藏 或 数据抽象 这意味着代表基本特征，隐藏背景细节。大多数OOP语言都提供访问修饰符来限制变量的范围，但它们在JavaScript中不是这样的访问修饰符，但它们是我们可以在类/对象中限制变量范围的特定方式。

例子：

Javascript

                           // Abstraction example                         
                           function                                        person(fname,lname){                         
                                                     let firstname = fname;                         
                                                     let lastname = lname;                         
            
                                                     let getDetails_noaccess =                                        function                                        (){                         
                                                     return                                        (`First name is: ${firstname} Last                         
                                                     name is: ${lastname}`);                         
                                                     }                         
            
                                                     this                                        .getDetails_access =                                        function                                        (){                         
                                                     return                                        (`First name is: ${firstname}, Last                         
                                                     name is: ${lastname}`);                         
                                                     }                         
                           }                         
                           let person1 =                                        new                                        person(                                        'Mukul'                                        ,                                        'Latiyan'                                        );                         
                           console.log(person1.firstname);                         
                           console.log(person1.getDetails_noaccess);                         
                           console.log(person1.getDetails_access());                         

输出：

图片[7]-JavaScript面向对象编程简介-yiteyi-C++库

在上面的例子中，我们尝试访问一些属性( 个人1。名字 )和功能( 个人1。获取详细信息 )但它回来了 未定义 而他们的方法我们可以从人反对( 个人1。getDetails_access（） )，通过改变定义函数的方式，我们可以限制其范围。

4.继承 –这是一个概念，其中一个对象的某些属性和方法正被另一个对象使用。与大多数类继承类的OOP语言不同，JavaScript对象继承对象，即一个对象的某些特性（属性和方法）可以被其他对象重用。

让我们用例子来理解继承：

Javascript

                           //Inheritance example                         
                           class person{                         
                                                     constructor(name){                         
                                                     this                                        .name = name;                         
                                                     }                         
                                                     //method to return the string                         
                                                     toString(){                         
                                                     return                                        (`Name of person: ${                                        this                                        .name}`);                         
                                                     }                         
                           }                         
                           class student extends person{                         
                                                     constructor(name,id){                         
                                                     //super keyword to for calling above class constructor                         
                                                     super                                        (name);                         
                                                     this                                        .id = id;                         
                                                     }                         
                                                     toString(){                         
                                                     return                                        (`${                                        super                                        .toString()},Student ID: ${                                        this                                        .id}`);                         
                                                     }                         
                           }                         
                           let student1 =                                        new                                        student(                                        'Mukul'                                        ,22);                         
                           console.log(student1.toString());                         

输出：

图片[8]-JavaScript面向对象编程简介-yiteyi-C++库

在上面的例子中，我们定义了人具有特定属性和方法的对象，然后继承这个人中的对象 大学生 对象并使用person对象的所有属性和方法，以及为 大学生 .

注： Person和Student对象都有相同的方法，即toString（），称为 方法重写 .方法重写允许子类中的方法与父类中的方法具有相同的名称和方法签名。在上面的代码中，super关键字用于引用直接父类实例变量。

在本文中，我们介绍了JavaScript中的面向对象特性，有一整本书详细解释了JavaScript中的面向对象编程，这本书叫做《斯托扬·斯特凡诺夫的面向对象JavaScript》本文由 苏米特·戈什 .如果你喜欢GeekSforgek，并想贡献自己的力量，你也可以使用写极客。组织或者把你的文章寄去评论-team@geeksforgeeks.org.看到你的文章出现在Geeksforgeks主页上，并帮助其他极客。如果您发现任何不正确的地方，或者您想分享有关上述主题的更多信息，请写下评论。

JavaScript最为人所知的是网页开发，但它也用于各种非浏览器环境。通过以下步骤，您可以从头开始学习JavaScript JavaScript教程和 JavaScript示例 .

文章版权归作者所有，未经允许请勿转载。

THE END

Javascript