JavaScript极简入门教程（二）：对象和函数_javascript技巧

阅读本文需要有其他语言的编程经验。

JavaScript 中的简单类型包括：

1.数字
2.字符串
3.布尔（true 和 false）
4.null
5.undefined

此外的其他类型均是对象（我们不要被 typeof 操作符的返回值所迷惑），例如：

1.函数
2.数组
3.正则表达式
4.对象（对象自然也是对象）

对象基础

在 JavaScript 中，对象是属性的集合（对象为关联数组），每个属性包括：

1.属性名，必须为字符串
2.属性值，可以为除了 undefined 之外的任何值

通过对象 literal 创建对象：

复制代码代码如下:

PZJHTML5中文学习网 - HTML5先行者学习网
// 通过对象 literal {} 创建空对象PZJHTML5中文学习网 - HTML5先行者学习网
var empty_object = {};PZJHTML5中文学习网 - HTML5先行者学习网

对象的属性名和属性值：

复制代码代码如下:

PZJHTML5中文学习网 - HTML5先行者学习网
var stooge = {PZJHTML5中文学习网 - HTML5先行者学习网
    // "first-name" 为属性名，"Jerome" 为属性值PZJHTML5中文学习网 - HTML5先行者学习网
    "first-name": "Jerome",PZJHTML5中文学习网 - HTML5先行者学习网
    // "last-name" 为属性名，"Howard" 为属性值PZJHTML5中文学习网 - HTML5先行者学习网
    "last-name": "Howard"PZJHTML5中文学习网 - HTML5先行者学习网
};PZJHTML5中文学习网 - HTML5先行者学习网

如果属性名是合法的标识符，那么可以省略引号：

复制代码代码如下:

PZJHTML5中文学习网 - HTML5先行者学习网
var flight = {PZJHTML5中文学习网 - HTML5先行者学习网
    airline: "Oceanic",PZJHTML5中文学习网 - HTML5先行者学习网
    number: 815,PZJHTML5中文学习网 - HTML5先行者学习网
    departure: {PZJHTML5中文学习网 - HTML5先行者学习网
        IATA: "SYD",PZJHTML5中文学习网 - HTML5先行者学习网
        time: "2004-09-22 14:55",PZJHTML5中文学习网 - HTML5先行者学习网
        city: "Sydney"PZJHTML5中文学习网 - HTML5先行者学习网
    },PZJHTML5中文学习网 - HTML5先行者学习网
    arrival: {PZJHTML5中文学习网 - HTML5先行者学习网
        IATA: "LAX",PZJHTML5中文学习网 - HTML5先行者学习网
        time: "2004-09-23 10:42",PZJHTML5中文学习网 - HTML5先行者学习网
        city: "Los Angeles"PZJHTML5中文学习网 - HTML5先行者学习网
    }PZJHTML5中文学习网 - HTML5先行者学习网
};PZJHTML5中文学习网 - HTML5先行者学习网

我们看一下属性访问的例子：

复制代码代码如下:

PZJHTML5中文学习网 - HTML5先行者学习网
var owner = { name: "Name5566" };PZJHTML5中文学习网 - HTML5先行者学习网
 PZJHTML5中文学习网 - HTML5先行者学习网
owner.name; // "Name5566"PZJHTML5中文学习网 - HTML5先行者学习网
owner["name"]; // "Name5566"PZJHTML5中文学习网 - HTML5先行者学习网
 PZJHTML5中文学习网 - HTML5先行者学习网
owner.job; // undefinedPZJHTML5中文学习网 - HTML5先行者学习网
owner.job = "coder"; // 或者 owner["job"] = "coder";PZJHTML5中文学习网 - HTML5先行者学习网

如果属性名不是合法标识符，那么需要用引号包裹。不存在的属性值为 undefined。对象是通过引用而非按值传递：

复制代码代码如下:

PZJHTML5中文学习网 - HTML5先行者学习网
var x = {};PZJHTML5中文学习网 - HTML5先行者学习网
var owner = x;PZJHTML5中文学习网 - HTML5先行者学习网
owner.name = "Name5566";PZJHTML5中文学习网 - HTML5先行者学习网
x.name; // x.name === "Name5566"PZJHTML5中文学习网 - HTML5先行者学习网

