浅谈JavaScript实现面向对象中的类

对象，是人们要进行研究的任何事物，从最简单的整数到复杂的飞机等均可看作对象，它不仅能表示具体的事物，还能表示抽象的规则、计划或事件。--引自百度百科

面向对象编程，是当前最流行的编程模式。但令人沮丧的是，作为前端应用最为广泛的javascript，并不支持面向对象。

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();
}

以上我们聊了如何在Javascript中定义类，创建类的对象，创建公有和私有的属性和方法，创建静态属性和方法，模拟构造函数，并且讨论了容易出错的this。

关于Javascript中的OOP实现就聊到这里，以上是最实用的内容，一般用Javascript定义类，创建对象用以上的代码已经足够 了。当然，你还可以用mootools或prototype来定义类，创建对象。我用过mootools框架，感觉很不错，它对Javascript的类 模拟就更完善了，还支持类的继承，有兴趣的读者可以去尝试一下。当然，如果使用了框架，那么在你的网页中就需要包含相关的js头文件，因此我还是希望读者 能够在没有框架的情况下创建类，这样，代码效率较高，而且你也可以看到，要创建一个简单的类并不麻烦～

赞 (0)

相关推荐

  • javascript中定义类的方法汇总

    JS中定义类的方式有很多种: 1.工厂方式 复制代码 代码如下: function Car(){    var ocar = new Object;    ocar.color = "blue";    ocar.doors = 4;    ocar.showColor = function(){     document.write(this.color)    };    return ocar;   }   var car1 = Car();   var car2 = Car()

  • Javascript中的五种数据类型详解

    Undefined 未定义.只有一个值undefined Null 只有一个值,null Boolean 在javascript中,只要逻辑表达式不返回undefined不返回null,就都是真的. 复制代码 代码如下: if(3) true if(null) false if(undefined) false Number String javascript中不存在char类型. 字符串定义可以用单引号,也可以用双引号. 复制代码 代码如下: <html> <head> <

  • 分享一个常用的javascript静态类

    废话不多说,直接奉上代码,知道干啥用的小伙伴直接带走吧. 复制代码 代码如下: util=function(){     return {         $:function(id){             return document.getElementById(id);         },         trim:function(str){             return str.replace(/(^\s+)|(\s+$)/g, "");         },

  • JavaScript中的类(Class)详细介绍

    在JavaScript中,可以使用类(Class)来实现面向对象编程(Object Oriented Programming).不过,JavaScript中的类与Java中的有所不同,其相应的定义和使用也不一样. JavaScript中类的定义 在JavaScript中,所有从同一个原型对象(prototype)处衍生出来的对象组成了一个类:也就是说,JavaScript中的类是一个对象集合的概念,如果两个对象它们的prototype相同,那么它们就属于同一个类:JavaScript中的类甚至都

  • 如何用JavaScript定义一个类

    我原来的写法都是这样: function Dog(){ this.name = 'hachi'; } Dog.prototype = { makeNoise:function(){ alert('wangwangwang'); } }; 后来又看到另外一种复杂一点而且看起来好像没有必要的写法: function Dog(){ var privateVariable = 'secret'; var fn = function(){ //... } fn.prototype = { makeNois

  • JavaScript定义类和对象的方法

    本文实例讲述了JavaScript定义类和对象的方法.分享给大家供大家参考.具体方法如下: 在JS中,类和对象有多种不同的写法,因为本人对JS也不怎么熟,所以就本人的理解来写,如果哪位朋友发现有不对,请告之,共同学习． JS定义一个类有两种定法(我只知道这两种): 1. 定义函数的方式: 定义: 复制代码 代码如下: function classA(a) {      this.aaa=a;  //添加一个属性      this.methodA=function(ppp)  //添加一个方法

  • JavaScript中的类与实例实现方法

    本文实例讲述了JavaScript中的类与实例实现方法.分享给大家供大家参考.具体如下: JavaScript 中没有父类, 子类的概念, 也没有class 和 instance 的概念, 全靠 prototype chain来实现继承. 当查找一个对象的属性时, JavaScript 会向上遍历 prototype chain, 直到找到对应的属性为止. 有几种方法, 可以使得 JavaScript 模拟出 class 和 instance 的概念. 1. 直接使用构造函数来创建对象, 在构造

  • 浅谈JavaScript实现面向对象中的类

    对象,是人们要进行研究的任何事物,从最简单的整数到复杂的飞机等均可看作对象,它不仅能表示具体的事物,还能表示抽象的规则.计划或事件.--引自百度百科 面向对象编程,是当前最流行的编程模式.但令人沮丧的是,作为前端应用最为广泛的javascript,并不支持面向对象. javascript没有访问控制符,它没有定义类的关键字class,它没有支持继承的extend或冒号,它也没有用 来支持虚函数的virtual,不过,Javascript是一门灵活的语言,下面我们就看看没有关键字class的Jav

  • 浅谈JavaScript中面向对象的的深拷贝和浅拷贝

    理解深拷贝和浅拷贝之前需要弄懂一些基础概念,内存中存储的变量类型分为值类型和引用类型. 1.值类型赋值的存储特点, 将变量内的数据全部拷贝一份, 存储给新的变量. 例如:var num = 123 :var num1=num; 表示变量中存储的数字是 123.然后将数据拷贝一份,就是将 123 拷贝一份. 那么内存中有 2 个 数组;将拷贝数据赋值给 num2,其特点是在内存中有两个数据副本.这可以理解为浅拷贝. 2.引用类型的赋值. var o={name:'张三'}: var obj=o;

  • 浅谈javascript中的Function和Arguments

    javascript的Function 属性: 1.Arguments对象 2.caller 对调用单前函数的Function的引用,如果是顶层代码调用,  则返回null(firefox返回undefined).  注:只有在代码执行时才有意义 3.length 声明函数是指定的命名参数的个数(函数定义是,定义参数的个数) 4.prototype 一个对象,用于构造函数,这个对象定义的属性和方法  由构造函数创建的所有对象共享. 方法: applay() --> applay(this,[])

  • 浅谈javascript中new操作符的原理

    浅谈javascript中new操作符的原理

    javascript中的new是一个语法糖,对于学过c++,java 和c#等面向对象语言的人来说,以为js里面是有类和对象的区别的,实现上js并没有类,一切皆对象,比java还来的彻底 new的过程实际上是创建一个新对象,把新象的原型设置为构造器函数的原型,在使用new的过程中,一共有3个对象参与了协作,构造器函数是第一个对象,原型对象是二个,新生成了一个空对象是第三个对象,最终返回的是一个空对象,但这个空对象不是真空的,而是已经含有原型的引用(__proto__) 步骤如下: (1) 创建一

  • 浅谈Javascript中的函数、this以及原型

    关于函数 在Javascript中函数实际上就是一个对象,具有引用类型的特征,所以你可以将函数直接传递给变量,这个变量将表示指向函数"对象"的指针,例如: function test(message){ alert(message); } var f = test; f('hello world'); 你也可以直接将函数申明赋值给变量: var f = function(message){ alert(message); }; f('hello world'); 在这种情况下,函数申明

  • 浅谈JavaScript中的对象及Promise对象的实现

    浅谈JavaScript中的对象及Promise对象的实现

    JavaScript 中的所有事物都是对象:字符串.数值.数组.函数.下面小编给大家收集整理些javascript中的对象及promise对象的实现.具体内容如下: 到处都是对象 window对象 常用的属性和方法介绍 location 包含页面的URL,如果改变这个属性,浏览器会访问新的URL status 包含将在浏览器状态去显示的一个串.一般在浏览器左下角 onload: 包含了需要在页面完全加载后调用的函数 document: 包含DOM alert方法: 显示一个提醒 prompt方法

  • 浅谈JavaScript 中有关时间对象的方法

    ECMAScript中的Date类型是在早期 Java 中的 Java.unile.Date 类基础上构建的.为此 Date 类型使用自 UTC (Coordinated Universal Time, 国际协调时间)1970年1月1日午夜开始经过的毫秒数来保存日期. 在这种数据存储格式下, Date 类型保存的日期能够精确到1970年1月1日之前或之后的285616年 •Date.parse(string) 接受一个表示日期的字符串参数,然后尝试根据这个字符串返回相应日期的毫秒数,不能转换则返

  • 浅谈JavaScript中this的指向更改

    JS中this指向的更改 JavaScript 中 this 的指向问题前面已经总结过,但在实际开中, 很多场景都需要改变 this 的指向. 现在我们讨论更改 this 指向的问题. call更改this指向 call 的使用语法:func.call(thisArg, arg1, arg2, ...) call 方法需要一个指定的 this 值( this要指向的对象 )和一个或者多个参数.提供的 this 值会更改调用函数内部的 this 指向. // 使用 call 方法改变调用函数执行上

  • 浅谈JavaScript 中的延迟加载属性模式

    目录 一.前言 二.按需属性模式 三.凌乱的延迟加载属性模式 四.类的唯一自己的延迟加载属性模式 五.对象字面量的延迟加载属性模式 六.结论 一.前言 传统上,开发人员在 JavaScript 类中为实例中可能需要的任何数据创建属性.对于在构造函数中随时可用的小块数据来说,这不是问题.但是,如果在实例中可用之前需要计算某些数据,您可能不想预先支付该费用.例如,考虑这个类: class MyClass { constructor() { this.data = someExpensiveCompu

  • 浅谈JavaScript中的“!!”作用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> alert(!!undefined)//false alert(!!null)//false alert(!!0)//false

随机推荐