JavaScript面向对象之体会[总结]_javascript技巧

谈JavaScript的面向对象设计有点牵强,毕竟JavaScript语言本身没有高级语言严谨。看这篇文章之前,希望大家了解c++、java、c#等高级语言,有面向对象编程的基础知识。
1.类的定义:
function ClassName(){
}
大家可以发现类的定义形式是和函数是一样的。
其实函数和类只有在使用的时候才能分辨出来,比如我们在一个页面中分别使用他们:
<script language="javascript">
function A(){
alert('hello');
}

//A作为函数来使用
A();

//A作为类来使用,从类A派生出一个obj对象
var obj=new A();
</script>

2.类的成员:
function ClassName(){
//定义公有变量
this.property1=0;
//定义公有方法
this.method1=function(){
//判断this.a是否赋值
if(this.a != undefined)
alert(this.a);
}

//另外一种方法的定义形式
this.method3=funcA;

//定义私有成员
var pram1=1;
var method2=function(){
alert('');
}
}
//funcA是方法method3的处理函数
function funcA(){
alert('');
}
上面的代码慢慢来给大家解释:
有this开头的都是类的成员,而且都是公有(public)的。
比如:property1是类的属性、method1是类的方法;
类的成员不需要使用var来定义,没有使用this前缀的都是私有变量。
比如:pram1是私有变量,method2是私有方法;
类的属性可以不在类中定义,不要初始化的属性可以不定义,在其他地方仍可以调用;
比如:在method1里面要输出a属性,在整个类里面就没有定义a属性,我们在创建对象的时候可以给它赋值。
var obj=new ClassName()
obj.a="hello javascript";
obj.method1();
类的方法可以通过this.method=function(){}来定义,比如method1方法;
也可以通过this.method=funcName来定义,将方法指定让某个函数来处理,比如method3;

3.类的继承:
function classA(){
this.property1='hello';
this.method1=function (){
alert(this.property1);
}
}

function classB(){
}
//继承classA
classB.prototype=new classA();

//给classB添加PI属性
classB.prototype.PI=3.1415926;
//给classB添加showPI方法
classB.prototype.showPI=function(){
alert(this.PI);
}
通过使用prototype对象,将类classA的实例赋值给prototype对象,从而classB继承了classA的所有成员;
比如:classB.prototype=new classA();
同时也可以通过prototype在类外给类从新添加成员(这个是别的高级语言所没有的功能);
比如:classB.prototype.PI和classB.prototype.showPI

4.类方法的重载:
类方法的重载在类的构造函数中使用的比较多,比如:类中有两个同名的方法而不同参数或不同参数类型。JavaScript从形式上来说不支持类方法重载,我们可以通过它的arguments属性来完成对类方法的重载:
function classA(){
//获取参数个数
//注意this.arguments.length是错误的
var num=classA.arguments.length;

this.method1=function(){
if(num==0){
alert(0);
}
if(num==1){
alert(1);
}
}
}
类或函数名的arguments属性返回一个数组包含所有参数;
比如:classA.arguments.length可以获取参数的个数,classA.arguments[0]获取第一个参数的值
根据需要,通过获取参数个数或参数值,从而同一个函数或类具有了不同的功能,比如:
var obj= new classA();
obj.method1();//输出了0
var obj1= new classA(5);
obj1.method1();//输出了1

5.对象的定义:
//对象是类的实例,定义一个类,作为一个对象的模板
function A(){
this.a=1;
this.b=2;
this.add=function(){
return this.a+this.b;
}
}
//定义一个对象
var obj=new A();
//赋值类属性
obj.a=5;
obj.b=6;
//调用类方法
var sum=obj.add();

另外一种定义方法:
var obj={
a:1,
b:2,
add:function(){
return this.a + this.b;
}
}

这种方法定义的对象,把其类的结构也一起定义了,适合只使用一次的类
定义属性和方法的时候不需要使用this关键字,":"后直接赋值即可
但是方法中使用属性,需要使用this关键字

本文只是本人个人的经验和理解,估计我写的和一些书上有些不一样,相信看了之后一定能很快理解。此文章只起到抛砖引玉之作用,具体的项目需求还要具体对待。涉及所有例子均亲自调试无误,如有错误请指正。

时间: 2024-09-23 18:42:12

JavaScript面向对象之体会[总结]_javascript技巧的相关文章

深入浅析JavaScript面向对象和原型函数_javascript技巧