这里 x 和 owner 引用同一个对象。

对象的属性可以使用 delete 操作符删除：

复制代码代码如下:

PZJHTML5中文学习网 - HTML5先行者学习网
delete obj.x; // 删除对象 obj 的 x 属性PZJHTML5中文学习网 - HTML5先行者学习网

对象的原型（prototype）

每一个对象都被链接了一个原型对象（prototype object），对象能够从原型对象中继承属性。我们通过对象 literal 创建一个对象，它的原型对象为 Object.prototype 对象（Object.prototype 对象本身没有原型对象）。我们在创建对象的时候，可以设置对象的原型对象（之后再讨论具体的设置方法）。在尝试获取（而非修改）对象的某个属性时，如果该对象不存在此属性，那么 JavaScript 会尝试从此对象的原型对象中获取此属性，如果原型对象中没有该属性，那么再从此原型对象的原型对象中查找，以此类推，直到 Object.prototype 原型对象。相比获取属性而言，我们修改对象的某个属性时，不会影响原型对象。

函数基础

在 JavaScript 中函数也是对象，其链接到 Function.prototype 原型对象（Function.prototype 链接到 Object.prototype）。函数存在一个名为 prototype 的属性，其值的类型为对象，此对象存在一个属性 constructor，constructor 的值为此函数：

复制代码代码如下:

PZJHTML5中文学习网 - HTML5先行者学习网
var f = function() {}PZJHTML5中文学习网 - HTML5先行者学习网
 PZJHTML5中文学习网 - HTML5先行者学习网
typeof f.prototype; // 'object'PZJHTML5中文学习网 - HTML5先行者学习网
typeof f.prototype.constructor; // 'function'PZJHTML5中文学习网 - HTML5先行者学习网
 PZJHTML5中文学习网 - HTML5先行者学习网
f === f.prototype.constructor; // truePZJHTML5中文学习网 - HTML5先行者学习网

函数是对象，你可以像使用对象一样使用函数，也就是说，函数可以保存在变量、数组中，可以作为参数传递给函数，函数内部可以定义函数。附带提及一下，函数有两个被隐藏的属性：

1.函数的上下文
2.函数的代码

函数的创建如下：

复制代码代码如下:

PZJHTML5中文学习网 - HTML5先行者学习网
var f = function add(a, b) {PZJHTML5中文学习网 - HTML5先行者学习网
    return a + b;PZJHTML5中文学习网 - HTML5先行者学习网
}PZJHTML5中文学习网 - HTML5先行者学习网
 PZJHTML5中文学习网 - HTML5先行者学习网
console.log(f); // 输出 [Function: add]PZJHTML5中文学习网 - HTML5先行者学习网

关键字 function 后的函数名是可选的，我们制定函数名主要出于几个目的：

1.为了递归调用
2.被调试器、开发工具等用来标识函数

很多时候我们并不需要函数名，没有函数名的函数被叫做匿名函数。有括号包裹的为参数列表。JavaScript 不要求实参和形参匹配，例如：

复制代码代码如下:

PZJHTML5中文学习网 - HTML5先行者学习网
var add = function(a, b) {PZJHTML5中文学习网 - HTML5先行者学习网
    return a + b;PZJHTML5中文学习网 - HTML5先行者学习网
}PZJHTML5中文学习网 - HTML5先行者学习网
 PZJHTML5中文学习网 - HTML5先行者学习网
add(1, 2, 3); // 实参和形参不匹配PZJHTML5中文学习网 - HTML5先行者学习网

如果实参过多，那么多余的实参会被忽略，如果实参过少，那么未被赋值的形参的值为 undefined。函数一定有一个返回值，如果没有通过 return 语句指定返回值，那么函数返回值为 undefined。

一个函数和其访问的外部变量组成一个闭包。这是 JavaScript 的关键魅力所在。

函数调用

每个函数被调用时，会接收到两个额外的参数：

1.this
2.arguments

this 的值和具体调用的模式有关，在 JavaScript 中有四种调用模式：

1.方法调用模式。对象的属性如果是函数，则称其为方法。如果一个方法通过 o.m(args) 被调用，this 为对象 o（由此可见，在调用时，this 和 o 才进行绑定），例如：

复制代码代码如下:

