Javascript - Objects(对象)

首页 / 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(对象)》你学到了什么?在下面做个笔记吧!做站不易,你的分享是对我们最大的支持

相关文章

深入浅出gRPC -〔李林锋 - 6讲〕

网络编程实战 -〔盛延敏 - 40讲〕

安全攻防技能30讲 -〔何为舟 - 41讲〕

林外 · 专利写作第一课 -〔林外 - 10讲〕

如何用php数组值替换jquery变量值

构造函数作为对象键

如何使用 Jquery 访问 JSON 的“对象”部分?

在提交表单之前询问用户

Spread Syntax 创建浅拷贝还是深拷贝?

画布 putimagedata 有时不会像预期的那样绘制

视频推荐〔JavaScript - 15-流程控制分支结构导读〕

更多视频 »
好记忆不如烂笔头。留下你的足迹吧 :)