JavaScript面向对象简介

JavaScript的核心是面向对象的，它还提供了强大而灵活的OOP语言功能. 本文首先介绍了面向对象的编程，带您探索JavaScript的对象模型，最后介绍了JavaScript中的面向对象编程的一些概念.

如果您对JavaScript概念（例如变量，类型，方法和范围等）缺乏信心，则可以在本文中学习这些概念. 您也可以检查一下.

面向对象编程是一种基于抽象模型创建的现实世界模型的编程模型. 它使用以前建立的范例，包括多种技术，例如模块化，多态性和包装. 如今，许多流行的编程语言（例如Java，JavaScript，C#，C ++，Python，PHP，Ruby和Objective-C）都支持面向对象编程（OOP）.

与传统的软件设计概念“程序只是功能的集合或简单的计算机指令列表”相比，面向对象的编程可以看作是使用一系列对象进行协作的软件设计. 彼此. 在OOP中，每个对象都可以接收消息，处理数据并将消息发送到其他对象. 每个对象都可以看作是一台独立的小型机器，角色或职责明确.

面向对象编程的目的是提高编程的灵活性和可维护性，这在大型软件项目中很流行. 通过强调模块化，面向对象的代码开发更加简单易懂. 与非模块化编程方法相比，它可以更直接地分析，编码和理解复杂的情况和过程.

命名空间

允许开发人员使用与应用程序相关的唯一名称捆绑所有功能容器.

班级班级

定义对象的特征. 它是对象属性和方法的模板定义.

对象对象

该类的实例.

属性属性

对象的特征，例如颜色.

方法方法

对象的能力，例如步行.

构造函数构造函数

初始化对象时调用的方法. 通常，它的名称与包含它的类是一致的.

继承继承

一个类可以继承另一个类的特征.

封装包

一种将数据和相关方法绑定在一起的方法.

抽象摘要

结合复杂的对象继承，方法和属性可以模拟逼真的模型.

多态多态

许多表示“许多”，状态表示“形式”. 不同的类可以定义相同的方法或属性.

有关面向对象编程的更多描述，请参阅Wikipedia的面向对象编程.

基于原型的编程不是面向对象编程中体现的一种样式，并且行为重用（在基于类的语言中也称为继承）是通过装饰现有的原型对象而实现的. 这种模式也称为弱分类，原型设计或基于实例的编程.

最初（也是最典型的）基于原型语言的示例由David Angel和Randall Smith开发. 但是，分类较弱的编程风格最近变得越来越流行，并已被JavaScript，Cecil，NewtonScript，IO，MOO，REBOL，Kevo，Squeak等几种编程语言采用（使用框架来操纵Morphic组件） ，以及其他几种编程语言.

命名空间是一个容器，允许开发人员使用唯一的，特定于应用程序的名称捆绑所有功能. 在JavaScript中，名称空间只是包含方法，属性和对象的另一个对象.

注意: 必须意识到，与其他面向对象的编程语言不同，Java语言中的普通对象和名称空间在语言级别上没有区别. 这可能会使JavaScript初学者感到困惑.

创建JavaScript名称空间的想法很简单: 创建了一个全局对象，所有变量，方法和函数都成为该对象的属性. 使用名称空间还可以最大程度地减少应用程序名称冲突的可能性.

让我们创建一个名为MYAPP的全局变量

// 全局命名空间
var MYAPP = MYAPP || {};

在上面的代码示例中，我们首先检查是否已定义MYAPP（无论是在同一文件中还是在另一个文件中）. 如果是这样，则使用现有的MYAPP全局对象，否则，创建一个名为MYAPP的空对象来封装方法，函数，变量和对象.

我们还可以创建子命名空间:

// 子命名空间
MYAPP.event = {};

以下是用于创建名称空间以及添加变量oop面向对象编程，函数和方法的代码:

// 给普通方法和属性创建一个叫做MYAPP.commonMethod的容器
MYAPP.commonMethod = {
  regExForName: "", // 定义名字的正则验证
  regExForPhone: "", // 定义电话的正则验证
  validateName: function(name){
    // 对名字name做些操作，你可以通过使用“this.regExForname”
    // 访问regExForName变量
  },
 
  validatePhoneNo: function(phoneNo){
    // 对电话号码做操作
  }
}
// 对象和方法一起申明
MYAPP.event = {
    addListener: function(el, type, fn) {
    //  代码
    },
   removeListener: function(el, type, fn) {
    // 代码
   },
   getEvent: function(e) {
   // 代码
   }
  
   // 还可以添加其他的属性和方法
}
//使用addListener方法的写法:
MYAPP.event.addListener("yourel", "type", callback);