PZJHTML5中文学习网 - HTML5先行者学习网
var obj = {PZJHTML5中文学习网 - HTML5先行者学习网
    value: 0,PZJHTML5中文学习网 - HTML5先行者学习网
    increment: function(v) {PZJHTML5中文学习网 - HTML5先行者学习网
        this.value += (typeof v === 'number' ? v : 1);PZJHTML5中文学习网 - HTML5先行者学习网
    }PZJHTML5中文学习网 - HTML5先行者学习网
};PZJHTML5中文学习网 - HTML5先行者学习网
obj.increment(); // this === objPZJHTML5中文学习网 - HTML5先行者学习网

2.函数调用模式。如果一个函数不是一个对象的属性，那么它将作为一个函数被调用，这时候 this 被绑定到全局对象上，例如：

复制代码代码如下:

PZJHTML5中文学习网 - HTML5先行者学习网
message = 'Hello World';PZJHTML5中文学习网 - HTML5先行者学习网
var p = function() {PZJHTML5中文学习网 - HTML5先行者学习网
 console.log(this.message);PZJHTML5中文学习网 - HTML5先行者学习网
}PZJHTML5中文学习网 - HTML5先行者学习网
 PZJHTML5中文学习网 - HTML5先行者学习网
p(); // 输出 'Hello World'PZJHTML5中文学习网 - HTML5先行者学习网

这种行为有时候让人疑惑，看一个例子：

复制代码代码如下:

PZJHTML5中文学习网 - HTML5先行者学习网
obj = {PZJHTML5中文学习网 - HTML5先行者学习网
    value: 0,PZJHTML5中文学习网 - HTML5先行者学习网
    increment: function() {PZJHTML5中文学习网 - HTML5先行者学习网
        var helper = function() {PZJHTML5中文学习网 - HTML5先行者学习网
            // 对全局对象中的 value 加 1PZJHTML5中文学习网 - HTML5先行者学习网
            this.value += 1;PZJHTML5中文学习网 - HTML5先行者学习网
        }PZJHTML5中文学习网 - HTML5先行者学习网
 PZJHTML5中文学习网 - HTML5先行者学习网
        // helper 被作为一个函数来调用PZJHTML5中文学习网 - HTML5先行者学习网
        // 因此 this 为全局对象PZJHTML5中文学习网 - HTML5先行者学习网
        helper();PZJHTML5中文学习网 - HTML5先行者学习网
    }PZJHTML5中文学习网 - HTML5先行者学习网
};PZJHTML5中文学习网 - HTML5先行者学习网
 PZJHTML5中文学习网 - HTML5先行者学习网
obj.increment(); // obj.value === 0PZJHTML5中文学习网 - HTML5先行者学习网

我们期望的结果应该是：

复制代码代码如下:

PZJHTML5中文学习网 - HTML5先行者学习网
obj = {PZJHTML5中文学习网 - HTML5先行者学习网
    value: 0,PZJHTML5中文学习网 - HTML5先行者学习网
    increment: function() {PZJHTML5中文学习网 - HTML5先行者学习网
        var that = this;PZJHTML5中文学习网 - HTML5先行者学习网
        var helper = function() {PZJHTML5中文学习网 - HTML5先行者学习网
            that.value += 1;PZJHTML5中文学习网 - HTML5先行者学习网
        }PZJHTML5中文学习网 - HTML5先行者学习网
 PZJHTML5中文学习网 - HTML5先行者学习网
        helper();PZJHTML5中文学习网 - HTML5先行者学习网
    }PZJHTML5中文学习网 - HTML5先行者学习网
};PZJHTML5中文学习网 - HTML5先行者学习网
 PZJHTML5中文学习网 - HTML5先行者学习网
obj.increment(); // obj.value === 1PZJHTML5中文学习网 - HTML5先行者学习网

3.构造函数调用模式。意图使用 new 前缀的函数被叫做构造函数，例如：

复制代码代码如下:

PZJHTML5中文学习网 - HTML5先行者学习网
// Test 被叫做构造函数PZJHTML5中文学习网 - HTML5先行者学习网
var Test = function(string) {PZJHTML5中文学习网 - HTML5先行者学习网
    this.message = string;PZJHTML5中文学习网 - HTML5先行者学习网
}PZJHTML5中文学习网 - HTML5先行者学习网
 PZJHTML5中文学习网 - HTML5先行者学习网
