6.1、理解对象

创建对象最简单的两个方法：

（1）使用 Object ；

（2）使用对象字面量。

// 使用Objcet创建对象
var person = new Object();
person.name = 'Nicholas';
person.age = 29;
person.job = 'Software';

person.sayName = function() {
    alert(this.name);
}

// 使用对象字面量创建对象
var person1 = {
    name: 'Nicholas 1',
    age: 29,
    job: 'Software',

    sayName: function() {
        alert(this.name);
    }
};
person1.sayName();

6.1.1、属性类型

ES中有两种属性：数据属性和访问器属性，这两种属性有各自的特性，描述了属性的各种特征。

1.数据属性

数据属性包含一个数据值的位置。在这个位置可以读取和写入值。数据属性有4个描述其行为的特性。

[[Confiturable]]：表示能否通过 delete 删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性。
[[Enumerable]]：表示能够通过 for-in 循环返回属性。
[[Writable]]：表示能否修改属性的值。
[[Value]]：包含这个属性的数据值。读取属性值的时候，从这个位置读；写入属性值的时候，把新值保存在这个位置。这个特性的默认值为 undefined 。

要修改属性默认的特性，必须使用ES5的 Object.defineProperty() 方法。这个方法接受三个参数：属性所在的对象、属性的名字、一个描述符对象。描述符对象的属性必须是：configurable、enumerable、writable、value。调用该方法时configurable、enumerable、writable 特性的默认值为 false。

var person2 = {};
Object.defineProperty(person2, 'name', {
    writable: false,    // 表示属性值不可修改
    value: 'Nicholas'
});
console.log(person2.name);
person2.name = 'Greg';
console.log(person2.name);    // 修改没有效果，Nicholas

注意：一旦把属性的特性定义为不可配置（即：configurable: false），则只能修改属性的 writable 特性，除此之外，都会导致错误。具体代码如下所示：

var person4 = {};
Object.defineProperty(person4, 'name', {
    configurable: false, // 不能从对象中删除该属性
    value: 'Nicholas 4'
});

Object.defineProperty(person4, 'name', {
    configurable: true, //错误，因为前面已经定义为不可配置
    value: 'Nicholas 4'
});

2.访问器属性

访问器属性不包含数据值：它们包含一对 getter 和 setter 函数（不过，这两个函数都不是必需的）。访问器属性有如下4个特性：

[[Confiturable]]：表示能否通过 delete 删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为数据属性。
[[Enumerable]]：表示能够通过 for-in 循环返回属性。
[[Get]]：在读取属性时调用的函数。默认值为 undefined。
[[Set]]：在写入属性时调用的函数。默认值为 undefined。

注意：访问器属性不能直接定义，必须使用 Object.defineProperty() 来定义。代码如下所示：

var book = {
    _year: 2004, // 只能通过对象方法访问的属性
    edition: 1
};

Object.defineProperty(book, 'year', {
    get: function() {
        return this._year;
    },

    set: function(newValue) {
        if (newValue > 2004) {
            this._year = newValue;
            this.edition += newValue - 2004;
        }
    }
});
book.year = 2005;
console.log(book.edition);

注意：_year 前面的下划线是一种常用的记号，用于表示只能通过对象方法访问的属性。

6.1.2、定义多个属性特性

ES5定义了一个 Object.defineProperties() 方法。利用这个方法可以一次定义多个属性特性。

该方法接收两个对象参数：第一个对象是要添加和修改其属性的对象，第二个对象的属性与第一个对象要添加或修改的属性一一对应。

var book = {};

Object.defineProperties(book, {
    _year : {
        writable: true,
        value: 2004
    },

    edition : {
        writable: true,
        value: 1
    },

    year : {
        get : function() {
            return this._year;
        },

        set : function(newValue) {
            if (newValue > 2004) {
                this._year = newValue;
                this.edition += newValue - 2004;
            }
        }
    }
});
// 当执行该语句时，实际上会执行 set() 函数
book.year = 2005;
console.log(book._year);   // 2005
console.log(book.year);    // 2005
console.log(book.edition); // 2

