当前位置：极客教程 > JavaScript > JavaScript 精品教程 > JavaScript 对象概述

JavaScript 对象概述

JavaScript 对象概述

JavaScript 是一种面向对象编程（OOP）语言。如果编程语言为开发人员提供四种基本能力，则可以称之为面向对象的语言-

  • 封装 - 能够将相关信息（数据或方法）一起存储在对象中的能力。

  • 聚合 - 能够将一个对象存储在另一个对象内的能力。

  • 继承 - 类依赖于另一个类（或多个类）的属性和方法的能力。

  • 多态 - 能够以多种不同的方式编写一个函数或方法的能力。

对象由属性组成。如果属性包含一个函数，则被视为对象的方法；否则，该属性被视为属性。

对象属性

对象属性可以是三种基本数据类型之一，或者是另一个对象等抽象数据类型。对象属性通常是在对象的方法中内部使用的变量，但也可以是在整个页面中可见的全局变量。

向对象添加属性的语法为 –

objectName.objectProperty = propertyValue;
JavaScript

例如 - 以下代码使用 “title” 属性获取文档标题 document 对象。

var str = document.title;
JavaScript

对象方法

方法是让对象执行某些操作或对其执行某些操作的功能。函数和方法之间有一点小差异 – 函数是一个独立的语句单元，而方法附属在一个对象上，并可以通过 this 关键字调用。

方法可用于从屏幕上显示对象的内容到对一组局部属性和参数执行复杂的数学运算。

例如 - 下面是一个简单的示例，展示如何使用文档对象的 write() 方法在文档中编写任意内容。

document.write("This is test");
JavaScript

用户自定义对象

所有用户自定义对象和内置对象都是一个叫做 Object 的对象的子类。

new运算符

new 运算符用于创建一个对象实例。要创建一个对象，可以使用 new 后面跟着构造方法。

在下面的示例中，构造方法是Object()，Array()和Date()。这些构造方法是内置的JavaScript函数。

var employee = new Object();
var books = new Array("C++", "Perl", "Java");
var day = new Date("August 15, 1947");
JavaScript

Object()构造函数

构造函数是一个用来创建和初始化对象的函数。JavaScript提供了一个特殊的构造函数 Object() 来构建对象。 Object() 构造函数的返回值被赋给一个变量。

变量包含对新对象的引用。分配给对象的属性不是变量，并不使用 var 关键字定义。

示例1

尝试下面的示例，它演示了如何创建一个对象。

<html>
   <head>
      <title>User-defined objects</title>     
      <script type = "text/javascript">
         var book = new Object();   // Create the object
         book.subject = "Perl";     // Assign properties to the object
         book.author  = "Mohtashim";
      </script>      
   </head>

   <body>  
      <script type = "text/javascript">
         document.write("Book name is : " + book.subject + "<br>");
         document.write("Book author is : " + book.author + "<br>");
      </script>   
   </body>
</html>
JavaScript

输出

Book name is : Perl 
Book author is : Mohtashim
JavaScript

示例2

该示例演示了如何使用用户定义的函数创建一个对象。这里使用 this 关键字来引用传递给函数的对象。

<html>
   <head>   
   <title>User-defined objects</title>
      <script type = "text/javascript">
         function book(title, author) {
            this.title = title; 
            this.author  = author;
         }
      </script>      
   </head>

   <body>   
      <script type = "text/javascript">
         var myBook = new book("Perl", "Mohtashim");
         document.write("Book title is : " + myBook.title + "<br>");
         document.write("Book author is : " + myBook.author + "<br>");
      </script>      
   </body>
</html>
JavaScript

输出

Book title is : Perl 
Book author is : Mohtashim
JavaScript

为对象定义方法

前面的示例展示了构造函数如何创建对象并分配属性。但是我们需要通过为对象分配方法来完善对象的定义。

示例

尝试以下示例；它展示了如何在对象中添加一个函数。

<html>

   <head>
   <title>User-defined objects</title>
      <script type = "text/javascript">
         // Define a function which will work as a method
         function addPrice(amount) {
            this.price = amount; 
         }

         function book(title, author) {
            this.title = title;
            this.author  = author;
            this.addPrice = addPrice;  // Assign that method as property.
         }
      </script>      
   </head>

   <body>   
      <script type = "text/javascript">
         var myBook = new book("Perl", "Mohtashim");
         myBook.addPrice(100);

         document.write("Book title is : " + myBook.title + "<br>");
         document.write("Book author is : " + myBook.author + "<br>");
         document.write("Book price is : " + myBook.price + "<br>");
      </script>      
   </body>
