深入解析 Javascript 面向对象编程

发布时间:2020-03-04编辑:脚本学堂
本文详细介绍了javascript 面向对象的相关内容,从原理到实例,有需要的朋友参考下吧。

javascript是一种面向(基于)对象的动态脚本语言,是一种基于对象(Object)和事件驱动(EventDriven)并具有安全性能的脚本语言。
它具有面向对象语言所特有的各种特性,比如封装、继承及多态等。

Javascript的重要性

使用率
1、在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 )。
2、字符类型
  字符串由各种字符、数字及特殊字符串组成,可以在程序中直接使用单引号或双引号来生成字符串常量。字符串中不能有回车符,要在字符串包含回车需要使用转义字符n。下面是一些简单的字符串常量:
 

复制代码 代码示例:
"" // The empty string: it has zero characters
'testing'
"3.14"
'name="myform"'
"Wouldn't you prefer O'Reilly's book?"
"This stringnhas two lines"
"π is the ratio of a circle's circumference to its diameter"

3、布尔Boolean
布尔类型用来表示真或假,在javascript中,当用于布尔运算时,除了0、空字符、null、undefined、NaN等以外的数据都是表示真。
if(0||""||false||null||undefined||NaN)alert("有一个条件返回true了");
布尔常量只有false及true,False及True不是常量。

4、对象类型
javascript是基于对象的语言,对象是其核心。

程序流程控制
顺序结构
if条件选择语句
switch选择语句
while循环语句
do while语句
for循环语句
breakcontinue语句

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>

多想一想:
动态函数有什么作用,在什么情况下用动态函数。