6.1.3、读取属性的特性

ES5的 Object.getOwnPropertyDescriptor() 方法，可以取得给定属性的描述符（特性）。Object.getOwnPropertyDescriptor(属性所在对象, 属性名称)。其返回值是一个对象。

注意：在JS中，可以针对任何对象——包括DOM和BOM对象，使用 Object.getOwnPropertyDescriptor() 方法。

var book = {};

Object.defineProperties(book, {
    _year: {
        value: 2004
    },
    edition: {
        value: 1
    },

    year: {
        get: function() {
            return this._year;
        },
        set: function(newValue) {
            if(newValue > 2004) {
                this._year = newValue;
                this.edition += newValue - 2004;
            }
        }
    }
});

// 访问器属性
var descriptor1 = Object.getOwnPropertyDescriptor(book, 'year');
console.log(descriptor.configurable); // false
console.log(descriptor.enumerable);   // false
console.log(typeof descriptor.set);   // function
console.log(typeof descriptor.get);   // function

// 数据属性
var descriptor2 = Object.getOwnPropertyDescriptor(book, 'edition');
console.log(descriptor2.configurable); // false
console.log(descriptor2.enumerable);   // false
console.log(descriptor2.writable);     // true
console.log(descriptor2.value);        // 2

在JS中，可以针对任何对象——包括DOM和BOM对象，使用 Object.getOwnPropertyDescriptor() 方法。

6.2、创建对象

使用 Object 构造函数或对象字面量来创建单个对象具有明显的缺点：使用同一个接口创建很多对象，会产生大量重复代码。

创建对象有几种方法：

（1）使用Object创建对象

（2）使用对象直面量

（3）工厂模式：没有解决对象的识别问题（即怎样知道一个对象的类型）

（4）构造函数模式：每个方法都要在每个实例上重新创建一遍

当然可以把方法定义在全局作用域中，但是如此会有如下问题：

全局作用域中定义的函数实际上只能被特定的对象调用；

如果对象需要很多方法，那么需要定义很多全局函数，会造成没有封装性。

（5）原型模式：共享问题

6.2.1、工厂模式

工厂模式：用函数来封装以特定接口创建对象的细节。

function createPerson(name, age, job) {
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;

    o.sayName = function() {
        alert(this.name);
    };

    return o;
}

var person1 = createPerson('Nicholas 1', 29, 'Software');
var person2 = createPerson('Nicholas 2', 30, 'Web');
person1.sayName();  // Nicholas 1
person2.sayName();  // Nicholas 2

6.2.2、构造函数模式

构造函数如下所示：

function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;

    this.sayName = function() {
        alert(this.name);
    }
}

var person1 = new Person('Nicholas 1', 29, 'Software');
var person2 = new Person('Nicholas 2', 30, 'Web');
person1.sayName();  // Nicholas 1
person2.sayName();  // Nicholas 2

alert(person1.constructor == Person);   // true
alert(person2.constructor == Person);   // true
alert('-------------------------------');
alert(person1 instanceof Person);  // true
alert(person1 instanceof Object);   // true
alert(person2 instanceof Person);   // true
alert(person2 instanceof Object);   // true

要创建 Person 的新实例，必须使用 new 操作符。以这种方式调用构造函数实际上会经历以下 4 个步骤：

（1）创建一个对象；

（2）将构造函数的作用域赋给对象（因此 this 就指向了这个新对象）；

（3）执行构造函数中的代码（为这个新对象添加属性）；

（4）返回新对象。

使用构造函数创建的对象有一个 constructor（构造函数）属性，该属性指向构造函数（Person）。

注意：所有对象均继承自 Object。

1、将构造函数当做函数

普通函数和构造函数的区别在于是否使用 new 操作符来调用。使用 new 操作符来调用的函数为构造函数，否则为普通函数。

