Logo

郎哥编程

自定义类和对象

2020-12-06 147

JavaScript是面向对象的语言,在JavaScript中,所有事物都是对象。对象有属性和方法,定义对象属性和方法的数据结构称为类,类实例化后称为对象。

前面介绍的String、Number、Array等类型是JS内置的类和对象,开发者在编写JS程序的过程中,也需要定义程序自身使用的类和对象。下面介绍几种常用的创建类和对象的方法。

1、  变量赋值方式

该方式在定义类的同时,将类实例化为对象并赋值给一个变量,被赋值的变量就是该类的实例化对象。

例如:

<script type="text/javascript">
  var book = {
      name:"java基础教程",
     pub:"IT出版社",
     pageNum:310,
     show:function(){
     alert(this.name);
    }
  }
            
  function add(){
    book.show()
  }
</script>

案例代码定义了一个匿名类(类没有名称),该类有name、pub、pageNum三个属性,该类只有一个方法,方法名称为show。

this是JS关键字,它是类当前实例对象的引用,使用this关键字可以访问类当前实例对象的属性和方法。

使用该方式创建的匿名类不能使用new运算符实例化对象。

2、  函数方式

使用函数来定义类,类的属性值可以通过函数参数传入,代码调用函数名称将类实例化为对象。

例如:

<script type="text/javascript">
   // 函数方式
   function book(name,pub,num) {
     var obj = new Object();
     obj.name = name;
     obj.pub = pub;
     obj.pageNum = num;
     obj.show = function(){
     alert(obj.name);
   };
   return obj;
  }
            
  function book_test(){
    var obj = book("Java编程基础","IT出版社",300);
    obj.show()
  }
</script>

案例代码在函数内部创建一个Object对象,并在Object对象基础上,添加自定义的属性和方法,然后返回此Object对象。

book函数传入了三个参数,分别赋值给自定义对象的三个属性,函数也可以不传入任何参数,自定义对象的属性值可以赋默认值,或在程序中赋值。

注意:Objec对象是Object类的实例化,Object类是JS最顶层的类,JS的内置类型,开发者自定义的类都默认继承Object类。

3 、 构造函数方式

构造函数是类提供的一种特殊方法,该方法在类实例化时被调用,且仅调用一次,用于对类进行初始化操作。

在JS语言中,可以直接定义类的构造函数,类的名称就是构造函数的名称,构造函数的定义语法和普通函数相同。

例如:

<script type="text/javascript">
 
  // 构造函数方式
  function book(name,pub,num) {
     this.name = name;
     this.pub = pub;
     this.pageNum = num;
     this.show = function(){
     alert(this.name);
    };
  }
            
  function book_test(){
     // 实例化book对象
    var obj = new book("Java编程基础","IT出版社",300);
    // 调用book对象的show()方法
    obj.show()
    // 修改book对象的name属性
    obj.name = "Python编程基础"
    obj.show()
  }
            
</script>

案例代码定义了book函数,该函数是book类的构造函数,函数名称就是类的名称。在构造函数内部使用this关键字来定义book类的属性和方法。

4、  原型方式

原型方式就是预先定义一个空类,仅有类名,没有类的属性和方法。在使用该类时,根据实际情况添加类的属性和方法。

例如:

<script type="text/javascript">
 
  // 原型方式
  // 定义一个空book类
  function book() {
  }
            
  function book_test(){
            
   // 添加类的属性和方法
   book.prototype.name = "";
   book.prototype.pub = "";
   book.prototype.pageNum = 0;
   book.prototype.show = function(){
   alert(this.name);
  };
                    
  // 实例化book对象obj1
    var obj1 = new book();
    // 属性赋值
    obj1.name = "Java编程基础";
    obj1.pub = "IT出版社";
    obj1.pageNum = 300;
    // 调用show()方法
    obj1.show()
                    
    // 实例化book对象obj2
     var obj2 = new book();
    // 属性赋值
    obj2.name = "Pyhton编程基础";
     obj2.pub = "计算机出版社";
    obj2.pageNum = 610;
    // 调用show()方法
    obj2.show()
                    
 }
            
</script>

prototype是Object的属性,每个JS类都具有prototype属性,使用prototype属性可以向对象添加属性和方法。

5、  构造函数原型方式

该种方式将构造函数和原型方式联合起来使用,增加了JS对象的灵活性。在构造函数内定义类通用的属性和方法,当类用于不同场景时,使用类的prototype属性添加与应用场景相关的属性和方法。

例如:

<script type="text/javascript">
 
  // 使用构造函数定义book类
  function book(name,pub,num) {
    this.name = name;
    this.pub = pub;
    this.pageNum = num;
    this.show = function(){
      alert(this.name);
     };
  }
            
  function book_test(){
   
    // 在不同应用场景下添加不同的属性和方法
    // 电子书场景
    book.prototype = {
     // 调用book的构造函数
     constructor:book,
     // 添加文件格式属性
     format:"PDF",
    // 添加输出格式方法
    show_format:function() {
      alert(this.format);
     }
      }
 
    var obj = new book("JavaScript编程基础", "IT出版社", 300);
      obj.show();
      obj.show_format();
                                  
   }
                           
</script>

constructor是Object类属性,每个JS类都具有constructor属性,该属性存储指向类函数的一个引用。

将constructor属性赋值为book类构造函数的引用,当实例化添加属性和方法的book对象时,constructor属性存储的book类的构造函数被调用,即book类的通用属性被初始化。

6、  检测对象

有时需要检测实例对象的类型,即检测该对象是否是某个类的实例。在JS中使用instanceof运算符进行检查,具体用法为:

obj instanceof Class

其中obj是实例对象,Class是类名,运算结果是布尔类型。若obj是Class的实例对象,运算结果返回true,否则运算结果返回false。

例如:

<script type="text/javascript">
 
  // 定义book类
  function book(name,pub,num) {
    this.name = name;
    this.pub = pub;
    this.pageNum = num;
    this.show = function(){
      alert(this.name);
    };
  }
           
 // 定义apple类
 function apple(product) {
    this.product = product;
    this.show = function(){
       alert(this.product);
    };
 }
           
           
 function obj_test(){
   var obj1 = new book("Java编程基础","IT出版社",300);
   var obj2 = new apple("红富士");
   alert(obj1 instanceof book);
   alert(obj1 instanceof apple);
   alert(obj2 instanceof apple);
                                 
 }
           
 </script>


代码在线纠错(通义千问 qwen-max)

支持粘贴多个代码文件,提交后由阿里云通义千问自动分析代码漏洞、语法错误、逻辑问题并给出修改建议。
您已解锁 AI 代码纠错功能,可正常使用!

评论区

登录 后发表评论
暂无评论