var myTest = new Test("Hello World");PZJHTML5中文学习网 - HTML5先行者学习网

一个函数前面可以加上 new 来调用（这样的函数通常大写开头），加上 new 之后将创建一个链接到此函数的 prototype 属性的对象，且构造函数中 this 为此对象。

4.apply 调用模式。函数的 apply 方法被用于调用函数，其有两个参数，第一个为 this，第二个为参数数组，例如：

复制代码代码如下:

PZJHTML5中文学习网 - HTML5先行者学习网
var add = function(a, b) {PZJHTML5中文学习网 - HTML5先行者学习网
    return a + b;PZJHTML5中文学习网 - HTML5先行者学习网
}PZJHTML5中文学习网 - HTML5先行者学习网
 PZJHTML5中文学习网 - HTML5先行者学习网
var ret = add.apply(null, [3, 4]); // ret === 7PZJHTML5中文学习网 - HTML5先行者学习网

函数调用时，我们能够访问一个名为 arguments 的类数组（非真正的 JavaScript 数组），其包含了所有的实参，这样我们就能实现变长参数：

复制代码代码如下:

PZJHTML5中文学习网 - HTML5先行者学习网
var add = function() {PZJHTML5中文学习网 - HTML5先行者学习网
    var sum = 0;PZJHTML5中文学习网 - HTML5先行者学习网
    for (var i=0; i<arguments.length; ++i) {PZJHTML5中文学习网 - HTML5先行者学习网
        sum += arguments[i];PZJHTML5中文学习网 - HTML5先行者学习网
    }PZJHTML5中文学习网 - HTML5先行者学习网
    return sum;PZJHTML5中文学习网 - HTML5先行者学习网
}PZJHTML5中文学习网 - HTML5先行者学习网
 PZJHTML5中文学习网 - HTML5先行者学习网
add(1, 2, 3, 4);PZJHTML5中文学习网 - HTML5先行者学习网

异常

现在来说说 JavaScript 的异常处理机制。我们使用 throw 语句来抛出异常，try-cache 语句来捕获并处理异常：

复制代码代码如下:

PZJHTML5中文学习网 - HTML5先行者学习网
var add = function (a, b) {PZJHTML5中文学习网 - HTML5先行者学习网
    if (typeof a !== 'number' || typeof b !== 'number') {PZJHTML5中文学习网 - HTML5先行者学习网
        // 抛出异常PZJHTML5中文学习网 - HTML5先行者学习网
        throw {PZJHTML5中文学习网 - HTML5先行者学习网
            name: 'TypeError',PZJHTML5中文学习网 - HTML5先行者学习网
            message: 'add needs numbers'PZJHTML5中文学习网 - HTML5先行者学习网
        };PZJHTML5中文学习网 - HTML5先行者学习网
    }PZJHTML5中文学习网 - HTML5先行者学习网
    return a + b;PZJHTML5中文学习网 - HTML5先行者学习网
}PZJHTML5中文学习网 - HTML5先行者学习网
 PZJHTML5中文学习网 - HTML5先行者学习网
// 捕获并处理异常PZJHTML5中文学习网 - HTML5先行者学习网
try {PZJHTML5中文学习网 - HTML5先行者学习网
    add("seven");PZJHTML5中文学习网 - HTML5先行者学习网
// e 为抛出的异常对象PZJHTML5中文学习网 - HTML5先行者学习网
} catch (e) {PZJHTML5中文学习网 - HTML5先行者学习网
    console.log(e.name + ': ' + e.message);PZJHTML5中文学习网 - HTML5先行者学习网
}PZJHTML5中文学习网 - HTML5先行者学习网

为JavaScript 类型添加属性

JavaScript 中大多数类型存在构造函数：

1.对象的构造函数为 Object
2.数组的构造函数为 Array
3.函数的构造函数为 Function
4.字符串的构造函数为 String
5.数字的构造函数为 Number
6.布尔的构造函数为 Boolean
7.正则表达式的构造函数为 RegExp

我们可以向构造函数的 prototype 添加属性（常添加方法），使得此属性对相关变量可用：

复制代码代码如下:

