ITPub博客

首页 > 应用开发 > > 前端开发技巧:Javascript如果实现面向对象

前端开发技巧:Javascript如果实现面向对象

作者:skyweave 时间:2019-11-04 16:05:59 0 删除 编辑

如果做后端java或c#开发的小伙伴都知道面向对象编程,把一个功能抽象封装成一个对象,但是Javascript本身并没有定义类的默认关键字class,它也没有用来支持虚函数的virtual,但是,javscript一样可以面向对象。

Javascript

javascript是一门很灵活的语言,JavaScript 中的所有事物都是对象,String、Date、Array 等等都是javascript自提供的内置对象, 对象只是带有属性和方法的特殊数据类型,布尔型是一个对象、数字型是一个对象、字符串也是一个对象、日期是一个对象、数学和正则表达式也是对象、数组是一个对象、甚至函数也是对象,所以我们依然可以和java这些面向对象的语言一样来让javascript实现面向对象编程,下面按步骤讲解如何创建一个对象。

一、通过function来创建一个对象

在Javascript中,我们用function来定义类,如下:

function Shape()

{

var x = 1 ;

var y = 2 ;

}

你或许会说?这个不是定义函数吗?没错,这个是函数,我们定义了一个Shape函数,并对x和y进行了初始化。在javascript中,string,int,function都是属性类。

不过,如果你换个角度来看,这个就是定义一个Shape类,里面有两个属性x和y,初始值分别是1和2,只不过,我们定义类的关键字是function而不是class。

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

var aShape = new Shape();

记住需要加一个new,否则只能当成普通函数使用。

二:定义公有属性和私有属性

我们已经创建了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中定义类,创建类的对象,创建公有和私有的属性和方法,创建静态属性和方法,模拟构造函数,基本可以满足大多数应用场景了。

当然,你还可以用prototype来定义属性和方法,下个章节我再说prototypes是什么?用prototype创建属性和方法的好处。

来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/834/viewspace-3156817/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-04-12

  • 博文量
    134
  • 访问量
    895