javascript自定义对象

摘自MDN

自定义对象

在经典面向对象语言中，对象是指数据和在这些数据上进行的操作的集合。那么让我们来定义一个人名对象，他包括人的姓和名两个域（field）。名字的表示有两种方法：“姓 名”或“名，姓”。

function makePerson(first, last) {
    return {
        first: first,
        last: last
    }
}
function personFullName(person) {
    return person.first + ' ' + person.last;
}
function personFullNameReversed(person) {
    return person.last + ', ' + person.first
}
> s = makePerson("Simon", "Willison");
> personFullName(s)
Simon Willison
> personFullNameReversed(s)
Willison, Simon

上面的写法可以满足需要，但是看起来很笨拙。你将会在全局名字空间中写很多函数。我们真正需要的其实是如何使一个函数隶属于一个对象。而函数本身就是对象，那么很容易得到如下示例：

function makePerson(first, last) {
    return {
        first: first,
        last: last,
        fullName: function() {
            return this.first + ' ' + this.last;
        },
        fullNameReversed: function() {
            return this.last + ', ' + this.first;
        }
    }
}
> s = makePerson("Simon", "Willison")
> s.fullName()
Simon Willison
> s.fullNameReversed()
Willison, Simon

这里出现了一些我们之前没有见过的东西：关键字'this'，它被使用在函数体内，'this'指代当前的对象，也就是指是在哪个对象里调用了那个函数。如果你在一个对象上使用点或者花括弧，那么这个对象就成为了'this'。如果并没有使用“点”操作符来调用，那么'this'将指向全局对象（global object）。这是一个很常出错的地方。例如：

> s = makePerson("Simon", "Willison")
> var fullName = s.fullName;
> fullName()
undefined undefined

当我们调用fullName()时，'this'实际上是指向全局对象的。而并没有名为first或last的全局变量，那么它们两个的返回值都会是undefined。

下面我们将使用关键字'this'的优势来改进我们的makePerson函数：

function Person(first, last) {
    this.first = first;
    this.last = last;
    this.fullName = function() {
        return this.first + ' ' + this.last;
    }
    this.fullNameReversed = function() {
        return this.last + ', ' + this.first;
    }
}
var s = new Person("Simon", "Willison");

我们引入了另外一个关键字：'new'，它和'this'密切相关。它的作用是创建一个崭新的空对象，然后使用指向那个对象的'this'调用制定的函数。被'new'调用的函数成为构造函数。习惯的做法是将这些函数的首字母大写，这样用new调用他们的时候就容易识别了

那么我们的人名对象可以进一步完善了，但还是它们有一些不太好的角落。每次我们创建一个人名对象的时候，我们都在其中创建了两个新的函数对象--那么如果这个代码可以共享不是会更好么？

function personFullName() {
    return this.first + ' ' + this.last;
}
function personFullNameReversed() {
    return this.last + ', ' + this.first;
}
function Person(first, last) {
    this.first = first;
    this.last = last;
    this.fullName = personFullName;
    this.fullNameReversed = personFullNameReversed;
}

这种写法好在：我们只创建一次方法函数，在构造器中调用它们。那是否还有更好的方法呢？答案是肯定的。

function Person(first, last) {
    this.first = first;
    this.last = last;
}
Person.prototype.fullName = function() {
    return this.first + ' ' + this.last;
}
Person.prototype.fullNameReversed = function() {
    return this.last + ', ' + this.first;
}

Person.prototype是一个可以被Person的所有实例共享的对象。它是一个名叫"prototype chain"的查询链的一部分：当你企图取得一个Person并没有定义的原型时，JavaScript会先检查这个Person.prototype来判断是否存在。所以，任何赋与 Person.prototype 的东西都会为所有通过 this 对象构造的实例可用。

这个工具功能十分强大，JavaScript允许你在程序中的任何时候修改原型（prototype）中的一些东西。也就是说你可以在运行时给已存在的对象添加格外的方法：

> s = new Person("Simon", "Willison");
> s.firstNameCaps();
TypeError on line 1: s.firstNameCaps is not a function
> Person.prototype.firstNameCaps = function() {
    return this.first.toUpperCase()
}
> s.firstNameCaps()
SIMON

有趣地是，你还可以给JavaScript的内置函数的原型（prototype）添加东西。让我们给String添加一个方法用来返回逆序的字符串：

> var s = "Simon";
> s.reversed()
TypeError on line 1: s.reversed is not a function
> String.prototype.reversed = function() {
    var r = "";
    for (var i = this.length - 1; i >= 0; i--) {
        r += this[i];
    }
    return r;
}
> s.reversed()
nomiS

我们的新方法也可以在字符串文本化定义语法（string literals）

> "This can now be reversed".reversed()
desrever eb won nac sihT

正如我前面提到的，原型是组成链的一部分。那个链的根节点是Object.prototype，它包括了一个toString()方法--这个方法是在你试图将一个对象展现为字符串时调用的。这对于调试我们的Person对象很有用：

> var s = new Person("Simon", "Willison");
> s
[object Object]
> Person.prototype.toString = function() {
    return '<Person: ' + this.fullName() + '>';
}
> s
<Person: Simon Willison>

你是否还记得之前我们说的avg.apply()中的那个第一个参数null？那我们可以回过头来看一看。apply()的第一个参数应该是一个被当作'this'来看待的对象。比如，下面是一个 'new'方法的简单实现：

function trivialNew(constructor) {
    var o = {}; // Create an object
    constructor.apply(o, arguments);
    return o;
}

这并不是一个new的精确副本，因为它并没有创建原型（prototype）链。想举例说明apply()有些困难，因为它并不是你会经常使用的函数，但是了解它还是很有用的。

apply()有一个姐妹函数，名叫call，它也可以允许你设置'this'，但是带有一个扩展的参数列表，而不是一个数组。

function lastNameCaps() {
    return this.last.toUpperCase();
}
var s = new Person("Simon", "Willison");
lastNameCaps.call(s);
// Is the same as:
s.lastNameCaps = lastNameCaps;
s.lastNameCaps();