javascript 类

简介: 准备工作: (一)js函数 Js函数基本的定义语法为: function 函数名(arg1,arg2,……) {} 和通常意义上的函数(方法)相似。可以有返回值。 例如: function noReturnValue(){    } function hasReturnVal...

准备工作:

(一)js函数

Js函数基本的定义语法为:

function 函数名(arg1,arg2,……)

{}

和通常意义上的函数(方法)相似。可以有返回值。

例如:

< script >

function  noReturnValue()
{    



function  hasReturnValue()
{
    
return   ' ok ' ;


function  doClick()
{
    alert(noReturnValue());
    alert(hasReturnValue());
}

< / script>

 

函数noReturnValue没有返回值,所以打印结果为:undefined

hasReturnValue返回ok字串。

(二)Function对象

ECMAScript有一类对象为:Function对象。它表示定义的任何函数(function

var function_name = new Function(arg1, arg2, ..., argN, function_body)

 

示例:

function  doClick2()
{
      
var  fun  =   new  
      Function(
" a1 " " alert(a1); " );

      fun(
' ok ' );
}

通过Function定义的函数对象,最后一个参数为函数体,前边的参数。两部分都以字符串类型存在。通过字符串的定义方式来定义较困难,但它指示函数是一种引用类型,函数是Function类型的一个实例,而函数名而是一个指向函数的变量。

(三)函数类型

可以通过typeof来得到js对象的类型。

示例一(类型):

function  doClick3()
{
    
var  fun  =   new  Function( " a1 " " alert(a1); " );
    alert(
" Object: " + typeof  (Object)  +   " \r\n "
    
+   " Date: "   +   typeof  (Date)  +   " \r\n "
    
+   " Array: "   +   typeof  (Array)  +   " \r\n "
    
+   " Function: "   +   typeof  (Function)  +   " \r\n "
    
+   " new Function(): "   +   typeof  ( new  Function())  +   " \r\n "
    
+   " function: "   +   typeof  (fun)  +   " \r\n "
 

    
+   " new Date(): "   +   typeof  ( new  Date())  +   " \r\n "
    
+   " new Array(): "   +   typeof  ( new  Array())  +   " \r\n "
    
+   " new Object(): "   +   typeof  ( new  Object())  +   " \r\n "
    );
}

 

 

对于对象来说它们的类型做为一种函数存在;创建完的对象除Function外,做为对象类型(object)存在。

 

示例二(构造方法):

function  doClick4()
{
    
var  fun  =   new  Function( " a1 " " alert(a1); " );
    alert(fun.constructor); 

    
var  obj  =   new  Array();
    alert(obj.constructor); 

    
var  i  =   0 ;
    alert(i.constructor);
 

    
var  num  =   new  Number();
    alert(num.constructor);
}

 

打印的内容除第一个外都是以function 函数名(){}。那么这些对象都是通过function定义的函数对象。函数对象可以构造对象。

 

而函数对象的构造方法为:

function Function(){

[native code]

}

 

示例三(函数对象构造对象):

function  doClick5()
{
    
var  no  =   new  Number();
    alert(
" 对象类型: "   +   typeof  (no)  +   " \r\n构造方法: "   +  no.constructor); 

    alert(
" 对象类型: "   +   typeof  (hasReturnValue)  +   " \r\n构造方法: "   +  hasReturnValue.constructor);
    
    
var  conobj  =  hasReturnValue();
    alert(
" 对象类型: "   +   typeof  (conobj)  +   " \r\n构造方法: "   +  conobj.constructor); 

    
var  fun  =   new  Function( " a1 " "" );
    
var  mess1  =   new  fun( ' ok ' );
    alert(
typeof  (fun));
    alert(
typeof  (mess1));
    alert(mess1.constructor);
}

 

No是一个对象;hasReturnValue是一个函数对象;fun是一个函数对象。函数对象可以构造对象,所以可以有:

var conobj = hasReturnValue();

var mess1 = new fun('ok');

 

类定义

javac#中,类可以存放数据,其中最基本的类型有属性、方法、域。在js中创建(js)类有相似的功能,它的类强调的是一种复合类型。它允许通过变量名进行读取(例如js函数名可做为变量名使用)。而进行访问时,通过键对值方式进行。在C#中,访问属性其实也是这样的,例如,Customer类有公有的Name属性性,其中Name属性有读写两个属性器。假设Name属性为静态属性,则可以通过Customer.Name来访问,赋值或得到值。从大的方面讲,是一种以KV对方式进行访问。

(一)   以大括号方式定义

例如:

var  customer  =  {};
var  product  =  
{
    name:
' mp3 ' ,
    price:
0
};

function  doClick()
{
    alert(
typeof  (customer));
    alert(
typeof  (product));
    alert(
typeof  (Date));
}

定义了两个js类:customerproduct。通过测试它们的类型(typeof),它们做为一种object类型存在。那么它们不可以通过new方式创建(函数对象可以创建对象,例如Date)。

 

(二)函数对象

示例一(类型):

函数对象可以创建对象,那么可以通过function来模拟类类型。

function  user()
{
    
this .username  =   '' ;
    userage 
=   0 ;


function  doClick2()
{
    alert(
typeof  (user));
    
var  user1  =   new  user();

    user1.username 
=   " 宋江 " ;
    alert(user1.username);
}

 

这里定义了一个user类(函数)

doClick事件(函数)中,可以得到user的类型为function,它可以用于创建对象,并可以访问。在user类中,有两个属性(也可以看做是域),其中username通过this关键字定义,userage是直接定义。创建完user对象后,即user1,可以访问usernameuserage

var user1 = new user();

user1.username = "宋江";

alert(user1.username);

 

示例二(为类添加函数):

function  user()
{
    
this .username  =   '' ;
    userage 
=   0 ;
    
this .showMessage  =   function ()
    {
        alert(
' user类的函数 ' );
    }
}

function  doClick3()
{
    
var  user1  =   new  user();
    user1.showMessage();
}

对于类中的函数来说,有私有和公有访问性。通过var定义的为私有函数,通过this定义的为公有函数。

示例三(属性定义与函数定义):

在通过function定义类类型时,其中的属性(区别类中的函数)可以通过三种修饰符进行,如下:

function  clsProperty()
{
    p1 
=   1 ;
    
var  p2  =   2 ;
    
this .p3  =   3 ;
}

function  doClick4()
{
    
var  cls  =   new  clsProperty(); 

    alert(cls.p1);
    alert(cls.p2);
    alert(cls.p3); 

    cls.p1 
=   1 ;
    cls.p2 
=   2 ;
    cls.p3 
=   3

    alert(cls.p1);
    alert(cls.p2);
    alert(cls.p3); 

    clsProperty.p1 
=   1 ;
    clsProperty.p2 
=   2 ;
    clsProperty.p3 
=   3 ;    

    alert(clsProperty.p1);
    alert(clsProperty.p2);
    alert(clsProperty.p3);
}

 

三种修饰中在添加this关键字时,具有良好的访问支持,但无修饰或var修饰时,不可以进行操作。Var是用于定义局部变量的关键字。在定义属性时,可以把它理解为私有访问修饰符,而this则可以理解为公有访问修饰符。

function  clsProperty1()
{
    p1 
=   function () { alert( ' p1 ' ); };
    
var  p2  =   function () { alert( ' p2 ' ); };
    
this .p3  =   function () { alert( ' p3 ' ); };
}

function  doClick5()
{
    
var  cls  =   new  clsProperty1(); 

    cls.p1();
    cls.p2();
    cls.p3(); 

    clsProperty1.p1();
    clsProperty1.p2();
    clsProperty1.p3();
}

 

P1为无修饰符,p2var修改符,p3this修饰符。在doClick5中,cls.p3()clsProperty1.p2()可以访问。所以,对于js类中的函数来讲:

Var修饰符类似C#中的静态方法(函数)修饰符;this类似实例方法(函数)修饰符。

所以对于js类中的属性来讲,也可以把varthis修饰符做为相似的比较:

Var修饰符用于私有属性修饰符;this类似公有属性修饰符。

 

 

(三)js类中的静态实现

function  user()
{
}

user.age 
=   30 ;
user.showAge 
=   function () { alert(user.age); } 

function  doClick()
{
    user.showAge();
    user.age 
=   20 ;
    user.showAge();
}

通过在类外进行设置,可以用于静态访问。

 

(四)js类中的实例实现

在上一篇中,通过this关键字实现实例属性和实例方法(函数)。还有一种通过prototype关键字实现。

function  user()
{
}

user.age 
=   30 ;
user.showAge 
=   function () { alert(user.age); }
 

user.prototype.showMessage 
=   function ()
{
    alert(
' 实例方法 ' );
}

function  doClick1()
{
    
var  user1  =   new  user();
    user1.showMessage();    
}

 

(五)构造方法

以上的例子中,创建类,构造方法都是无参数的。

function  user()
{

}

下边是个带参数的:

function  product(id, name, price)
{
    
this .id  =  id;
    
this .name  =  name;
    
this .price  =  price;
}

在调用进,分为两种情况:

情况一:正好符合参数个数,正常调用;情况二:少参数,则从左到右匹配,没有匹配的为未定义;情况三:多参数,按正常匹配。

function  product(id, name, price)
{
    
this .id  =  id;
    
this .name  =  name;
    
this .price  =  price;
    
this .getString  =   function ()
    {
        
return ( " id: " + this .id + "  name: " + this .name + "  price: " + this .price);
    }
}


function  doClick2()
{
    
var  pro1  =   new  product( 1 , ' mp3 ' , 100 );
    alert(pro1.getString()); 

    
var  pro2  =   new  product();
    alert(pro2.getString()); 

    
var  pro3  =   new  product( 1 );
    alert(pro3.getString()); 

    
var  pro4  =   new  product( 1 ' mp3 ' );
    alert(pro4.getString());
}

 

博客园大道至简

http://www.cnblogs.com/jams742003/

转载请注明:博客园

目录
相关文章
|
16天前
|
人工智能 JSON 供应链
畅用7个月无影 JVS Claw |手把手教你把JVS改造成「科研与产业地理情报可视化大师」
LucianaiB分享零成本畅用JVS Claw教程(学生认证享7个月使用权),并开源GeoMind项目——将JVS改造为科研与产业地理情报可视化AI助手,支持飞书文档解析、地理编码与腾讯地图可视化,助力产业关系图谱构建。
23521 12
畅用7个月无影 JVS Claw |手把手教你把JVS改造成「科研与产业地理情报可视化大师」
|
4天前
|
Shell API 开发工具
Claude Code 快速上手指南(新手友好版)
AI编程工具卷疯啦!Claude Code凭借任务驱动+终端原生的特性,成了开发者的效率搭子。本文从安装、登录、切换国产模型到常用命令,手把手带新手快速上手,全程避坑,30分钟独立用起来。
1293 7
|
5天前
|
人工智能 BI 持续交付
Claude Code 深度适配 DeepSeek V4-Pro 实测:全场景通关与真实体验报告
在 AI 编程工具日趋主流的今天,Claude Code 凭借强大的任务执行、工具调用与工程化能力,成为开发者与自动化运维的核心效率工具。但随着原生模型账号稳定性问题频发,寻找一套兼容、稳定、能力在线的替代方案变得尤为重要。DeepSeek V4-Pro 作为新一代高性能大模型,提供了完整兼容 Claude 协议的 API 接口,只需简单配置即可无缝驱动 Claude Code,且在任务执行、工具调用、复杂流程处理上表现极为稳定。
1404 3
|
10天前
|
人工智能 缓存 Shell
Claude Code 全攻略:命令大全 + 实战工作流(完整版)
Claude Code 是一款运行在终端环境下的 AI 编码助手,能够直接在项目目录中理解代码结构、编辑文件、执行命令、执行开发计划,并支持持久化记忆、上下文压缩、后台任务、多模型切换等专业能力。对于日常开发、项目维护、快速重构、代码审查等场景,它可以大幅减少手动操作、提升编码效率。本文从常用命令、界面模式、核心指令、记忆机制、图片处理、进阶工作流等维度完整说明,帮助开发者快速上手并稳定使用。
2552 4
|
3天前
|
人工智能 JSON BI
DeepSeek V4-Pro 接入 Claude Code 完全实战:体验、测试与关键避坑指南
Claude Code 作为当前主流的 AI 编程辅助工具,凭借强大的代码理解、工程执行与自动化能力深受开发者喜爱,但原生模型的使用成本相对较高。为了在保持能力的同时进一步降低开销,不少开发者开始寻找兼容度高、价格更友好的替代模型。DeepSeek V4 系列的发布带来了新的选择,该系列包含 V4-Pro 与 V4-Flash 两款模型,并提供了与 Anthropic 完全兼容的 API 接口,理论上只需简单修改配置,即可让 Claude Code 无缝切换为 DeepSeek 引擎。
967 0
|
20天前
|
人工智能 缓存 BI
Claude Code + DeepSeek V4-Pro 真实评测:除了贵,没别的毛病
JeecgBoot AI专题研究 把 Claude Code 接入 DeepSeek V4Pro,跑完 Skills —— OA 审批、大屏、报表、部署 5 大实战场景后的真实体验 ![](https://oscimg.oschina.net/oscnet/up608d34aeb6bafc47f
6080 22
Claude Code + DeepSeek V4-Pro 真实评测:除了贵,没别的毛病
|
21天前
|
人工智能 JSON BI
DeepSeek V4 来了!超越 Claude Sonnet 4.5,赶紧对接 Claude Code 体验一把
JeecgBoot AI专题研究 把 Claude Code 接入 DeepSeek V4Pro 的真实体验与避坑记录 本文记录我将 Claude Code 对接 DeepSeek 最新模型(V4Pro)后的真实体验,测试了 Skills 自动化查询和积木报表 AI 建表两个场景——有惊喜,也踩
7339 18