JavaScript的核心包括几个对象，例如Math，Object，Array和String对象. 下面的示例演示如何使用Math对象的random（）方法获取随机数.

console.log(Math.random());

注意: 此示例和以下示例假定名为console.log的方法是全局定义的. console.log实际上并未包含在JavaScript中.

查看JavaScript内置对象的列表.

JavaScript中的每个对象都是Object的实例，并继承其所有属性和方法.

JavaScript是一种基于原型的语言. 它没有声明语句，例如在C ++或Java中使用的声明语句. 有时这会使习惯于使用类声明语句语言的程序员感到困惑. 相反，JavaScript可以将方法用作类. 定义类就像定义一个函数一样简单. 在下面的示例中，我们定义了一个新的Person类.

function Person() { } 
// 或
var Person = function(){ }

我们使用新的obj创建对象obj的新实例oop面向对象编程，并将结果（obj类型）分配给变量以供以后调用.

在下面的示例中，我们定义一个名为Person的类，然后创建Person的两个实例（person1和person2）.

function Person() { }
var person1 = new Person();
var person2 = new Person();

注意: 有一种新的实例化方法可以创建未初始化的实例，请参阅.

在实例化期间（即，创建对象实例时）调用构造函数. 构造函数是对象中的方法. 函数可以在JavaScript中用作构造函数，因此无需专门定义构造函数方法. 每个声明的函数都可以在实例化后调用和执行.

构造函数通常用于为对象属性分配值或为调用函数做准备. 本文稍后将描述，可以在定义期间或使用之前添加类中的方法.

在下面的示例中，构造函数在实例化Person类时调用警报函数.

function Person() {
  alert('Person instantiated');
}
var person1 = new Person();
var person2 = new Person();

属性是类中包含的变量；每个对象实例都有几个属性. 为了正确继承，应该在类的原型属性（函数）中定义属性.

您可以使用关键字this来调用类中的属性，这是对当前对象的引用. 从外部访问（读取/写入）其属性的语法为: InstanceName.Property;这与C ++，Java或许多其他语言中的语法相同（在类中，语法this.Property通常用于设置和获取属性值）

在下面的示例中，我们定义用于定义Person类的属性firstName，并在实例化它时分配一个初始值.

function Person(firstName) {
  this.firstName = firstName;
  alert('Person instantiated');
}
var person1 = new Person('Alice');
var person2 = new Person('Bob');
// Show the firstName properties of the objects
alert('person1 is ' + person1.firstName); // alerts "person1 is Alice"
alert('person2 is ' + person2.firstName); // alerts "person2 is Bob"

方法与属性非常相似，不同的是一个方法是一个函数，而另一个可以定义为一个函数. 调用方法与访问属性非常相似，不同之处在于add（）可能在方法名称之后具有参数. 要定义方法，您需要将一个函数分配给该类的prototype属性. 分配给函数的名称由对象用来在外部调用它.

在下面的示例中，我们为Person类定义方法sayHello（）并调用它.

function Person(firstName) {
  this.firstName = firstName;
}
Person.prototype.sayHello = function() {
  alert("Hello, I'm " + this.firstName);
};
var person1 = new Person("Alice");
var person2 = new Person("Bob");
// call the Person sayHello method.
person1.sayHello(); // alerts "Hello, I'm Alice"
person2.sayHello(); // alerts "Hello, I'm Bob"

在JavaScript中，方法通常是绑定到对象的普通函数，这意味着可以在其上下文之外调用该方法. 考虑以下示例中的代码:

function Person(firstName) {
  this.firstName = firstName;
}
Person.prototype.sayHello = function() {
  alert("Hello, I'm " + this.firstName);
};
var person1 = new Person("Alice");
var person2 = new Person("Bob");
var helloFunction = person1.sayHello;
person1.sayHello();                                 // alerts "Hello, I'm Alice"
person2.sayHello();                                 // alerts "Hello, I'm Bob"
helloFunction();                                    // alerts "Hello, I'm undefined" (or fails
                                                    // with a TypeError in strict mode)
console.log(helloFunction === person1.sayHello);          // logs true
console.log(helloFunction === Person.prototype.sayHello); // logs true
helloFunction.call(person1);                        // logs "Hello, I'm Alice"

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/jisuanjixue/article-286113-1.html