PZJHTML5中文学习网 - HTML5先行者学习网
Number.prototype.integer = function() {PZJHTML5中文学习网 - HTML5先行者学习网
    return Math[this < 0 ? 'ceil' : 'floor'](this);PZJHTML5中文学习网 - HTML5先行者学习网
}PZJHTML5中文学习网 - HTML5先行者学习网
 PZJHTML5中文学习网 - HTML5先行者学习网
(1.1).integer(); // 1PZJHTML5中文学习网 - HTML5先行者学习网

作用域

JavaScript 需要通过函数来构建作用域：

复制代码代码如下:

PZJHTML5中文学习网 - HTML5先行者学习网
function() {PZJHTML5中文学习网 - HTML5先行者学习网
    // ...PZJHTML5中文学习网 - HTML5先行者学习网
}();PZJHTML5中文学习网 - HTML5先行者学习网

这里创建并执行了一个匿名函数。通过作用域能够隐藏不希望暴露的变量：

复制代码代码如下:

PZJHTML5中文学习网 - HTML5先行者学习网
var obj = function() {PZJHTML5中文学习网 - HTML5先行者学习网
    // 隐藏 value，外部无法访问PZJHTML5中文学习网 - HTML5先行者学习网
    var value = 0;PZJHTML5中文学习网 - HTML5先行者学习网
 PZJHTML5中文学习网 - HTML5先行者学习网
    return {PZJHTML5中文学习网 - HTML5先行者学习网
        // 仅此方法可以修改 valuePZJHTML5中文学习网 - HTML5先行者学习网
        increment: function() {PZJHTML5中文学习网 - HTML5先行者学习网
            value += 1;PZJHTML5中文学习网 - HTML5先行者学习网
        },PZJHTML5中文学习网 - HTML5先行者学习网
        // 仅此方法可以读取 valuePZJHTML5中文学习网 - HTML5先行者学习网
        getValue: function() {PZJHTML5中文学习网 - HTML5先行者学习网
            return value;PZJHTML5中文学习网 - HTML5先行者学习网
        }PZJHTML5中文学习网 - HTML5先行者学习网
    };PZJHTML5中文学习网 - HTML5先行者学习网
}();PZJHTML5中文学习网 - HTML5先行者学习网
 PZJHTML5中文学习网 - HTML5先行者学习网
obj.increment();PZJHTML5中文学习网 - HTML5先行者学习网
obj.getValue() === 1;PZJHTML5中文学习网 - HTML5先行者学习网

继承

JavaScript 实现继承的方式很多。
在创建对象时，我们可以设置对象关联的原型对象，我们这样做：

复制代码代码如下:

PZJHTML5中文学习网 - HTML5先行者学习网
// 创建一个对象 o，其原型对象为 {x:1, y:2}PZJHTML5中文学习网 - HTML5先行者学习网
var o = Object.create({x:1, y:2});PZJHTML5中文学习网 - HTML5先行者学习网

Object.create 方法被定义在 ECMAScript 5 中，如果你使用 ECMAScript 3 时可以自己实现一个 create 方法：

复制代码代码如下:

PZJHTML5中文学习网 - HTML5先行者学习网
// 如果未定义 Object.create 方法PZJHTML5中文学习网 - HTML5先行者学习网
if (typeof Object.create !== 'function') {PZJHTML5中文学习网 - HTML5先行者学习网
    // 创建 Object.create 方法PZJHTML5中文学习网 - HTML5先行者学习网
    Object.create = function (o) {PZJHTML5中文学习网 - HTML5先行者学习网
        var F = function () {};PZJHTML5中文学习网 - HTML5先行者学习网
        F.prototype = o;PZJHTML5中文学习网 - HTML5先行者学习网
        // 创建一个新对象，此对象的原型对象为 oPZJHTML5中文学习网 - HTML5先行者学习网
        return new F();PZJHTML5中文学习网 - HTML5先行者学习网
    };PZJHTML5中文学习网 - HTML5先行者学习网
}PZJHTML5中文学习网 - HTML5先行者学习网

通过 Object.create 方法我们进行基于原型继承：一个新对象直接继承一个旧对象的属性（相对于基于类的继承，这里无需类的存在，对象直接继承对象）。范例：

复制代码代码如下:

