JavaScript编程用法——类的定义

浅浅的花香味﹌ 2022-01-23 06:27 276阅读 0赞

### 文章目录 ###

*  函数定义
 *  class定义
 *   *  构造器constructor
     *  原型prototype
 *  继承
 *   *  原型继承：prototype
     *  关键字继承：extends
     *  关键字继承：call

# 函数定义 #

由于JavaScript中，函数本身也可以是一个变量的特性，在var内定义成一个类。  
成员变量需要用this引用；  
默认值定义借助或运算确定。

源码

执行结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4bmdfd29yaw_size_16_color_FFFFFF_t_70]  
由于privatenum、private\_func定义的方式与前面的成员和方法不同，导致外部不能直接访问，就像C++的私有定义，这些外部不能改变或访问。

# class定义 #

和C++一样。通过关键字声明一个类，类的构造函数为constructor

源码

class CTestClass {
    	    constructor(num,str) {
    		this.index = num || 0;
    		this.name = str || "class default";
    	}
    
    	show(){
    		console.log("index : " + this.index + "\nName : " + this.name);
    	}
    }
    
    var CTest = new CTestClass(5,"zxCTest");
    console.log("class name : " + CTest.name);
    CTest.show();
    
    var CDefaultTest = new CTestClass;
    CDefaultTest.show();

执行结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4bmdfd29yaw_size_16_color_FFFFFF_t_70 1]  
在类的定义中函数不包含function关键字修饰

## 构造器constructor ##

JavaScript的构造函数用constructor修饰，调用时返回创建该对象的函数的引用，即该变量被赋予的定义。

源码

//变量
    var strname = "ZXTest";
    console.log("constructor is " + strname.constructor);
    console.log("value is " + (strname.constructor === String));
    
    var arrayvalue = [58,"ZX Test", 'V'];
    console.log("constructor is " + arrayvalue.constructor);
    console.log("value is " + (arrayvalue.constructor === Array));
    
    var numvalue = 23;
    console.log("constructor is " + numvalue.constructor);
    console.log("value is " + (numvalue.constructor === Number)); 
    
    var Objvalue = {
    	strname: "ZX Test",
    	sinum: 2.71828,
    	
    	functest: function stfunc(){ return true;}
    };
    console.log("constructor is " + Objvalue.constructor);
    
    //函数
    var funcvalue = function(){
    	return "Function name";
    }
    console.log("constructor is " + funcvalue.constructor);
    
    function getName(){
    	return "Function name";
    }
    console.log("constructor is " + getName.prototype.constructor);
    
    var funcvalue1 = getName();
    var funcvalue2 = getName;
    var funcvalue3 = new getName();
    console.log("constructor is " + funcvalue1.constructor);
    console.log("constructor is " + funcvalue2.constructor);
    console.log("constructor is " + funcvalue3.constructor);

执行结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4bmdfd29yaw_size_16_color_FFFFFF_t_70 2]

## 原型prototype ##

每个函数都有一个prototype的属性，该属性指向函数对象本身。通过prototype可以拓展函数的方法和变量。

源码

执行结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4bmdfd29yaw_size_16_color_FFFFFF_t_70 3]

# 继承 #

## 原型继承：prototype ##

通过对关键字prototype的使用，该关键字可以用来进行类继承的改造，由于JavaScript的特性，这个过程是动态调整的。

源码

执行结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4bmdfd29yaw_size_16_color_FFFFFF_t_70 4]

## 关键字继承：extends ##

在用class关键字定义的类中通过关键字extends进行继承

源码

class CTestClass {
    	constructor(num,str) {
    		this.index = num || 0;
    		this.name = str || "class default";
    	}
    
    	show(){
    		console.log("index : " + this.index + "\nName : " + this.name);
    	}
    }
    
    class CExtClass extends CTestClass{
    	constructor(num,str) {
    		super(num);
    		this.strname = "Extends";
    	}
    }
    
    var CTest = new CExtClass(5,"zxCTest");
    console.log("class name : " + CTest.name);
    console.log("class ext name : " + CTest.strname);
    CTest.show();

执行结果  
![在这里插入图片描述][20190602210419501.png]

## 关键字继承：call ##

由于调用call可以改变this指针的特性，因此用call当做类的继承。

源码

执行结果  
![在这里插入图片描述][2019060221052749.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4bmdfd29yaw_size_16_color_FFFFFF_t_70]: /images/20220123/89e24880ae6c4653a97afd1779d5ee7f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4bmdfd29yaw_size_16_color_FFFFFF_t_70 1]: /images/20220123/018cf9cd51b645c09a2a24cf47b7fb8f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4bmdfd29yaw_size_16_color_FFFFFF_t_70 2]: /images/20220123/417bdd84a7b64391aca46fb9d1cfeeca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4bmdfd29yaw_size_16_color_FFFFFF_t_70 3]: /images/20220123/83d9f6cce29f4deea5c93d5fde59010e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4bmdfd29yaw_size_16_color_FFFFFF_t_70 4]: /images/20220123/2071725bf07a457babb06aefdacc8977.png
[20190602210419501.png]: /images/20220123/bded5690c09545e9a65a779fb47ce160.png
[2019060221052749.png]: /images/20220123/7cfc303b8f5d4ad597fa033dd0e69f69.png