// 当做构造函数使用
var person3 = new Person('Nicholas 3', 31, 'Software 3');
person3.sayName();
// 作为普通函数使用
Person('Nicholas 4', 32, 'Software 4');
window.sayName();
console.log(window.age); // 32
// 在另一个对象的作用域中调用
var o = new Object();
Person.call(o, 'Nicholas 5', 33, 'Software 5');
o.sayName();

注意：当在全局作用域中调用一个函数时，this 对象总是指向 Global 对象（在浏览器中就是 window 对象）。

2、构造函数的问题

使用构造函数的主要问题，就是每个方法都要在每个实例上重新创建一遍。可以通过把函数定义转移到构造函数外部来解决这个问题。具体代码如下所示：

function Person1(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = sayName;
}

function sayName() {
    alert(this.name);
}

var person2 = new Person1('Nicholas', 29, 'Software');
var person3 = new Person1('Greg', 27, 'Doctor');
alert(person2.sayName == person3.sayName);    // true

如果把构造函数中的方法在外部进行定义也会出现问题：（1）在全局作用域中定义的函数实际上只能被某个对象调用，让全局作用域有点名不副实；（2）导致自定义的引用类型没有封装性。可以使用原型模式解决这些问题。

6.2.3、原型模式

我们创建的每个函数都有一个 prototype（原型）属性，这个属性是一个指针，指向一个对象，而这个对象的用途可以由特定类型的所有实例共享的属性和方法。如果按照字面意思来理解，那么 prototype 就是通过调用构造函数而创建的那个对象实例的原型对象。使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。

function Person() {
}

Person.prototype.name = 'Nicholas';
Person.prototype.age = 29;
Person.prototype.job = 'Software Engineer';
Person.prototype.sayName = function() {
    alert(this.name);
};

var person1 = new Person();
person1.sayName();  // Nicholas

var person2 = new Person();
person2.sayName();  // Nicholas

alert(person1.sayName == person2.sayName);  // true

person11 和 person21 访问的都是同一组属性和同一个 sayName() 函数。

1、理解原型对象

无论什么时候，只要创建了一个新函数，就会根据一组特定的规则为该函数创建一个 prototype 属性，这个属性指向函数的原型对象。在默认情况下，所有原型对象都会自动获取一个 constructor(构造函数) 属性，这个属性是一个指向 prototype 属性所在函数的指针。就拿前面的例子来说，Person.prototype.constructor 指向 Person。

创建了自定义的构造函数之后，其原型对象默认只会取得 constructor 属性；至于其他方法，则都是从 Object 继承而来。

Person的每个实例——person1和person2都包含一个内部属性，该属性仅仅指向了 Person.prototype；换句话说，它们与构造函数没有直接的关系。

prototypeObject(原型对象).isPrototypeOf(对象)，在此调用中如果对象继承自原型对象，则返回true；否则，返回false。

console.log(Person.prototype.isPrototypeOf(person1)); // true
console.log(Person.prototype.isPrototypeOf(person2)); // true

ES5中增加了一个新方法：Object.getPrototypeOf()，传入参数的对象，返回该对象的原型对象（即传入对象的 [[Prototype]] 值）。

alert(Object.getPrototypeOf(person1) == Person.prototype);  // true
alert(Object.getPrototypeOf(person1).name); // 'Nicholas'

代码读取某个对象的某个属性时的搜索路径：

（1）如果在实例中找到了具有给定名字的属性，则返回该属性的值；

（2）如果没有找到，则继续搜索指针指向的原型对象，在原型对象中查找具有给定名字的属性。

注意：

（1）原型最初只包含 constructor 属性，而该属性也是共享的，因此可以通过对象实例访问。

（2）虽然可以通过对象实例访问保存在原型中的值，但却不可能通过对象实例重写原型中的值。如果实例创建的属性和原型中的属性名相同，则该属性将会屏蔽原型中的那个属性。

function Person1() {

}

