前言
在Java中 , 我们可以创建任意一个对象,如Person p = new Person();
,其中p
是new Person();
这个对象的引用。我们可以通过p
这个引用来操作new Person();
这个对象,可以为这个对象的属性赋值,也可以调用对象立面的方法 , 但是,我们无法给这个对象添加一个新的属性 , 因为属性都是我们在创建这个Person
类的时候定义好的。但是在JavaScript中不同 , 你可以创建一个空的对象,然后动态的为这个对象添加动态属性和方法。
Object引用
JavaScript中的对象引用与Java中的引用类似 , 都是用来操作对象的一个标量, 我们可以通过引用变量来操作对象 。在JavaScript中 , 可以动态的为对象添加属性和方法。
创建一个Object对象 , 并动态添加属性
var obj = new Object();
// 只有引用类型可以动态添加属性 ,一般数据类型则不可以
obj.name = "zeno";
alert(obj.name); // out : zeno
var n = "no";
n.name = "no";
alert(n.name); // out : undefined
动态添加方法
// 动态添加对象属性
var obj = new Object();
// 只有引用类型可以动态添加属性 ,一般数据类型则不可以
obj.name = "zeno";
obj.showName = function(){
alert(this.name);
};
obj.showName(); // out : zeno
动态添加属性和方法的特性只有对象才有 。
使用字面量来创建对象 , 不会调用Object构造函数
var p = {
name : "xiaojiu",
age : 21
};
alert(" name = "+p.name + ", age = "+p.age) ; // out : name=xiaojiu , age=21
字面量对象作为函数参数传递
// 字面量Demo , args作为字面量对象引用传递进去
function displayInfo(args) {
var output = "" ;
if (typeof args.name == "string") {
output += "Name : "+args.name +" \n" ;
}
if (typeof args.age == "number") {
output += "Age : "+args.age+" \n";
}
alert(output);
}
displayInfo({name:"zeno",age:21}) ; // out : Name : zeno Age : 21
// displayInfo({name:"xiaojiu"}) ;
字面对象类似于JSON对象,以键值对的方式表示属性和方法
字面对象属性及方法
var Books = {
title:"javascript高级程序设计",
price:89.2,
showInfo:function(){
alert("bookName:"+this.title+" \n price:"+this.price);
}
};
Books.showInfo(); // out : bookName:javascript高级程序设计 price:89.2
数组
几乎所有编程语言都会提供数组数据结构,JavaScript也不例外。
数组创建的形式
// 创建一个空数组
var arr = new Array();
// 创建一个数组,并存储值
var person = new Array("zeno","xiaojiu","xiaoqi");
// 简便方式
var colors = ["red","blue","green"] ;
//得到数组大小
var arrCount = colors.length;
// 给数组添加一个新元素
colors[colors.length] = "black";
// 数组检测
Array.isArray(vaule);
遍历
var colors = ["red","blue","green"];
for (var i = 0; i < colors.length; i++) {
document.write(colors[i]+" ");
}
// or
for(var index in colors) {
document.write(colors[index]+" ");
}
// out : red blue green
数组的操作大多数都是类似 , 这里就不多赘述了
函数
JavaScript中,每个函数都是一个对象,每个函数也都是Function实例。因为函数是对象,所以函数名实际上就是一个指向函数对象的指针,所以一个函数可能会有多个名字 ,但JavaScript函数没有重载 。
基本示例
function sunm(num1,num2) {
return num1 + num2;
}
// 将函数对象赋值给一个var变量,sunm指向的是Function对象。
var sunm = function(num1,num2) {
return num1 + num2;
};
// 这两个函数几乎相差无几
// 用法也一样
sunm(1,2); // out : 3
函数重载模拟,<不可行>
// 模拟重载
var calculate = function(num1){
return 10 + num1 ;
};
var calculate = function(num1,num2){
return num1 + num2 ;
};
// calculate(1); // 不可行
上述函数,第二个函数会将第一个函数覆盖,如果传入一个参数,则会返回NaN
函数作为函数参数传递
JavaScript函数有一个和C语言的一样的特性,可以将函数名称作为参数传递给函数。
模拟网络请求回调
// 函数名称作为参数传递
// 模拟网络请求
function netWorkRequest(url,callBack) {
callBack(url,"请求到的数据...");
}
// 网络请求后的数据回调
function callBack(url,data) {
alert("url = "+url+" --- data : "+data);
}
netWorkRequest("http://www.baidu.com",callBack);
可以将函数名称作为参数传递,作为回调的方法。
函数内部属性
函数有两个特殊的对象,arguments,this
名称 | 含义 |
---|---|
arguments | 包含传入函数的所有参数,arguments还有一个callee属性,这个属性是一个指针,指向的是拥有这个arguments对象的函数 |
this | 类似Java中的this,表示当前函数执行的环境对象 , 可以使用call和apply来改变this所表示的环境 |
arguments是一个数组,这个在JavaScript基础②基本语法有说明,这里就不赘述了,它包含传递给函数的所有参数。
示例
// this
window.color = "red";
var obj = {color:"blue"};
function sayColor() {
alert(this.color);
}
// 当前this对象为window
sayColor(); // out : red
// 当前this对象为obj
obj.sayColor = sayColor;
obj.sayColor(); // out : blue
通过call和apply函数改变this环境
// apply and call 用法
window.color = "red";
var obj = {color:"blue"};
function sayColor() {
alert(this.color);
}
// sayColor.apply(this); // out : red 这里的this是全局对象,表示window对象
// sayColor.call(window); // out : red window是作为页面的全局对象
// sayColor.apply(obj); // out : blue 关联了obj对象, this表示obj对象
apply() , call() 都是在特定的作用域中调用函数,实际上等于设置函数体内this对象的值,两者区别:接收参数不同
① apply:接收两个参数,一个是运行函数的作用域,另一个是参数数组
②call:第一个参数是this值没有变化,在使用call()方法时,传递的参数必须逐个列举出来
结语
apply与call函数后续还会多次调用 , 这两个函数在类继承方面会有很大的用处 。
每一门语言都有其独特之处,JavaScript继承了C语言的灵活,在处理浏览器端数据可称王