JavaScript基础③引用与函数

接续上篇JavaScript基础②基本语法

前言

在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语言的灵活，在处理浏览器端数据可称王