Person1.prototype.name = 'Nicholas 1';
Person1.prototype.age = 29;
Person1.prototype.job = 'Software Engineer';
Person1.prototype.sayName = function() {
    alert(this.name);
};

var person1 = new Person1();
var person2 = new Person1();

person1.name = 'Greg';
alert(person1.name);    // Greg
alert(person2.name);    // Nicholas 1

注意：使用 delete 操作符则可以完全删除实例属性，从而让我们能够重写访问原型中的属性。

function Person() {
}

Person.prototype.name = 'Nicholas';
Person.prototype.age = 29;
Person.prototype.job = 'Software Engineer';
Person.prototype.sayName = function() {
    alert(this.name);
}

var person1 = new Person();
var person2 = new Person();

person1.name = 'Greg';
alert(person1.name);    // Greg
alert(person2.name);    // Nicholas

delete person1.name;    // 删除实例中的属性
alert(person1.name);    // Nicholas

使用 hasOwnProperty() 方法可以检测一个属性是存在于实例中，还是存在于原型中。如果属性存在于对象实例中则返回 true。

function Person() {

}

Person.prototype.name = 'Nicholas';
Person.prototype.age = 29;
Person.prototype.job = 'Software';
Person.prototype.sayName = function() {
    alert(this.name);
};

var person1 = new Person();
var person2 = new Person();

alert(person1.hasOwnProperty('name'));  // false

person1.name = 'Greg';
alert(person1.name);    // 来自实例——Greg
alert(person1.hasOwnProperty('name'));  // true

alert(person2.name);    // 来自原型——Nicholas
alert(person2.hasOwnProperty('name'));  // false

delete person1.name;
alert(person1.name);    // 来自原型——Nicholas
alert(person1.hasOwnProperty('name'));  // false

2、原型与 in 操作符

有两种方法使用 in 操作符：单独使用和在 for-in 循环中使用。

（1）在单独使用时，in 操作符会在通过对象能够访问给定属性时返回 true，无论该属性存在于实例中还是原型中。

function Person() {
}

Person.prototype.name = 'Nicholas';
Person.prototype.age = 29;
Person.prototype.job = 'Software';
Person.prototype.sayName = function() {
    alert(this.name);
}

var person1 = new Person();
var person2 = new Person();

alert(person1.hasOwnProperty('name'));  // false
alert('name' in person1);   // true

person1.name = 'Greg';
alert(person1.name);    // Greg——来自实例
alert(person1.hasOwnProperty('name'));  // true
alert('name' in person1);   // true

alert(person2.name);    // Nicholas——来自原型
alert(person2.hasOwnProperty('name'));  // false
alert('name' in person2);   // true

delete person1.name;
alert(person1.name);    // Nicholas——来自原型
alert(person1.hasOwnProperty('name'));  // false
alert('name' in person1);   // true

（2）使用 for-in 循环时，返回的是所有能够通过对象访问的、可枚举的（enumerable）属性，其中既包括存在于实例中的属性，也包括存在于原型中的属性。屏蔽了原型中不可枚举属性（即将 [[Enumerable]] 标记为 false 的属性）的实例也会在 for-in 循环中返回，因为根据规定，所有开发人员定义的属性都是可枚举的——只有在 IE8 及更早版本中例外。

ES5 也将 constructor 和 prototype 属性的 [[Enumerable]] 特性设置为 false。

function Student() {

}
Object.defineProperty(Student.prototype, 'name', {
    writable: true,   // 必须设置为 true
    value: 'Nicholas'
});

var st = new Student();
st.name = 'Greg';

for (var property in st) {
    console.log(property);
}

要取得对象上所有可枚举的实例属性，可以使用ES5的 Object.keys() 方法。这个方法接收一个对象作为参数，返回一个包含所有可枚举属性的字符串数组（只会返回当前对象中的属性，原型中的属性不会返回）。

function Person() {
}

Person.prototype.name = 'Nicholas';
Person.prototype.age = 29;
Person.prototype.job = 'Software';
Person.prototype.sayName = function() {
    alert(this.name);
}

