Javascript面向对象编程
人气:0Javascript的重要性
使用率
１、在web应用中,涉及到前端界面编程基本上都要用到javascript语言；
2、Web2.0及Ajax推动了javascript语言。
3、随着大量的c/s应用转向b/s,富客户端技术的不断推广,javascript语言的应用范围还将不断加大；
javascript的特点
简单
动态
基于对象(面向对象)
Javascript面向对象概述
Javascript是一种面向(基于)对象的动态脚本语言，是一种基于对象(Object)和事件驱动(EventDriven)并具有安全性能的脚本语言。他具有面向对象语言所特有的各种特性，比如封装、继承及多态等。但对于大多数人说，我们只把javascript做为一个函数式语言，只把他用于一些简单的前端数据输入验证以及实现一些简单的页面动态效果等，我们没能完全把握动态语言的各种特性。
在很多优秀的Ajax框架中，比如ExtJS、JQuery等，大量使用了javascript的面向对象特性，要使用好ext技术，javascript的高级特性，面向对象语言特性是我们必须完全把握的。
Javascript的相关知识
Javascript的发展历程
Javascript的三大组成部分
ECMAScript
语法\数据类型\语句\关键字\保留字\操作符\对象
DOM(Document Object Model)
BOM(Browser Object Model)
JavaScript灵活特性探讨
1、动态语言的灵性测试
Javascript作为一种动态语言，具有非常灵活的我发，在使用的过程中需要灵活掌握及应用他的动态特性，才会得心应手。
思考下面的输出
复制代码 代码如下:
function Animal(name){
this.name=name;
this.age=0;
};
var a1=Animal;//输出：
var a2=Animal();//输出：
var a3=new Animal();//输出：
var a4=new Animal;//输出：
Javascript中的数据类型
基本数据类型
数字(Numbers)
字符串(Strings)
布尔Boolean
特殊值(null、undefined、NaN)。
对象类型Object
对象属于复杂的数据类型，对象下面可以包含基本类型、对象、函数等，数组是一种对象类型。对于javascript来说，可以说一切都是对象，包括类！。
var c=new Object();
1、数字类型
数字类型是所有语言中都存在的基本数据类型，javascript中的数字类型主要包括整型(Int)与浮点型(Float)两种，但实质两种类型都是以浮点的形式保存在内存中。数字类型在javascript中一般与数字常量的形式出现在程序中，一般情况下是基于10进制的数据，由0-9这10个数字组成，比如110、150等，而也可以是以0x开头（由0-9以及a到f等16个字符组成）的16进制数据，比如0xff转换成10进制就是255(即 15*16 + 15 = 255)；一些javascript实现还支持8进制数据，也就是以0开头的数据(由0-7这8个数字组成)，比如0377 这个八进制数据转换成10进制就是255，即（ 3*64 + 7*8 + 7 = 255 ）。
２、字符类型
字符串由各种字符、数字及特殊字符串组成，可以在程序中直接使用单引号或双引号来生成字符串常量。字符串中不能有回车符，要在字符串包含回车需要使用转义字符\n。下面是一些简单的字符串常量：
"" // The empty string: it has zero characters
'testing'
"3.14"
'name="myform"'
"Wouldn't you prefer O'Reilly's book?"
"This string\nhas two lines"
"π is the ratio of a circle's circumference to its diameter"
３、布尔Boolean
布尔类型用来表示真或假，在javascript中，当用于布尔运算时，除了0、空字符、null、undefined、NaN等以外的数据都是表示真。
if(0||""||false||null||undefined||NaN)alert("有一个条件返回true了");
布尔常量只有false及true，False及True不是常量。
４、对象类型
javascript是基于对象的语言，对象是其核心。
程序流程控制
顺序结构
if条件选择语句
switch选择语句
while循环语句
do while语句
for循环语句
break与continue语句
for...in循环语句
for(变量 in 集合或对象)
{
执行语句块
}
复制代码 代码如下:
<script language="javascript">
var as= [1,4,5,6],output="";
for(var x in as)
{
output += " x= " + as[x];
}
alert(output);
</script>
var as={id:5,name:'test'};
for(var x in as)
{
output += x+"="+as[x];
}
alert(output);
逻辑运算符
&&
逻辑与，当左右两边操作数都为true时，返回值为true，否则返回false。
逻辑或，当左右两边操作数都为false时，返回其中第一个不为false的值或者false。
!
逻辑非，当操作数为true时，返回值为false，否则返回true。
注意：
在逻辑运算中，0、""、false、null、undefined、NaN均表示false。
函数的定义及调用
定义一个函数的格式如下：
function 函数名（参数列表）
{
程序代码
return 表达式;
}
复制代码 代码如下:
<script language="javascript">
var msg = "全局变量";
function square(x,y)
{
var sum;
sum = x*x + y*y;
return sum;
}
function show()
{
var msg = "局部变量";
alert(msg);
}
//var sum;
alert("sum=" + sum);
sum=square(2,3);
alert("sum=" + sum);
show();
</script>
undefined
alert("sum=" + square(2,3));
对函数进行调用的几种方式：
函数名（传递给函数的参数1，传递给函数的参数2，….）
变量 = 函数名（传递给函数的参数1，传递给函数的参数2，….）
对于有返回值的函数调用，也可以在程序中直接使用返回的结果，例如：alert("sum=“ + square(2,3));
不指定任何函数值的函数，返回undefined。
函数的参数可变性(arguments）
复制代码 代码如下:
<script language="javascript">
function sum()
{
var s= 0;
for(var i=0; i<arguments.length; i++)
s+= arguments[i];
return s;
}
sum(1,2);
sum(3,4,5);
</script>
最多255个。通过函数对象的length可以返回函数希望提供的参数个数。
函数参数的可变性
function add(s,b){
if(s)alert(“第一个参数是:”+s);
if(!b)alert(“没有第二个参数!”);
else alert(“第二个参数是:”+b);
}
arguments
Arguments是一个类似数组但不是数组的对象，说它类似数组是因为其具有数组一样的访问性质及方式，可以由arguments[n]来访问对应的单个参数的值，并拥有数组长度属性length。
如何写一个方法，能实现任意多个数的求和?
alert(sum(1,2,3));//输出6
alert(sum(100,200,500,900));//输出1700
使用Function类创建函数
创建动态函数的基本语法格式：
var varName = new Function(argument1,...,lastArgument);
说明：
所有的参数都必须是字符串型的，最后的参数必须是这个动态函数的功能程序代码。
例子：
复制代码 代码如下:
<script language="javascript">
var square = new Function ("x","y",
"var sum;sum= x*x + y*y;return sum;");
alert(square(3,2));
var alsoDoSquare = doAdd;
alert(alsoDoSquare (3,2));
</script>
多想一想：
动态函数有什么作用，在什么情况下用动态函数。
闭包(closure)
Javascript闭包就是在另一个作用域中保存了一份它从上一级函数或作用域取得的变量(键值对)，而这些键值对是不会随上一级函数的执行完成而销毁。
这样在执行完var c=a()后，变量c实际上是指向了函数b，b中用到了变量i，再执行c()后就会弹出一个窗口显示i的值(第一次为1)。这段代码其实就创建了一个闭包，为什么？因为函数a外的变量c引用了函数a内的函数b，就是说：
当函数a的内部函数b被函数a外的一个变量引用的时候，就创建了一个我们通常所谓的“闭包”。
复制代码 代码如下:
function a() {
var i = 0;
function b() {
alert(++i);
}
return b;
}
var c = a();
c();
闭包的作用就是在a执行完并返回后，闭包使得Javascript的垃圾回收机制GC不会收回a所占用的资源，因为a的内部函数b的执行需要依赖a中的变量。
函数的作用域及this
1、在函数或方法中可以使用this来引用函数所在的当前对象
2、当没有明确指定函数的当前对象时，作用域为window
3、可以使用call及apply来动态改变函数执行的作用域
复制代码 代码如下:
var b1={v:"this is b1"};
var b2={v:"this is b2"};
function b(d){
alert(this.v);
}
b();//输出：
window.b();//输出:
b.call(b1);//输出：
b.apply(b2);//输出：
词法作用域（lexcical scope）。通俗地讲，就是javascript变量的作用域是在定义时决定而不是执行时决定，也就是说词法作用域取决于源码，编译器通过静态分析就能确定，因此词法作用域也叫做静态作用域（static scope）。但需要注意，with和eval的语义无法仅通过静态技术实现，所以只能说javascript的作用域机制非常接近词法作用域（lexical scope）.
javascript引擎在执行每个函数实例时，都会创建一个执行环境（execution context）。执行环境中包含一个调用对象（call object）
调用对象是一个scriptObject结构（scriptObject是与函数相关的一套静态系统，与函数实例的生命周期保持一致），用来保存内部变量表varDecls、内嵌函数表funDecls、父级引用列表 upvalue等语法分析结构（注意varDecls和funDecls等信息是在语法分析阶段就已经得到，并保存在语法树中。函数实例执行时，会将这些信息从语法树复制到scriptObject上）。
apply and call：它们的作用都是将函数绑定到另外一个对象上去运行，两者仅在定义参数方式有所区别：
apply(thisArg,argArray);
call(thisArg[,arg1,arg2…] ]);
即所有函数内部的this指针都会被赋值为thisArg，这可实现将函数作为另外一个对象的方法运行的目的。
apply的说明
如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。如果没有提供 argArray 和 thisArg任何一个参数，那么 Global 对象将被用作 thisArg，并且无法被传递任何参数。
call的说明
call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisArg指定的新对象。如果没有提供 thisArg参数，那么 Global 对象被用作 thisArg
重点(the point)：
应用call和apply还有一个技巧在里面，就是用call和apply应用另一个函数（类）以后，当前的函数（类）就具备了另一个函数（类）的方法或者是属性。
在浏览执行的javascript中，默认情况下对象的作用域为window。
c.run();
window.c.run();
JavaScript中的系统函数(Global类)
encodeURI及encodeURIComponent方法
返回对一个URI字符串编码后的结果。
decodeURI及decodeURIComponent()方法
将一个已编码的URI字符串解码成最初始的字符串并返回。
parseInt方法
将一个字符串按指定的进制转换成一个整数，语法格式为：parseInt(numString, [radix])。如果没有指定第二个参数，则前缀为 ‘0x' 的字符串被视为十六进制，前缀为 ‘0' 的字符串被视为八进制，所有其他字符串都被视为是十进制。
parseFloat方法
将一个字符串转换成对应的小数。
isNaN方法
用于检测parseInt和parseFloat方法的返回值是否为NaN。
escape方法
返回对一个字符串进行编码后的结果字符串。所有空格、标点、重音符号以及任何其他非 ASCII 字符都用 %xx 编码替换，其中xx等于表示该字符的Unicode编码的十六进制数，字符值大于255的字符以%uxxxx格式存储。
unescape 方法
将一个用escape方法编码的结果字符串解码成原始字符串并返回。
eval 方法
将其中的参数字符串作为一个JavaScript表达式执行。
JavaScript的内部类
动态对象
使用“对象实例名.成员”的格式来访问其属性和方法。
静态对象
直接使用“对象名.成员”的格式来访问其属性和方法。
Object类(对象)
Number类(对象)
String类 (对象)
Math类(对象)
Date类(对象)
toString方法
Object类
Object类是所有javascript类的基类，提供了一种创建自定义对象的简单方式，不需要程序员再定义构造函数。
主要属性：
constructor-对象的构造函数
prototype-获得类的prototype对象,static性质
主要方法：
hasOwnProperty(property)－是否属于本类定义的属性
isPrototypeOf(object)－是否是指定类的prototype
propertyIsEnumerable(property)－是否可例举的属性
toString()－返回对象对应的字符串
valueOf()－返回对象对应的原始类型值
<script language="javascript">
function getAttributeValue(attr)
{
alert(person[attr]);
}
var person = new Object();
person.name = "zs";
person.age = 18;
getAttributeValue("name");
getAttributeValue("age");
</script>
Number类
Number类代表数据类，包含一些静态的成员及数值处理的方法。
静态属性：
MAX_VALUE、MIN_VALUE、NEGATIVE_INFINITY、POSITIVE_INFINITY、NaN
主要方法：
toFixed(n)－取小数位数，自动四舍五入
toPrecision(n)－是否是指定类的prototype
propertyIsEnumerable(property)－是否可例举的属性
toString()－返回对象对应的字符串
valueOf()－返回对象对应的原始类型值
复制代码 代码如下:
<script language="javascript">
var oNumberObject = new Number(99);
alert(oNumberObject.toFixed(2)); //outputs “99.00”
</script>
String类
length属性
anchor、big、bold、fontcolor、link等方法
charAt方法
注意：一个字符串中的第一个字符的索引位置为0，依次类推。
charCodeAt方法
注意：返回的结果是字符的unicode编码。
concat方法，连接字符串
indexOf方法及lastIndexOf方法
match、search方法
replace、split方法
slice方法
说明：str1.slice(0)和str1.slice(0,-1)都是返回整个字符串。
substr、substring方法
substring方法返回的内容不包含结束位置的字符。
toLowerCase、toUpperCase 方法
Math类
属性：
E，代表数学常数e，约等于 2.718。
LN10，代表10的自然对数，约等于 2.302。
LN2，代表2的自然对数，约等于 0.693。
PI，代表数学常数∏的值，约等于 3.14159。
SQRT1-2，代表2 的平方根分之一，约等于0.707。
SQRT2，代表2 的平方根，约等于1.414。
方法：
abs方法，返回数字的绝对值。
sin、cos方法，分别返回数字的正弦、余弦值。
asin、acos方法，分别返回数字的反正弦、反余弦值。
random方法，返回介于 0 和 1 之间的伪随机数
Math对象是一个静态类，不能使用new关键字创建对象实例，应直接使用“对象名.成员”的格式来访问其属性或方法，例如，var num = Math.random();
Date类
toGMTString方法，返回Date对象实例所表示的日期的字符串形式，该字符串使用格林尼治标准时间 (GMT) 格式，例如，“05 Jan 1996 00:00:00 GMT”。
getYear、getMonth、getDate、getDay方法
getHours、getMinutes、getSeconds、getMilliseconds方法
getTime方法，返回自1970年1月1日0点0分0秒算起，至Date对象实例代表的时间为止的毫秒数。
复制代码 代码如下:
<script language="javascript">
var current_time = new Date();
var strDate = current_time.getYear() + "年";
strDate += current_time.getMonth() + "月";
strDate += current_time.getDate() + "日 ";
strDate += current_time.getHours() + ":";
strDate += current_time.getMinutes() + ":";
strDate += current_time.getSeconds();
alert(strDate);
</script>
构造方法 ：Date()、Date(dateVal) 、Date(year, month, date[, hours[, minutes[, seconds[,ms]]]])
parse方法，分析一个表示日期时间的字符串，返回它所表示的时间值，该值以自1970年1月1日0点0分0秒算起的毫秒值表示。parse方法属于一个静态方法 。
toString方法
toString 方法是JavaScript中的所有内部对象的一个成员方法，它的主要作用就是将对象中的数据转换成某种格式的字符串来表示，具体的转换方式取决于对象的类型。
举例：
复制代码 代码如下:
<script language="javascript">
var x = 328;
alert("hex=“ + x.toString(16) + " bin=“ + x.toString(2));
</script>
Array类
三种构造方法：
Array()
Array(4)
Array(3.5,"abc",3)
数组排序例子：
复制代码 代码如下:
<script language="javascript">
var arr = new Array();
arr[0] = 3.5;
arr[1] = "abc"
arr[2] = 3;
arr.sort();
var x,str = "";
for(x in arr)
{
str += x + ":“ + arr[x] + "\n";
}
alert(str);
</script>
Array类的属性及方法
length－获得数组的长度；
concat－连接数组；
join－把数组转换成字符串；
pop－弹出一个元素；
push－放入一个元素；
reverse－颠倒数据中的元素顺序；
shift－移出第一个元素；
slice－截取数组;
sort－排序数组;
unshift－在前面追加元素；
用对象的方式实现数组
复制代码 代码如下:
<script language="javascript">
function MyArray()
{
this.length = arguments.length;
for (var i=0; i<this.length;i++)
{
this[i] = arguments[i];
}
}
var str = "";
var arr = new MyArray(4,3.5,"abc");
for(var i=0; i<arr.length; i++)
{
str += arr[i] + "\n";
}
alert(str);
</script>
<script language="javascript">
function MyArray(size)
{
this.length = size;
for (var i=0; i<size; i++)
{
this[i] = "";
}
}
var arr = new MyArray(2);
arr[0] = 3;
arr[1] = "abc";
arr[2] = 4;
var x, str = "";
for(x in arr)
{
str += x + ":" + arr[x] + "\n";
}
alert(str);
</script>
用户自定义类及对象
１、工厂方法－使用new Object创建对象并添加相关属性；
２、使用构造函数来定义类。
３、使用prototype
４、构造函数及原型混合方式
５、动态原型方式
实例
Car类(对象)
属性：
color-颜色
doors－门的个数
price－价格
drivers-司机
方法：
showColor－显示出车的颜色
typeof及instanceof 运算符
delete操作符用来删除一个对象的指定成员。
typeof xx－string返回xx对象的类型或undefined。
var d=7.5;
alert(typeof d);
alert(typeof d2);
alert(typeof new Object());
alert(typeof Object);
xx instanceof 类名，返回boolean类型：
复制代码 代码如下:
<script language="javascript">
var o = new String("ab");
alert(o instanceof String);
alert(o instanceof Number);
alert(o instanceof Object);
</script>
delete及void 操作符
delete操作符用来删除一个对象的指定成员。
var d=new Object();
d.p1="this is p1";
alert(d.p1);
delete d.p1;
alert(d.p1);
delete只能删除用户自义的成员。
delete d.toString;
alert(d.toString());
void 用来把任意数字转换为undefined。
var d=new Object();
alert(void(d));
运用场景：
<a href=”javascript:window.open(‘about:blank')”>Click Me</a>
类的修改
1、prototype详解
2、给已有类添加新方法
3、重新定义类的方法
4、超级后置绑定
prototype是Function对象的一个属性，当我们访问对象的一个成员时，先在对象内部找，如果找不到，则到对象所在类的prototype对象中找。
封装
封装：封装，也就是把客观事物封装成抽象的类，并且类可以把自己的数据和方法只让可信的类或者对象操作，对不可信的进行信息隐藏。
javascript中，通过闭包可以实现封装，看代码例子。
涵盖了javascript公有成员定义、私有成员定义、特权方法定义的简单示例！
复制代码 代码如下:
<script>
//定义一个javascript类
function JsClass(privateParam/* */,publicParam){//构造函数
var priMember = privateParam; //私有变量
this.pubMember = publicParam; //公共变量
//定义私有方法
function priMethod(){
return "priMethod()";
}
//定义特权方法
//特权方法可以访问所有成员
this.privilegedMethod = function(){
var str = "这是特权方法，我调用了\n";
str += " 私有变量：" + priMember +"\n";
str += " 私有方法：" + priMethod() +"\n";
str += " 公共变量：" + this.pubMember +"\n";
str += " 公共方法：" + this.pubMethod();
return str;
}
}
//添加公共方法
//不能调用私有变量和方法
JsClass.prototype.pubMethod = function(){
return "pubMethod()";
}
//使用 JsClass的实例
JsObject = new JsClass("priMember","pubMember");
//alert(JsObject.pubMember);//弹出pubMember信息
//alert(JsObject.priMember);//弹出undefined信息
//alert(JsObject.pubMethod());//弹出pubMethod信息
//alert(JsObject.priMethod());//弹出"对象不支持此属性或方法"的错误
alert(JsObject.privilegedMethod());
</script>
涵盖了javascript公有成员定义、私有成员定义、特权方法定义的简单示例！
复制代码 代码如下:
<script>
//定义一个javascript类
function JsClass(privateParam/* */,publicParam){//构造函数
var priMember = privateParam; //私有变量
this.pubMember = publicParam; //公共变量
//定义私有方法
function priMethod(){
return "priMethod()";
}
//定义特权方法
//特权方法可以访问所有成员
this.privilegedMethod = function(){
var str = "这是特权方法，我调用了\n";
str += " 私有变量：" + priMember +"\n";
str += " 私有方法：" + priMethod() +"\n";
str += " 公共变量：" + this.pubMember +"\n";
str += " 公共方法：" + this.pubMethod();
return str;
}
}
//添加公共方法
//不能调用私有变量和方法
JsClass.prototype.pubMethod = function(){
return "pubMethod()";
}
//使用 JsClass的实例
JsObject = new JsClass("priMember","pubMember");
//alert(JsObject.pubMember);//弹出pubMember信息
//alert(JsObject.priMember);//弹出undefined信息
//alert(JsObject.pubMethod());//弹出pubMethod信息
//alert(JsObject.priMethod());//弹出"对象不支持此属性或方法"的错误
alert(JsObject.privilegedMethod());
</script>
继承
面向对象编程 (OOP)语言的一个主要功能就是“继承”。继承是指这样一种能力：它可以使用现有类的所有功能，并在无需重新编写原来的类的情况下对这些功能进行扩展。
1、对象冒充
2、call及apply
3、原型链
4、混合方式
继承-对象冒充
复制代码 代码如下:
function classA(name) {
this.name=name;
this.showName=function(){alert(this.name);}
}
function classB(name) {
this.newMethod = classA;
this.newMethod(name);
}
obj = new classA("hero");
objB = new classB("dby");
obj.showName(); // print hero
objB.showName(); // print dby 说明classB 继承了classA的方法.
对象冒充可以实现多重继承 例如
function classz(){
this.newMethod = classX;
this.newMethod();
delete this.newMethod;
}
但是如果classX和classY有相同的属性或者方法,classY具有高优先级.
继承-call方法
call方法使与经典的对象冒充法就相近的方法,它的第一个参数用作this的对象,其他参数都直接传递给函数自身.
复制代码 代码如下:
function sayName(perfix) {
alert(perfix+this.name);
}
obj= new Object();
obj.name="hero";
sayName.call(obj,"hello," );
function classA(name) {
this.name=name;
this.showName=function(){alert(this.name);};
}
function classB(name) {
classA.call(this,name);
}
objB = new classB("bing");
objB.showName();////说明classB继承classA的showName方法
继承-apply方法
aplly()方法有2个参数,一个用作this对象,一个使传递给函数的参数数组.
复制代码 代码如下:
function sayName(perfix) {
alert(perfix+this.name);
}
obj= new Object();
obj.name="hero";
sayName.aplly(obj,new Array("hello,") );
继承-原型链
prototype对象的任何属性和方法都会被传递给对应类的所有实例,原型链就是用这种方式来显现继承.
function classA (){}
classA.prototype.name="hero";
classA.prototype.showName=function(){alert(this.name)}
function classB(){}
classB.prototype=new classA();
objb = new classB()
objb.showName();//print hero 说明b继承了a的方法
这里需要注意 调用classA的构造函数时,没有给它传递参数,这是原型链的标准做法,确保函数的构造函数没有任何参数.
并且 子类的所有属性和方法,必须出现在prototype属性被赋值后,应为在它之前赋的值会被删除.因为对象的prototype属性被替换成了新对象,添加了新方法的原始对象将被销毁.
继承-混和方式
就是用冒充方式 定义构造函数属性,用原型法定义对象方法.
复制代码 代码如下:
function classA(name) {
this.name=name;
}
classA.prototype.showName=function(){alert(this.name)}
function classB(name) {
classA.call(this,name);
}
classB.prototype = new classA();
classB.prototype.showName1=function(){alert(this.name+"*****");};
obj = new classB("hero");
obj.showName();
obj.showName1();
在classB的构造函数中通过调用call方法 继承classA中的name属性,用原型链来继承classA的showName方法.
javascript中的方法重载探讨
方法重载(overloading)及覆盖(overriding)
Javascript 中的方法本身就是一个带可变参数的，不支持重载操作。但我们可以在方法体内自由检测方法的参数情况，来实现重载的效果。(使用可变参数或arguments 来模拟重载的示例)。
覆盖，也称为改写，就是指子类中定义的方法替换掉父类的方法
javascript中多态性(polymorphisn)探讨
多态性(polymorphisn)：是允许你将父对象设置成为和一个或更多的他的子对象相等的技术，赋值之后，父对象就可以根据当前赋值给它的子对象的特性以不同的方式运作。简单的说，就是一句话：允许将子类类型的指针赋值给父类类型的指针。多态是为了实现另一个目的——接口重用!多态的作用，就是为了类在继承和派生的时候，保证使用“家谱”中任一类的实例的某一属性时的正确调用。
var a=[a1,a2,a3];
加载全部内容