PZJHTML5中文学习网 - HTML5先行者学习网
var myMammal = {PZJHTML5中文学习网 - HTML5先行者学习网
    name: 'Herb the Mammal',PZJHTML5中文学习网 - HTML5先行者学习网
    get_name: function() {PZJHTML5中文学习网 - HTML5先行者学习网
        return this.name;PZJHTML5中文学习网 - HTML5先行者学习网
    },PZJHTML5中文学习网 - HTML5先行者学习网
    says: function() {PZJHTML5中文学习网 - HTML5先行者学习网
        return this.saying || '';PZJHTML5中文学习网 - HTML5先行者学习网
    }PZJHTML5中文学习网 - HTML5先行者学习网
};PZJHTML5中文学习网 - HTML5先行者学习网
 PZJHTML5中文学习网 - HTML5先行者学习网
// 继承 myMammalPZJHTML5中文学习网 - HTML5先行者学习网
var myCat = Object.create(myMammal);PZJHTML5中文学习网 - HTML5先行者学习网
myCat.name = 'Henrietta';PZJHTML5中文学习网 - HTML5先行者学习网
myCat.saying = 'meow';PZJHTML5中文学习网 - HTML5先行者学习网
myCat.purr = function(n) {PZJHTML5中文学习网 - HTML5先行者学习网
    var i, s = '';PZJHTML5中文学习网 - HTML5先行者学习网
    for (i = 0; i < n; i += 1) {PZJHTML5中文学习网 - HTML5先行者学习网
        if (s) {PZJHTML5中文学习网 - HTML5先行者学习网
            s += '-';PZJHTML5中文学习网 - HTML5先行者学习网
        }PZJHTML5中文学习网 - HTML5先行者学习网
        s += 'r';PZJHTML5中文学习网 - HTML5先行者学习网
    }PZJHTML5中文学习网 - HTML5先行者学习网
    return s;PZJHTML5中文学习网 - HTML5先行者学习网
};PZJHTML5中文学习网 - HTML5先行者学习网
myCat.get_name = function() {PZJHTML5中文学习网 - HTML5先行者学习网
    return this.says() + ' ' + this.name + ' ' + this.says();PZJHTML5中文学习网 - HTML5先行者学习网
};PZJHTML5中文学习网 - HTML5先行者学习网

上面的代码很简单，但是没法保护私有成员。我们可以使用模块模式。在模块模式中，某类对象由一个函数产生，并利用函数作用域保护私有成员不被外部访问：

复制代码代码如下:

PZJHTML5中文学习网 - HTML5先行者学习网
// mammal 函数，用于构造 mammal 对象PZJHTML5中文学习网 - HTML5先行者学习网
var mammal = function(spec) {PZJHTML5中文学习网 - HTML5先行者学习网
    // that 为构造的对象PZJHTML5中文学习网 - HTML5先行者学习网
    var that = {};PZJHTML5中文学习网 - HTML5先行者学习网
 PZJHTML5中文学习网 - HTML5先行者学习网
    // 公有方法 get_name 可被外部访问PZJHTML5中文学习网 - HTML5先行者学习网
    that.get_name = function() {PZJHTML5中文学习网 - HTML5先行者学习网
        // spec.name 外部无法直接访问PZJHTML5中文学习网 - HTML5先行者学习网
        return spec.name;PZJHTML5中文学习网 - HTML5先行者学习网
    };PZJHTML5中文学习网 - HTML5先行者学习网
 PZJHTML5中文学习网 - HTML5先行者学习网
    // 公有方法 says 可被外部访问PZJHTML5中文学习网 - HTML5先行者学习网
    that.says = function() {PZJHTML5中文学习网 - HTML5先行者学习网
        // spec.saying 外部无法直接访问PZJHTML5中文学习网 - HTML5先行者学习网
        return spec.saying || '';PZJHTML5中文学习网 - HTML5先行者学习网
    };PZJHTML5中文学习网 - HTML5先行者学习网
 PZJHTML5中文学习网 - HTML5先行者学习网
    return that;PZJHTML5中文学习网 - HTML5先行者学习网
};PZJHTML5中文学习网 - HTML5先行者学习网
 PZJHTML5中文学习网 - HTML5先行者学习网