var keys = Object.keys(Person.prototype);
alert(keys);    // "name,age,job,sayName"

var p1 = new Person();
p1.name = 'Rob';
p1.age = 31;
var p1keys = Object.keys(p1);
alert(p1keys);  // "name,age"

如果你想要得到所有实例属性，无论它是否可枚举，都可以使用 Object.getOwnPropertyNames() 方法。

var keys = Object.getOwnPropertyNames(Person.prototype);
alert(keys);    // "constructor,name,age,job,sayName"

3、更简单的原型语法

function Person() {
}

Person.prototype = {
    name: 'Nicholas',
    age: 29;
    job: 'Software',
    sayName: function() {
        alert(this.name);
    }
};

上面代码执行结果框图如下所示：

由上图可知，当给构造函数的原型赋值为对象字面量时，实际上是重写了构造函数的原型对象。最终该原型的 constructor 属性指向的是 Object 构造函数。

var friend = new Person();

alert(friend instanceof Object);    // true
alert(friend instanceof Person);    // true
alert(friend.constructor == Person);    // false
alert(friend.constructor == Object);    // true

4、原型的动态性

我们对原型对象所做的任何修改都能够立即从实例上反映出来——即使是先创建了实例后修改原型也照样如此。

var friend = new Person();

Person.prototype.sayHi = function() {
    alert('Hi');
}

friend.sayHi(); // Hi

注意：实例中的指针仅指向原型，而不指向构造函数。

function Person() {
}

var friend = new Person();

Person.prototype = {    // 重写了原型对象
    constructor: Person,
    name: 'Nicholas',
    age: 29,
    job: 'Software',
    sayName: function() {
        alert(this.name);
    }
};

friend.sayName();    // 会出现错误

上面代码的具体图解如下所示：

如图所示，重写原型对象切断了现有原型与任何之前已经存在的对象实例之间的联系；它们引用的任然是最初的原型。

5、原生对象的原型

通过原生对象的原型，不仅可以取得所有默认方法的引用，而且也可以定义新方法。

String.prototype.startsWidth = function (text) {
    return this.indexOf(text) == 0;
};

var msg = 'Hello World!';
alert(msg.startsWith('Hello')); // true

6、原型对象的问题

原型对象的缺点：

（1）它省略了为构造函数传递初始化参数这一环节，结果所有实例在默认的情况下都将取得相同的属性值。

（2）原型模式的最大问题是由其共享的本性所导致的。

function Person() {}

Person.prototype = {
    constructor: Person,
    name: 'Nicholas',
    age: 29,
    job: 'Software',
    friends: ["Shelby", "Court"],
    sayName: function() {
        alert(this.name);
    }
};

var person1 = new Person();
var person2 = new Person();

person1.friends.push('Van');

alert(person1.friends); // "Shelby,Court,Van"
alert(person2.friends); // "Shelby,Court,Van"
alert(person1.friends === person2.friends); // true

6.2.4、组合使用构造函数模式和原型模式

创建自定义类型的最常见方式，就是组合使用构造函数模式与原型模式。

构造函数模式：用于定义实例属性；

原型模式：用于定义方法和共享的属性。

function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends = ['Shelby', 'Court'];
}

Person.prototype = {
    constructor: Person,
    sayName: function() {
        alert(this.name);
    }
};

var person1 = new Person('Nicholas', 29, 'Software');
var person2 = new Person('Greg', 27, 'Doctor');

person1.friends.push('Van');
alert(person1.friends); // "Shelby,Court,Van"
alert(person2.friends); // "Shelby,Court"
alert(person1.friends === person2.friends); // false
alert(person1.sayName === person2.sayName); // true

6.2.5、动态原型模式

动态原型模式：把所有信息都封装在了构造函数中，而通过在构造函数中初始化原型（仅在必要的情况下），有保持了同时使用构造函数和原型的优点。

