Javascript - Objects(对象)

首页 / JavaScript入门教程 / Javascript - Objects(对象)

JavaScript是一种面向对象的编程(OOP)语言,如果编程语言为开发人员提供四种基本函数,则可以称为面向对象的语言-

  • 封装      -  将相关信息存储在对象中。

  • 聚合      -  将一个对象存储在另一个对象中的函数。

  • 继承      - 一个类的某些属性和方法依赖于另一个类的函数。

  • 多态性  - 编写一种以多种不同方式工作的函数或方法。

对象由属性组成。如果属性包含函数,则将其视为对象的方法,否则视为属性。

对象属性

对象属性可以是三种原始数据类型中的任何一种,也可以是抽象数据类型中的任何一种,如另一个对象。对象属性通常是在对象的方法内部使用的变量,但也可以是在整个页面中使用的全局可见变量。

objectName.objectProperty=propertyValue;

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

var str=document.title;

对象方法

方法是让对象执行某项操作或让其完成某项操作的函数,函数和方法之间的区别很小-函数是语句的独立单元,并且方法附加到对象,并且可以通过 this 关键字引用。

以下是一个简单示例,展示了如何使用文档对象的 write()方法在文档上写入任何内容。

document.write("This is test");

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()的特殊构造函数来构建对象。 Object()构造函数的返回值分配给变量。

该变量包含对新对象的引用。

请尝试以下示例,它演示了如何创建对象。

<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 ="Learnfk";
      </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>

运行上面代码输出

Book name is : Perl 
Book author is : Learnfk

本示例演示了如何使用用户定义的函数创建对象。这里的 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", "Learnfk");
         document.write("Book title is : " + myBook.title + "<br>");
         document.write("Book author is : " + myBook.author + "<br>");
      </script>      
   </body>
</html>

运行上面代码输出

Book title is : Perl 
Book author is : Learnfk

定义对象方法

前面的示例演示了构造函数如何创建对象和分配属性,但是无涯教程需要通过为对象分配方法来完成其定义。

请尝试以下示例;它显示了如何与对象一起添加方法。

<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", "Learnfk");
         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>

运行上面代码输出

Book title is : Perl 
Book author is : Learnfk 
Book price is : 100

with 关键字

with关键字用作引用对象的属性或方法的一种简写形式。

指定为 with 的参数的对象将在随后的块持续时间内成为默认对象,可以使用该对象的属性和方法而无需命名该对象。

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

请尝试以下示例。

<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", "Learnfk");
         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>

运行上面代码输出

Book title is : Perl 
Book author is : Learnfk 
Book price is : 100

Native对象

JavaScript具有多个内置对象或native对象,这些对象可在程序中的任何位置访问,并且在任何操作系统中运行的任何浏览器中都将以相同的方式工作。

这是所有重要的 JavaScript native对象:

这一章《Javascript - Objects(对象)》你学到了什么?在下面做个笔记吧!做站不易,你的分享是对我们最大的支持

好记忆不如烂笔头。留下你的足迹吧 :)

猜你喜欢

Linux性能优化实战 -〔倪朋飞〕

全栈工程师修炼指南 -〔熊燚(四火)〕

玩转Vue 3全家桶 -〔大圣〕

攻克视频技术 -〔李江〕

计算器练习没有返回正确的输出

JS 内容生成问题

注入不纯函数与调用它有何不同?

自己的alert 执行两次

JS根据不同的数组内容动态构建If(条件)

在网页上加载小部件

视频教程

12-JavaScript没有块级作用域就 更多视频教程 »