// 创建 mammal 对象PZJHTML5中文学习网 - HTML5先行者学习网
var myMammal = mammal({name: 'Herb'});PZJHTML5中文学习网 - HTML5先行者学习网
 PZJHTML5中文学习网 - HTML5先行者学习网
// cat 函数，用于构造 cat 对象PZJHTML5中文学习网 - HTML5先行者学习网
var cat = function(spec) {PZJHTML5中文学习网 - HTML5先行者学习网
    spec.saying = spec.saying || 'meow';PZJHTML5中文学习网 - HTML5先行者学习网
 PZJHTML5中文学习网 - HTML5先行者学习网
    // cat 继承自 mammal，因此先构造出 mammal 对象PZJHTML5中文学习网 - HTML5先行者学习网
    var that = mammal(spec);PZJHTML5中文学习网 - HTML5先行者学习网
 PZJHTML5中文学习网 - HTML5先行者学习网
    // 添加公有方法 purrPZJHTML5中文学习网 - HTML5先行者学习网
    that.purr = function(n) {PZJHTML5中文学习网 - HTML5先行者学习网
        var i, s = '';PZJHTML5中文学习网 - HTML5先行者学习网
        for (i = 0; i < n; i += 1) {PZJHTML5中文学习网 - HTML5先行者学习网
            if (s) {PZJHTML5中文学习网 - HTML5先行者学习网
                s += '-';PZJHTML5中文学习网 - HTML5先行者学习网
            }PZJHTML5中文学习网 - HTML5先行者学习网
            s += 'r';PZJHTML5中文学习网 - HTML5先行者学习网
        }PZJHTML5中文学习网 - HTML5先行者学习网
        return s;PZJHTML5中文学习网 - HTML5先行者学习网
    };PZJHTML5中文学习网 - HTML5先行者学习网
 PZJHTML5中文学习网 - HTML5先行者学习网
    // 修改公有方法 get_namePZJHTML5中文学习网 - HTML5先行者学习网
    that.get_name = function() {PZJHTML5中文学习网 - HTML5先行者学习网
        return that.says() + ' ' + spec.name +PZJHTML5中文学习网 - HTML5先行者学习网
            ' ' + that.says();PZJHTML5中文学习网 - HTML5先行者学习网
        return that;PZJHTML5中文学习网 - HTML5先行者学习网
    };PZJHTML5中文学习网 - HTML5先行者学习网
};PZJHTML5中文学习网 - HTML5先行者学习网
 PZJHTML5中文学习网 - HTML5先行者学习网
// 创建 cat 对象PZJHTML5中文学习网 - HTML5先行者学习网
var myCat = cat({name: 'Henrietta'});PZJHTML5中文学习网 - HTML5先行者学习网

在模块模式中，继承是通过调用构造函数来实现的。另外，我们还可以在子类中访问父类的方法：

复制代码代码如下:

PZJHTML5中文学习网 - HTML5先行者学习网
Object.prototype.superior = function(name) {PZJHTML5中文学习网 - HTML5先行者学习网
    var that = this, method = that[name];PZJHTML5中文学习网 - HTML5先行者学习网
    return function() {PZJHTML5中文学习网 - HTML5先行者学习网
        return method.apply(that, arguments);PZJHTML5中文学习网 - HTML5先行者学习网
    };PZJHTML5中文学习网 - HTML5先行者学习网
};PZJHTML5中文学习网 - HTML5先行者学习网
 PZJHTML5中文学习网 - HTML5先行者学习网
var coolcat = function (spec) {PZJHTML5中文学习网 - HTML5先行者学习网
    // 获取子类的 get_name 方法PZJHTML5中文学习网 - HTML5先行者学习网
    var that = cat(spec), super_get_name = that.superior('get_name');PZJHTML5中文学习网 - HTML5先行者学习网
    that.get_name = function(n) {PZJHTML5中文学习网 - HTML5先行者学习网
        return 'like ' + super_get_name() + ' baby';PZJHTML5中文学习网 - HTML5先行者学习网
    };PZJHTML5中文学习网 - HTML5先行者学习网
    return that;PZJHTML5中文学习网 - HTML5先行者学习网
};PZJHTML5中文学习网 - HTML5先行者学习网

JavaScript极简入门教程（二）：对象和函数_javascript技巧_