function Person(name, age, job) {
    // 属性
    this.name = name;
    this.age = age;
    this.job = job;

    // 方法
    // 这段代码只会在初次调用构造函数是才会执行
    if (typeof this.sayName != 'function') {
        Person.prototype.sayName = function() {
            alert(this.name);
        };
    }
}

var friend = new Person('Nicholas', 29, 'Software');
friend.sayName();    // Nicholas

6.2.6、寄生构造函数

这种模式的基本思想是创建一个函数，该函数的作用仅仅是封装创建对象的代码，然后再返回新创建的对象；但从表面上看，这个函数又很想典型的构造函数。

function Person(name, age, job) {
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function() {
        alert(this.name);
    };

    return o;
}

var friend = new Person('Nicholas', 29, 'Software');
friend.sayName();   // Nicholas

构造函数在不返回值的情况下，默认会返回新对象实例。通过在构造函数的末尾添加一个return语句，可以重写调用构造函数时返回的值。

这个模式可以在特殊情况下用来为对象创建构造函数。假设我们想创建一个具有额外方法的特殊数组。由于不能直接修改Array构造函数，因此可以使用这个模式。

function SpecialArray() {
    // 创建数组
    var values = new Array();

    // 添加值
    values.push.apply(values, arguments);

    // 添加方法
    values.toPipedString = function() {
        return this.join("|");
    };

    // 返回数组
    return values;
}

var colors = new SpecialArray('red', 'blue', 'green');
alert(colors.toPipedString());

注意：寄生构造函数模式，返回的对象与构造函数或者与构造函数的原型属性之间没有关系；也就是说，构造函数返回的对象与在构造函数外部创建的对象没有什么不同。

6.2.7、稳妥构造函数模式

所谓稳妥对象，指的是没有公共属性，而且其方法也不引用 this 的对象。

不同点：（1）新创建对象的实例方法不引用 this；（2）不使用 new 操作符调用构造函数。

function Person(name, age, job) {
    // 创建要返回的对象
    var o = new Object();

    // 可以在这里定义私有变量和函数

    // 添加方法
    o.sayName = function() {
        alert(name);
    };

    // 返回对象
    return o;
}

var friend = Person('Nicholas', 29, 'Software');
friend.sayName();   // Nicholas

参考文献

[1]《JavaScript高级程序设计（第3版）》

《JavaScript高级程序设计（第3版）》第6章面向对象的程序设计总结一

6.1、理解对象

6.1.1、属性类型

1.数据属性

2.访问器属性

6.1.2、定义多个属性特性

6.1.3、读取属性的特性

6.2、创建对象

6.2.1、工厂模式

6.2.2、构造函数模式

1、将构造函数当做函数

2、构造函数的问题

6.2.3、原型模式

1、理解原型对象

2、原型与 in 操作符

3、更简单的原型语法

4、原型的动态性

5、原生对象的原型

6、原型对象的问题

6.2.4、组合使用构造函数模式和原型模式

6.2.5、动态原型模式

6.2.6、寄生构造函数

6.2.7、稳妥构造函数模式

参考文献

猜你喜欢

《JavaScript高级程序设计（第3版）》第6章 面向对象的程序设计总结一

6.1、理解对象

6.1.1、属性类型

1.数据属性

2.访问器属性

6.1.2、定义多个属性特性

6.1.3、读取属性的特性

6.2、创建对象

6.2.1、工厂模式

6.2.2、构造函数模式

1、将构造函数当做函数

2、构造函数的问题

6.2.3、原型模式

1、理解原型对象

2、原型与 in 操作符

3、更简单的原型语法

4、原型的动态性

5、原生对象的原型

6、原型对象的问题

6.2.4、组合使用构造函数模式和原型模式

6.2.5、动态原型模式

6.2.6、寄生构造函数

6.2.7、稳妥构造函数模式

参考文献

猜你喜欢

《JavaScript高级程序设计（第3版）》第6章面向对象的程序设计总结一