对象,是javascript中非常重要的一个梗,是否能透彻的理解它直接关系到你对整个javascript体系的基础理解,说白了,javascript就是一群对象在搅..(哔!). 下面给大家介绍下常用的几种对象创建模式 使用new关键字创建 最基础的对象创建方式,无非就是和其他多数语言一样说的一样:没对象,你new一个呀! var gf = new Object(); gf.name = "tangwei"; gf.bar = "c++"; gf.sayWhat =

javascript面向对象快速入门实例_javascript技巧

本文深入浅出的讲述了javascript面向对象快速入门实例.分享给大家供大家参考.具体如下: javascript面向对象入门案例: 复制代码 代码如下: <script language="javascript" type="text/javascript"> function Cat(){//js中对象的定义与函数一样,不同点在于怎么样调用. } var cat1 = new Cat();//创建类实例 //js中类属性可以动态添加,并不需要写在原

javascript 面向对象封装与继承_javascript技巧

整理一下js面向对象中的封装和继承. 1.封装 js中封装有很多种实现方式,这里列出常用的几种. 1.1 原始模式生成对象 直接将我们的成员写入对象中,用函数返回. 缺点:很难看出是一个模式出来的实例. 代码: 复制代码 代码如下:        function Stu(name, score) {             return {                 name: name,                 score: score             }       

JavaScript面向对象编写购物车功能_javascript技巧

之前的项目中需要一个购买数据商品并付款的功能,刚开始一直不敢使用面向对象的写法,主要是没有理清思路,而且那时的数据商品比较的复杂,就一直没敢动,在网上也找些面向对象的写法,把思路理清一遍,就想自己试着写写.  接下来我会一步一步分析,面向对象的写法过程.整个流程大致分为:                1.先定义好一个商品列表的数据形式和商品总数集,类似:  var data = [{name: 'name', unitPrice: 10, num: 2}]; var total = {type

详解JavaScript基于面向对象之继承实例_javascript技巧

javascript面向对象继承的简单实例: 作为一门面向对象的语言,继承自然是它的一大特性,尽管javascript的面向对象的实现机制和和c#和java这样典型的面向对象不同,但是继承的基本特点还是具有的,简单的说就是获得父级的方法和属性,下面是一段简单的实例,大家有兴趣可以分析一下: window.onload = function(){ function parent(age,name){ this.age = age; this.name = name; } parent.protot

JS面向对象编程详解_javascript技巧

序言 在JavaScript的大世界里讨论面向对象,都要提到两点:1.JavaScript是一门基于原型的面向对象语言 2.模拟类语言的面向对象方式.对于为什么要模拟类语言的面向对象,我个人认为:某些情况下,原型模式能够提供一定的便利,但在复杂的应用中,基于原型的面向对象系统在抽象性与继承性方面差强人意.由于JavaScript是唯一一个被各大浏览器支持的脚本语言,所以各路高手不得不使用各种方法来提高语言的便利性,优化的结果就是其编写的代码越来越像类语言中的面向对象方式,从而也掩盖了JavaSc

详细讲解JavaScript中的this绑定_javascript技巧

this 可以说是 javascript 中最耐人寻味的一个特性,就像高中英语里各种时态,比如被动时态,过去时,现在时,过去进行时一样,无论弄错过多少次,下一次依然可能弄错.本文启发于<你不知道的JavaScript上卷>,对 javasript 中的 this 进行一个总结. 学习 this 的第一步就是明白 this 既不是指向函数自身也不指向函数的作用域.this 实际上是在函数被调用时发生的绑定,它指向什么地方完全取决于函数在哪里被调用. 默认绑定 在 javascript 中 ,最常

YUI Compressor压缩JavaScript原理及微优化_javascript技巧

最近写一个jQuery插件,在最后完成优化时,对比发现压缩后文件比较大,就思考那些是可以被修改和优化的,发现压缩原理也有很大的空间可以学习,通过这次对YUI Compressor压缩JavaScript深有体会,那些是可以被压缩的,特别是那些不能被压缩的,都需要很清楚,这样才能写出来的插件才能保持文件更小,代码更精巧,而且优化的过程中也会发现代码待改良的地方,对以后也有很大帮助.随便在网上找来一篇文章做记录了. YUI Compressor 压缩 JavaScript 的内容包括: 移除注释 移

java、javascript实现附件下载示例_javascript技巧

在web开发中,经常需要开发"下载"这一模块,以下给出一个简单的例子. 在服务器端,使用java开发: @RequestMapping(value = "download.html", method = RequestMethod.GET) public void download(String resourceid, HttpServletRequest request, HttpServletResponse response) { response.setCo