JavaScript函数和对象

2016-03-27  本文已影响53人  刘涤生

函数

定义函数

JavaScript有两种方式定义函数,第一种方式如下:

function add(x,y) {
    return x + y;
}

注意,函数体内部的语句在执行时,一旦执行到return时,函数就执行完毕,并将结果返回。因此,函数内部通过运算可以实现非常复杂的逻辑。如果没有return语句,函数执行完毕后也会返回结果,只是结果为undefined。

由于JavaScript函数也是一个对象,上述定义的add()函数实际上是一个函数对象,而函数名add可以视为指向该函数的变量。
因此,第二种定义函数的方式如下:

var add = function (x,y) {
    return x + y;
};

这种方式下,function{....}是一个匿名函数,它没有函数名,但是这个匿名函数赋值给了变量add,所有通过变量add就可以调用该函数。

上述两种定义是等价的,注意第二种方式按照完整语法需要在末尾加一个;号,表示赋值语句结束。

函数声明可以出现在脚本中的任何位置。使用多个外部JavaScript文件时有一点要记住,如果不同文件中有两个同名的函数,将使用浏览器最后看到的那个函数。

调用函数

调用函数时,按顺序传入参数即可:

var sum = add(1,2); //返回3

由于JavaScript允许任意参数而不影响调用,因此传入的参数比定义的参数多也没有问题,虽然函数内部并不需要这些参数:

var sum = add(1,2,3); //返回3

传入的参数比定义的少也没有问题:

var sum = add(); //返回NaN

此时,add的参数将受到undefined,计算结果为NaN

变量作用域

全局变量

如果一个变量在函数外声明,这个变量就是全局变量。可以在JavaScript代码中的任何地方访问。

var x = 3; //全局变量
var y = 4;
var add = function (x,y) {

    var z = 4; //局部变量

    return x + y + z;
}

局部变量

如果一个变量在函数内声明,这个变量就是局部变量。只能在函数体内部使用。

var x = 3; //全局变量
var y = 4;
var add = function (x,y) {

    var z = 4; //局部变量

    return x + y + z;
}

变量提升

JavaScript函数定义有个特点,它会先扫描整个函数体的语句,把所有声明的变量提升到函数顶部

'use strict'

function foo() {
    var x = "hello," + y;
    alert(x);
    y = "world";
}

foo();

虽然是strict模式,但语句var x = "hello," + y并不报错,原因是变量y在稍后说明了。但是alert显示hello,undefined,说明变量y的值为undefined。这正是因为JavaScript引擎自动提升了变量y的声明,但不会提升变量y的赋值。

function foo() {
    var y; // 提升变量y的申明
    var x = 'Hello, ' + y;
    alert(x);
    y = 'Bob';
}

由于JavaScript的这一特性,我们在函数内部定义变量时,请严格遵守“在函数内部首先声明所有变量”这一规则。最常见的做法是用一个var声明函数内部所用到的变量:

function foo() {
    var
        x = 1, // x初始化为1
        y = x + 1, // y初始化为2
        z, i; // z和i为undefined
    // 其他语句:
    for (i=0; i<100; i++) {
        ...
    }
}

对象

普通创建对象

创建对象

已经有了一个包含一些属性的对象。如何使用JavaScript创建这个对象呢?方法如下:

var fido = {
    name: "Fido";
    weight: 40;
    breed: "Mixed";
    loves: ["walks","fetching balls"]
};

访问和操作对象

if (fido.weight > 25) {
    alert("Wonderful");
} else {
    alert("keep moving");
}
var breed = fido["breed"];
if (breed == "mixed") {
    alert("Best in show");
}
fido.weight = 27; //改变Fido的重量
fido.loves.push("chewing bones"); //向它的loves数组增加一个新元素
var prop;
for(prop in fido) {
    alert("Fido has a" + prop + " property"); //每次循环迭代时,变量prop会得到下一个属性名的相应串值
}
var likes = fido.loves;
var likesStr = "Fido likes";

for (var i = 0; i < likes.length; i++) {
    likesStr += " " + likes[i];
}
function bark(dog) {
    dog.weight = 28; //会同时改变fido中的值
}

bark(fido);

注意:将一个对象赋值给变量时,这个变量会包含这个对象的一个引用,而不是对象的副本,可以把引用想成是对象的一个指针。所有对该变量中属性的改变都会改变原对象的属性。

上述代码中,改变dog对象的weight属性时,实际上是修改的原对象fido的属性,而不是副本,所有不仅函数体内的dog对象发生了改变,函数体外的fido对象也发生了改变。

给对象增加方法

var fido = {
    name: "Fido";
    weight: 40;
    breed: "Mixed";
    loves: ["walks","fetching balls"]

    bark: function() {
        alert("Woof Woof");
    }
};

fido.bark(); //调用方法

构造函数创建对象

构造函数

function Dog(name,breed,weight) {

    this.name = name;
    this.breed = breed;
    this.weight = weight;

    this.bark = function() {
        if (this.weight) {
            alert(this.name + " say Woof!");
        }
    };
}

注意这个语法和对象的语法有所不同。这些是语句,所有需要一个“;”结束各语句。this用于指示对象中的属性,它就代表了新创建的实例对象。

创建对象

var fido = new Dog("Fido","Mixed",38); //new关键字创建一个对象
var tiny = new Dog("Tiny","Chawalla",18);

fido.bark();
tiny.bark();

prototype属性创建对象

prototype属性包含一个对象,所有实例对象需要共享的属性和方法,都放在这个对象里面;那些不需要共享的属性和方法,就放在构造函数里面。

实例对象一旦创建,将自动引用prototype对象的属性和方法。也就是说,实例对象的属性和方法分为两种,一种是本地的,一种是引用的:

  function DOG(name){
    this.name = name;
  }
  DOG.prototype = { species : '犬科' };

  var dogA = new DOG('大毛');
  var dogB = new DOG('二毛');

  alert(dogA.species); // 犬科
  alert(dogB.species); // 犬科

现在,species属性放在prototype对象中,两个实例对象共享的,只要修改了prototype对象,就会同时影响到两个实例对象。

  DOG.prototype.species = '猫科';

  alert(dogA.species); // 猫科
  alert(dogB.species); // 猫科

综上所述,由于所有实例对象共享同一个prototype对象,那么凶外界看起来,prototype对象就好像是实例对象的原型,而实例对象则好像继承了prototype对象一样。

window对象

window对象表示你的JavaScript程序的全局环境,同时还表示应用的主窗口,因此,包含很多核心的属性和方法,主要有:

|windwo||
|---|---|---
|location|属性|包含页面的URL
|status|属性|包含将在浏览器状态区显示一个字符串
|onload|属性|页面完全加载后调用的函数
|document|属性|包含DOM
|----|----|
|alert|方法|显示一个提醒
|prompt|方法|类似于alert,不过会从用户的到信息
|open|方法|打开一个新的浏览器窗口
|close|方法|关闭窗口
|setTimeout|方法|指定的时间间隔后调用一个处理程序
|setInterval|方法|以一个指定间隔反复调用一个处理程序

window是个全局对象,所有即使没有在前面加上window,window的属性或方法名也能顺利解析。

document对象

document实际上是window对象的一个属性,主要用于访问DOM。

元素对象

元素对象就是通过getElementById方法返回的对象。

结尾

window.onload = init();表示希望调用函数init
window.onload = init; 表示把init这个函数值赋给onload属性。

上一篇 下一篇

猜你喜欢

热点阅读