</html>
JavaScript

输出

Book title is : Perl 
Book author is : Mohtashim 
Book price is : 100
JavaScript

‘with’关键字

‘with’ 关键字被用作一种简写方式，用于引用对象的属性或方法。

作为参数指定的对象成为接下来代码块的默认对象。可以在不命名对象的情况下使用对象的属性和方法。

语法

with对象的语法如下所示−

with (object) {
   properties used without the object name and dot
}
JavaScript

示例

尝试下面的示例。

<html>
   <head>
   <title>User-defined objects</title>   
      <script type = "text/javascript">
         // Define a function which will work as a method
         function addPrice(amount) {
            with(this) {
               price = amount;
            }
         }
         function book(title, author) {
            this.title = title;
            this.author = author;
            this.price = 0;
            this.addPrice = addPrice;  // Assign that method as property.
         }
      </script>      
   </head>

   <body>   
      <script type = "text/javascript">
         var myBook = new book("Perl", "Mohtashim");
         myBook.addPrice(100);

         document.write("Book title is : " + myBook.title + "<br>");
         document.write("Book author is : " + myBook.author + "<br>");
         document.write("Book price is : " + myBook.price + "<br>");
      </script>      
   </body>
</html>
JavaScript

输出

Book title is : Perl 
Book author is : Mohtashim 
Book price is : 100
JavaScript

JavaScript本地对象

JavaScript有几个内置或本地对象。这些对象可以在程序的任何地方访问，并且在任何操作系统中运行的任何浏览器中都能以相同的方式工作。

下面是所有重要的JavaScript本地对象的列表：

  • JavaScript Number对象

  • JavaScript Boolean对象

  • JavaScript String对象

  • JavaScript Array对象

  • JavaScript Date对象

  • JavaScript Math对象

  • JavaScript RegExp对象

Python教程

Python 教程

Python 教程
Tkinter 教程

Tkinter 教程
Pandas 教程

Pandas 教程
NumPy 教程

NumPy 教程
Flask 教程

Flask 教程
Django 教程

Django 教程
PySpark 教程

PySpark 教程
wxPython 教程

wxPython 教程
SymPy 教程

SymPy 教程
Seaborn 教程

Seaborn 教程
SciPy 教程

SciPy 教程
RxPY 教程

RxPY 教程
Pycharm 教程

Pycharm 教程
Pygame 教程

Pygame 教程
PyGTK 教程

PyGTK 教程
PyQt 教程

PyQt 教程
PyQt5 教程

PyQt5 教程
PyTorch 教程

PyTorch 教程
Matplotlib 教程

Matplotlib 教程
Web2py 教程

Web2py 教程
BeautifulSoup 教程

BeautifulSoup 教程

Java教程

Java 教程

Java 教程

Web教程

HTML 教程

HTML 教程
CSS 教程

CSS 教程
CSS3 教程

CSS3 教程
jQuery 教程

jQuery 教程
Ajax 教程

Ajax 教程
AngularJS 教程

AngularJS 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程
Laravel 教程

Laravel 教程
Next.js 教程

Next.js 教程
PhantomJS 教程

PhantomJS 教程
Three.js 教程

Three.js 教程
Underscore.JS 教程

Underscore.JS 教程
WebGL 教程

WebGL 教程
WebRTC 教程

WebRTC 教程
VueJS 教程

VueJS 教程

数据库教程

SQL 教程

SQL 教程
MySQL 教程

MySQL 教程
MongoDB 教程

MongoDB 教程
PostgreSQL 教程

PostgreSQL 教程
SQLite 教程

SQLite 教程
Redis 教程

Redis 教程
MariaDB 教程

MariaDB 教程

图形图像教程

Vulkan 教程

Vulkan 教程
OpenCV 教程

OpenCV 教程

大数据教程

R语言 教程

R语言 教程

开发工具教程

Git 教程

Git 教程
VSCode 教程

VSCode 教程
Docker 教程

Docker 教程
Gerrit 教程

Gerrit 教程
Excel 教程

Excel 教程

计算机教程

Go语言 教程

Go语言 教程
C++ 教程

C++ 教程

JavaScript 精品教程

登录

找回密码？

注册