`

javascrip方法和类的调用

阅读更多
[color=green][/color][align=left][/align]一直在做ooP所以对javascrip前端这种技术不是很属性,一直是面向对象的思想考虑,现在看看javascrip的不同。
首先说说类,在一个类里我们会有以下的几个特征:
1. 公有方法
2. 私有方法
3. 属性
4. 私有变量
5. 析构函数
我们直接看一个例子:

/***定义类***/
var Class = function(){
    var _self = this;//把本身引用负值到一变量上

    var _Field = "Test Field"; //私有字段
    var privateMethod = function(){ //私有方法
        alert(_self.Property); //调用属性
    }

    this.Property = "Test Property"; //公有属性
    this.Method = function(){ //公有方法
        alert(_Field); //调用私用字段
        privateMethod(); //调用私用方法
    }
}

这里我已把注释都写上,大家大概也会一眼就看得明白。对于少写JS的朋友,可能会觉得奇怪为什么我会定义一个_self的变量, 因为在js里,this不用对于其他的对象语言,他的解析过程与运行过程中this会改变的。这里简单说说js里this的定义,若有需要我可以开多一篇。
定义:this是包含它的函数作为方法被调用时所属的对象。
特征:this的环境可以随着函数被赋值给不同的对象而改变!
有兴趣的朋友可以网上找找资料了解一下,说回正题,这里的_self目的是为了开多一个私有的变量,把引用直接指向类的本身。
刚刚还说到一个析构函数的问题,这可以直接用代码来实现。在函数的最后直接写执行代码就OK。

/***定义类***/
var Class = function(){
    var _self = this;//把本身引用负值到一变量上

    var _Field = "Test Field"; //私有字段
    var privateMethod = function(){ //私有方法
        alert(_self.Property); //调用属性
    }

    this.Property = "Test Property"; //公有属性
    this.Method = function(){ //公有方法
        alert(_Field); //调用私用字段
        privateMethod(); //调用私用方法
    }

    /***析构函数***/
    var init = function(){
        privateMethod();
    }
    init();
}

使用这个类
var c = new Class();
c.Method(); //使用方法
这样就OK了



Javascript本身并不支持面向对象,它没有访问控制符,它没有定义类的关键字class,它没有支持继承的extend或冒号,它也没有用来支持虚函数的virtual,不过,Javascript是一门灵活的语言,下面我们就看看没有关键字class的Javascript如何实现类定义,并创建对象。

一:定义类并创建类的实例对象
在Javascript中,我们用function来定义类,如下:

function Shape()
{
var x=1;
var y=2;
}

你或许会说,疑?这个不是定义函数吗?没错,这个是定义函数,我们定义了一个Shape函数,并对x和y进行了初始化。不过,如果你换个角度来看,这个就是定义一个Shape类,里面有两个属性x和y,初始值分别是1和2,只不过,我们定义类的关键字是function而不是class。

然后,我们可以创建Shape类的对象aShape,如下:

var aShape = new Shape();

二:定义公有属性和私有属性
我们已经创建了aShape对象,但是,当我们试着访问它的属性时,会出错,如下:

aShape.x=1;

这说明,用var定义的属性是私有的。我们需要使用this关键字来定义公有的属性

function Shape()
{
this.x=1;
this.y=2;
}

这样,我们就可以访问Shape的属性了,如。

aShape.x=2;

好,我们可以根据上面的代码总结得到:用var可以定义类的private属性,而用this能定义类的public属性。

三:定义公有方法和私有方法

在Javascript中,函数是Function类的实例,Function间接继承自Object,所以,函数也是一个对象,因此,我们可以用赋值的方法创建函数,当然,我们也可以将一个函数赋给类的一个属性变量,那么,这个属性变量就可以称为方法,因为它是一个可以执行的函数。代码如下:

function Shape()
{
var x=0;
var y=1;
this.draw=function()
{
//print;
};
}

我们在上面的代码中定义了一个draw,并把一个function赋给它,下面,我们就可以通过aShape调用这个函数,OOP中称为公有方法,如:

aShape.draw();

如果用var定义,那么这个draw就变成私有的了,OOP中称为私有方法,如

function Shape()
{
var x=0;
var y=1;
var draw=function()
{
//print;
};
}
这样就不能使用aShape.draw调用这个函数了。

三:构造函数
Javascript并不支持OOP,当然也就没有构造函数了,不过,我们可以自己模拟一个构造函数,让对象被创建时自动调用,代码如下:

function Shape()
{
var init = function()
{
//构造函数代码
};

init();
}

在Shape的最后,我们人为的调用了init函数,那么,在创建了一个Shape对象是,init总会被自动调用,可以模拟我们的构造函数了。

四:带参数的构造函数
如何让构造函数带参数呢?其实很简单,将要传入的参数写入函数的参数列表中即可,如

function Shape(ax,ay)
{
var x=0;
var y=0;
var init = function()
{
//构造函数
x=ax;
y=ay;
};

init();
}

这样,我们就可以这样创建对象:

var aShape = new Shape(0,1);

五:静态属性和静态方法
在Javascript中如何定义静态的属性和方法呢?如下所示

function Shape(ax,ay)
{
var x=0;
var y=0;
var init = function()
{
//构造函数
x=ax;
y=ay;
};

init();
}
Shape.count=0;//定义一个静态属性count,这个属性是属于类的,不是属于对象的。
Shape.staticMethod=function(){};//定义一个静态的方法

有了静态属性和方法,我们就可以用类名来访问它了,如下

alert ( aShape.count );
aShape.staticMethod();
注意:静态属性和方法都是公有的,目前为止,我不知道如何让静态属性和方法变成私有的~

六:在方法中访问本类的公有属性和私有属性

在类的方法中访问自己的属性,Javascript对于公有属性和私有属性的访问方法有所不同,请大家看下面的代码

function Shape(ax,ay)
{
var x=0;
var y=0;
this.gx=0;
this.gy=0;
var init = function()
{
x=ax;//访问私有属性,直接写变量名即可
y=ay;
this.gx=ax;//访问公有属性,需要在变量名前加上this.
this.gy=ay;
};

init();
}

七:this的注意事项
根据笔者的经验,类中的this并不是一直指向我们的这个对象本身的,主要原因还是因为Javascript并不是OOP语言,而且,函数和类均用function定义,当然会引起一些小问题。
this指针指错的场合一般在事件处理上面,我们想让某个对象的成员函数来响应某个事件,当事件被触发以后,系统会调用我们这个成员函数,但是,传入的this指针已经不是我们本身的对象了,当然,这时再在成员函数中调用this当然会出错了。
解决方法是我们在定义类的一开始就将this保存到一个私有的属性中,以后,我们可以用这个属性代替this。我用这个方法使用this指针相当安全,而且很是省心~
我们修改一下代码,解决this问题。对照第六部分的代码看,你一定就明白了

function Shape(ax,ay)
{
var _this=this; //把this保存下来,以后用_this代替this,这样就不会被this弄晕了
var x=0;
var y=0;
_this.gx=0;
_this.gy=0;
var init = function()
{
x=ax;//访问私有属性,直接写变量名即可
y=ay;
_this.gx=ax;//访问公有属性,需要在变量名前加上this.
_this.gy=ay;
};

init();
}
分享到:
评论

相关推荐

    C#与JAVASCRIPT函数的相互调用 C#调用JAVASCRIPT函数的调用 JAVASCRIPT调用C#函数的调用

    C#与JAVASCRIPT函数的相互调用 C#调用JAVASCRIPT函数的调用 JAVASCRIPT调用C#函数的调用

    vbscript和javascript互相调用方法

    -- JavaScript调用VBScript函数 --> document.write(FormatValue(1234.56)) ``` 然而,这种直接在HTML中嵌入VBScript的做法在安全性方面存在隐患,并且在现代Web开发实践中不推荐使用。 ### 数组转换:VBScript...

    javascript调用delphi中的函数

    标题“javascript调用delphi中的函数”涉及到的技术领域是跨语言通信,具体是JavaScript与Delphi之间的交互。这种交互通常发生在Web应用程序与桌面应用程序的集成,或者在浏览器扩展和本地资源之间。以下是对这一...

    android webview中使用Java调用JavaScript方法并获取返回值

    如果需要在WebView中启用JavaScript调用Android代码的功能,还要在addJavascriptInterface()方法中声明一个Java类的实例,并为其指定一个可以在JavaScript中访问的接口名字。 在Java代码中定义一个内部类,用于接收...

    javascript后台调用的工具类

    3. **日期和时间处理**:JavaScript的Date对象可能与C#的DateTime类不完全兼容,工具类可能提供了适应后台环境的日期和时间处理方法。 4. **字符串操作**:提供常用的字符串处理函数,如格式化、查找、替换等。 5....

    cefsharp JavaScript调用C#方法并返回参数

    本文将深入探讨如何利用CEFSharp实现JavaScript调用C#方法,并获取返回的参数。 首先,理解CEFSharp的工作原理至关重要。CEFSharp是Chromium Embedded Framework(CEF)的.NET封装,而CEF是一个开源项目,用于在...

    javascript 直接调用OC 方法demo

    总结,JavaScript调用Objective-C方法的实现依赖于JavaScriptCore框架,通过JSContext、JSExport协议以及桥接方法实现跨语言通信。这种方法在混合开发中非常有用,允许开发者利用Web技术构建用户界面,同时充分利用...

    在javascript函数中调用com组件的属性和方法

    在javascript函数中调用com组件的属性和方法 在JavaScript函数中调用COM组件的属性和方法是指在JavaScript代码中使用COM组件提供的属性和方法来实现各种功能。本文将介绍如何在JavaScript函数中调用COM组件的属性和...

    QT和网页中的JavaScript函数进行相互调用的实现

    2. **JavaScript调用QT函数**: - 在QT中定义一个槽函数,例如`handleJsCall`,然后使用`QWebChannel`来创建一个通信通道,让JavaScript可以调用这个槽函数。 - 首先,创建一个继承自`QObject`的C++类,暴露槽函数...

    使用javascript调用webservice示例.pdf

    `request`方法负责获取WSDL(Web Service Description Language)文档,以了解Web服务的接口和方法。如果WSDL尚未缓存,则会通过XHR(XMLHttpRequest)异步请求获取。 `setSoap`方法解析WSDL文档,以确定调用Web...

    swift 与 javascript 之间的相互调用及传值

    Swift与JavaScript之间的相互调用和传值是实现跨平台交互的关键技术。通过WKWebView组件,开发者能够在iOS应用中无缝集成JavaScript功能,实现动态内容加载、网页交互等功能。同时,通过WKUserContentController和...

    ActionScript与JavaScript相互调用

    2. **从JavaScript调用Flash** 在HTML页面中,通过JavaScript调用Flash影片中的函数,例如更改文本字段的内容。 - **HTML页面**(示例代码片段): ```html function changeText(newText) { document....

    java javascript 调用命令行 cmd

    **JavaScript调用命令行** 在JavaScript中,由于安全限制,直接调用命令行是不允许的,因为它可能带来潜在的安全风险。然而,在Node.js环境中,我们可以使用`child_process`模块来执行命令。 1. **使用child_...

    C#和JavaScript相互调用

    JavaScript调用C#方法 在某些情况下,可能需要从JavaScript代码中直接调用服务器端的C#方法。这通常通过`__doPostBack`函数实现,该函数是ASP.NET框架提供的用于处理PostBack事件的默认函数。通过设置特定的事件...

    JavaScript 调用wsdl示例

    本示例主要介绍如何在JavaScript中使用不同的库和方法来实现这一功能。 首先,理解WSDL是关键。WSDL是一种XML格式的规范,用于描述Web服务以及如何访问这些服务。它定义了服务的位置、可用的操作以及如何通过SOAP...

    javascript技巧(javascript调用C#方法)个人学习笔记

    javascript技巧(javascript调用C#方法) 个人笔记

    初学者能够很快的学会各种java方法在javascript中是如何调用的。

    2. DWR项目的基本原理和功能,如何简化JavaScript对Java方法的调用,以及它在处理跨浏览器兼容性问题上的帮助。 3. DWR的使用方法,包括集成到Web应用的步骤,以及它提供的JavaScript库。 4. 一个具体的示例应用,...

    Javascript调用C#函数示例程序

    一个在HTML中使用Javascript的window.external调用C#内函数的示例程序。该方法可应用于网页程序开发中的网页-程序沟通,例如用C#的IHTMLWindow2.execScript替换HTML默认Javascript方法使其直接与C#传参、通讯。

    JS调用C#后台方法

    总的来说,JavaScript调用C#后台方法主要涉及Web服务的创建、HTTP请求的发起和响应的处理。通过这种交互方式,可以在不刷新页面的情况下实现前后端的数据交换,提高Web应用的交互性和用户体验。同时,了解并熟练掌握...

    unity3d中js调用C#类,混合调用

    在C#中,如果你有一个类想要被JavaScript调用,通常需要将其放在一个公共命名空间中,并使用`[assembly: UnityEngine.Scripting.RequiredComponent]`或者`[assembly: UnityEngine.Scripting.Preserve]`注解来确保...

Global site tag (gtag.js) - Google Analytics