《JS高程》面向对象的程序设计学习笔记

作者: DHFE | 来源:发表于2018-02-23 01:27 被阅读9次

理解对象

创建自定义对象的最简单方式就是创建一个Object实例，然后再为它添加属性和方法。

            var person = new Object();
            person.name = "Nicholas";
            person.age = 29;
            person.job = "Software Engineer";
            person.sayName = function() {
                alert(this.name);
            }

或是对象字面量语法式创建。

            var person = {
                name:"Nicholas",
                age:29,
                job:"Software Engineer",
                sayName:function() {
                    alert(this.name);
                }
            };

这两种例子所达到的效果是相同的，都有相同属性和方法。这些属性在创建时都带有一些特征值（characteristic），JavaScript通过这些特征值来定义它们的行为。

属性类型

ECMA5在定义只有内部采用的特性（attribute）时，描述了属性（property）的各种特征。为了表示特性是内部值，该规范把他们放在了两对儿方括号中，例如[[Enumerable]]。
ECMAScipt中有两种属性：数据属性和访问器属性。

数据属性

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

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

            var person = {
                name:"Nicholas"
            };

这里创建了一个名为name的属性，为它指定的值是Nicholas。也就是说，[[Value]]特性将被设置为Nicholas，而对这个值的任何修改都将反映在这个位置。

如若要修改属性默认特性，必须使用ECMAScript5的Object.defineProperty()方法。这个方法接受三个参数：属性所在的对象、属性的名字和一个描述的对象。其中描述符（descriptor）对象的属性必须是：configurable、enumerable、writable和value。设置其中的一或多个值，可以修改对应的特性值。

            var person = {};
            Object.defineProperty(person,"name",{
                writable:false,
                value:"Nicholas"
            });
            
            console.log(person.name);    //"Nicholas"
            person.name = "Greg";
            console.log(person.name);    //"Nicholas"

这个例子创建了一个名为name的属性，它的值是只读的。这个属性的值是不可修改的，如果尝试的为它指定新值，则在非严格模式下，赋值操作将被忽视；严格模式下，赋值操作将会抛出错误。

            "use strict"
            var person = {};
            Object.defineProperty(person,"name",{
                writable:false,
                value:"Nicholas"
            });
            
            console.log(person.name);    //"Nicholas"
            person.name = "Greg";          
            // "Uncaught TypeError: Cannot assign to read only property 'name' of #<Object>"

类似规则也适用与不可配置的属性。例如：

            var person = {};
            Object.defineProperty(person,"name",{
                configurable:false,
                value:"Nicholas"
            })
            
            console.log(person.name);   //"Nicholas"
            delete person.name;
            console.log(person.name);   //"Nicholas"

把configurable设置为false，表示不能从对象中删除属性。如果对这个属性调用delete，则在非严格模式下什么也不会发生，在严格模式下会导致错误。而且，一旦把属性定义为不可配置的，就不能再把它便会可配置了。此时，再调用Object.defineProperty()方法修改除writable之外的特性，都会导致错误：

            var person = {};
            Object.defineProperty(person,"name",{
                configurable:false,
                value:"Nicholas"
            })
            Object.defineProperty(person,"name",{
                configurable:true,
                value:"Nicholas"
            })
            //"Uncaught TypeError: Cannot redefine property: name"

或

            var person = {};
            Object.defineProperty(person,"name",{
                configurable:false,
                value:"Nicholas"
            })
            person.name = "Jason";
            console.log(person.name);   // Nicholas

栗子

            var person = {};
            Object.defineProperty(person,"name",{
                configurable:false,
                value:"Nicholas"
            })
            Object.defineProperty(person,"name",{
                writable:true
            })
       
            person.name = "Jason";
            console.log(person.name);
            // configurable为false，writable是唯一可修改的特性
            // 哪怕writable为true,也无法重新设置属性值

可以多次调用Object.defineProperty()方法修改同一个属性，但在把congfigurable特性设置为false之后就会有限制了。
在调用Object.defineProperty()方法创建一个新的属性时，如果不指定，configurable、enumerable、writable特性值的默认值都是false。

简化而言就是，按照普通的使用方法（对象字面量，构造对象）定义对象，创建属性时，特性默认值都为true，value特性默认值undefined。
但是使用Object.defineProperty()来创建属性，则三个特性值都将为false。

IE浏览器支持数据属性的最低版本支持为IE8

访问器属性

访问器属性不包含数据值；它们包含一对儿getter和setter函数就（不过，这两个函数都不是必须的）。在读取访问器属性时，会调用getter函数，这个函数负责返回有效的值；在写入访问器属性时，会调用setter函数并传入新值，这个函数负责决定如何处理数据。访问器属性有如下4个特性。

[[Configurable]]：表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性。如直接在对象上定义属性，默认值为true
[[Enumerable]]：表示能否通过for-in循环返回属性。默认值为true，即可枚举的。
[[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 = this.edition+newValue-2004;
                    }
                }
            });
            
            book.year = 2005;
            console.log(book.edition);    // 2

以上代码创建了一个book对象，并给它定义两个默认属性：_year和edition。_year前面的下划线是一种常用的记号，用于表示只能通过对象方法访问的属性。而访问器属性year则包含一个getter函数和一个setter函数。getter函数返回_year的值，setter函数通过计算来确定正确的版本，因此，把year属性修改为2005会导致_year变成2005，而edition变为2。这是使用访问器属性的常见方式，即设置一个属性的值会导致其他属性发生变化。
不一定非要同时指定getter和setter。只指定getter意味属性是不能写，尝试写入属性会被忽略。在严格模式下，尝试写入只指定了getter函数的属性会抛出错误。类似地，只指定setter函数的属性也不能读，否则在非严格模式下会返回undefined，严格模式下会抛出错误。

            "use strict"
            var book = {
                _year:2004,
                edition:1
            };
            
            Object.defineProperty(book,"year",{
                get:function(){
                    return this._year;
                }
            });
            book.year = 2004;
            // "Uncaught TypeError: Cannot set property year of #<Object> which has only a getter"
            // 尝试写入失败

在这些方法之前，一般使用两个非标准方法：__defineGetter__()，__defineSetter__()

            var book = {
                _year:2004,
                edition:1
            };
            
            // 定义访问器属性的旧有方法
            book.__defineGetter__("year",function() {
                return this._year;
            });
            book.__defineSetter__("year",function(newValue) {
                if (newValue>2004) {
                    this._year = newValue,
                    this.edition += newValue-2004;
                }
            });
            
            book.year = 2005;    // 写入属性
            console.log(book.edition);    // 2 
            // 修改了_year

在不支持Object.defineProperty()方法的浏览器中不能修改Configurable和Enumerable。

定义多个属性

由于为对象定义多个属性的可能性很大，ES5定义了一个Object.defineProperties()方法。利用这个方法可以通过描述符一次定义多个属性。这个方法接收两个对象参数：第一个对象是要添加和修改其属性的对象，第二个对象的属性与第一个对象中要添加或修改的属性一一对应。

            var book = {};
            Object.defineProperties(book,{
                _year:{
                    value:2004,
                    writable:true
                },
                edition:{
                    value:1,
                    writable:true
                },
                year:{
                    get:function() {
                        return this._year;
                    },
                    set:function(newValue) {
                        if (newValue>2004) {
                            this._year = newValue;
                            this.edition += newValue - 2004;
                        }
                    }
                }
            });
            
            book.year = 2018;
            console.log(book.edition);    //15

支持Object.defineProperties()方法的浏览器有IE9+、FireFox4+、Safari5+、Opera12+和Chrome。

支持属性的特性

使用ECMAScript5的Object.getOwnPropertyDescriptor()方法，可以取得给定属性的描述符。这个方法接收两个参数：属性所在的对象和要读取其描述符的属性名称。返回值是一个对象，如果是访问器属性，这个对象的属性有configurable、enumerable、get和set；如果是数据属性，这个对象的属性有configurable,enumerable,writable,value。

            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 descriptor = Object.getOwnPropertyDescriptor(book,"_year");
            console.log(descriptor.value);    // 2004
            console.log(descriptor.configurable);    // false
            
            console.log(typeof descriptor.get);    // undefined 对象是数据属性
            
            var descriptor = Object.getOwnPropertyDescriptor(book,"year");    // 对象是访问器属性
            console.log(descriptor.value);    // undefined
            console.log(descriptor.enumerable);    // false
            console.log(typeof descriptor.get);    // function

对于数据属性_year，value等于最初的值，configurable是false，而get等于undefined。
对于访问器属性year，value等于undefined，enumerable是false，而get是一个指向getter函数的指针。

创建对象

工厂模式

            function createPerson(name,age,job) {
                var o = new Object();
                o.name = name;
                o.age = age;
                o.job = job;
                o.sayName = function() {
                    console.log(this.name);
                };
                return 0;
            }
            
            var person1 = createPerson("Nicholas",29,"Software Engineer");
            var person2 = createPerson("Greg",27,"Doctor");

函数createPerson()能够根据接受的参数来构建一个包含所有必要信息的person对象。可以无数次调用这个函数，而每次它都返回一个包含三个属性一个方法的对象。工厂模式虽然解决了创建多个相似对象的问题，但却没有解决对象识别的问题。

构造函数模式

ECMAScript中的构造函数可用来创建特定类型的对象。像Object和Array这样的原生构造函数，在运行时会自动出现在执行环境中。此外，也可以创建自定义的构造函数，从而定义自定义对象类型的属性和方法。

            function Person(name,age,job) {
                this.name= name;
                this.age = age;
                this.job = job;
                this.sayName = function() {
                    console.log(this.name);
                };
            }
            
            var person1 = new Person("Nicholas",29,"Software Engineer");
            var person2 = new Person("Greg",27,"Doctor");

Person()函数取代了createPerson()函数。Person()函数中的代码除了与createPerson()相同的部分外，还存在一些不同之初。

没有显式地创建对象
直接将属性和方法赋给了this对象
没有return语句

此外还应该注意到函数名Person使用的是大写字母P。按照惯例，构造函数始终都应该以大写字母开头，而非构造函数则应该以小写字母开头。这个做法借鉴其他OO语言，主要是为了区别于ECMAScript中的其他函数；因为构造函数本身也是函数，只不过可以用来创建对象而已。
要创建Person的新实例，必须使用new操作符。以这种方式调用构造函数会经历4个步骤：

创建一个新对象；
将构造函数的作用域给新对象（因此this就指向了新对象）；
执行构造函数中的代码（为这个新对象添加属性）；
返回新对象。

person1和person2分别保存着Person的一个不同的实例。这两个对象都有一个constructor（构造函数）属性，该属性指向Person。
对象的constructor属性最初是用来表示对象类型的。但是提到检测对象类型，还是instanceof操作符可靠一些。

            console.log(person1 instanceof Object);    // true
            console.log(person1 instanceof Person);    // true
            console.log(person2 instanceof Object);    // true
            console.log(person2 instanceof Person);    // true

创建自定义的构造函数意味着将来可以将它的实例标识为一种特定的类型；而这正是构造函数模式胜过工厂模式的地方。person1和person2之所以同时是Object的实例，是因为所有对象均继承自Object。

将构造函数当做函数
构造函数与其他函数唯一区别，在于调用它们的方式不同。不过，构造函数毕竟也是函数，不存在定义构造函数的特殊语法。任何函数，只要通过new操作符来调用，那它就可以作为构造函数；而任何函数，如果不通过new操作符来调用，那它跟普通函数也没任何区别。

            function Person(name,age,job) {
                this.name= name;
                this.age = age;
                this.job = job;
                this.sayName = function() {
                    console.log(this.name);
                };
            }
           
            // 当做构造函数调用
            var person = new Person("Nicholas",29,"Software Engineer");
            person.sayName();    // "Nicholas"
            
            // 作为普通函数调用
            Person("Greg",28,"Doctor");   //添加到window
            window.sayName();    // "Greg"
            
            // 在另一个对象的作用域中调用
            var o = new Object();
            Person.call(o,"Kristen",25,"Nurse");
            o.sayName();    // "Kristen"

可以看到，不使用new操作符调用Person()的情况，属性和方法都被添加给window对象。
最后，也可以使用call()或者apply()在某个特殊对象的作用域中调用Person()函数，这里是在对象o的作用域中调用的，因此调用后的o就拥有了所有属性和sayName()方法。

构造函数的问题
构造函数模式虽然好用，但也并不是没有缺点。
构造函数的主要问题，就是每个方法都要在实例上重新创建一遍。person1和person2都有一个名为sayName()的方法，但那两个方法不是同一个Function的实例。ECMAScript中的函数是对象，因此每定义一个函数，也就是实例化了一个对象。从逻辑角度讲，构造函数也可以这样定义。

function Person(name,age,job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = new Function(
        "console.log(this.name)"
    )
}

从这个角度上看构造函数，更容易明白每个Person实例都包含一个不同的Function实例（以显示name属性）。以这种方式创建函数，会导致不同的作用域链和标识符解析，但创建Function新实例的机制仍然是相同的。因此，不同实例上的同名函数时不相等的，以下证明：

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

console.log(person1.sayName == person2.sayName);    // false

但是创建两个一样的功能的Function实例没有的确没有必要；况且有this对象在，根本不同在执行代码前就把函数绑定到特定对象上面。因此，大可像下面这样，通过把函数定义转移到外部来解决问题。

function sayName() {            // 全局函数sayName，任何Perzon的实例均可使用sayName函数
    console.log(this.name);
}

var person1 = new Person("Nicholas",29,"Software Engineer");
var person2 = new Person("Greg",27,"Dcoter");

person1.sayName();
person2.sayName();

将sayName属性设置成全局的sayName函数，这样一来，sayName包含的是一个指向函数的指针，因此person1和person2对象就共享了全局作用域中定义的同一个sayName函数。
但是新问题是：在全局作用域中定义的函数实际上只能被某个对象调用，这让全局作用域有点名不副实。而更让人无法接受的是：如果对象需要定义很多方法，那么就要定义很多个全局函数，这样这个自定义引用类型就丝毫没有封装性可言了，但我们可以用原型模式来解决。

原型模式

我们创建的每一个函数都要一个prototype原型属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。如果按照字面意思理解，那么prototype就是通过调用构造函数而创建的那个实例对象的原型对象。
换句话说，不必在构造函数中定义对象实例的信息，而是可以这些信息直接添加到原型对象中：

function Person() {
    Person.prototype.name = "Nicholas";
    Person.prototype.age = 29;
    Person.prototype.job = "Software Engineer";
    Person.prototype.sayName = function() {
        console.log(this.name);
    };
};

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

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

console.log(person1.sayName == person2.sayName);    // true

我们将sayName函数方法和所有属性直接添加到了Person的prototype属性中，构造函数变成了空函数。即便如此，也仍然可以通过调用构造函数来创建新对象，而且新对象还会具有相同的属性和方法。但与构造函数不同的是，新对象的这些属性和方法是由所有实例共享的。换句话说，person1和person2访问的都是同一组属性和同一个sayName函数。要理解原型模式的工作原理，必须先理解ECMAScript中原型对象的性质。

理解原型对象
无法什么时候，只要创建了一个新函数，就会根据一组特定的规则为该函数创建一个prototype属性，这个属性指向函数的原型对象。默认情况下，所有原型对象都会自动获得一个constructor属性，这个属性指向prototype属性所在函数的指针。
如前面的就是：

console.log(Person.prototype.constructor == Person);     // true

创建了自定义的构造函数之后，其原型对象默认只会取得constructor属性；至于其他方法，则都是从Object继承而来的。当调用构造函数创建一个新实例之后，该实例内部将包含一个指针，指向构造函数对象原型对象。ECMA-262第5版管这个指针叫[[Prototype]] 。虽然在脚本中没有标准方式访问prototype，但FireFox、Safari和Chrome在每个对象上都支持一个属性proto；而在其他实现中，这个属性对脚本则是完全不可见的。不过，要明确的真正重要的一点就是，这个链接存在于实例与构造函数之间，而不是存在于实例与构造函数之间。如图：

上图展示了Person构造函数、Person的原型属性以及Person现有的两个实例之间的关系。
Person.prototype指向了原型对象，而Person.prototype.constructor又指回了Person。原型对象中除了包含constru属性之外，还包括后来添加的其他属性。Person的每个实例person1和person2都包含一个内部属性，该属性仅仅指向了Person.prototype；换句话说，它们和构造函数没有直接关系。此外，虽然这两个实例都不包含属性和方法，但我们可以调用person1.sayName()，这是通过查找对象属性的过程来实现的。

虽然在所有实现中都无法访问到[[Prototype]]，但可以通过isPrototypeOf()方法来确定对象之间是否存在这种关系。从本质讲，如果[[Prototype]]指向调用isPrototypeOf()方法的对象，那么这个方法就返回true。

function Person() {
    Person.prototype.name = "Nicholas";
    Person.prototype.age = 29;
    Person.prototype.job = "Software Engineer";
    Person.prototype.sayName = function() {
        console.log(this.name);
    };
};

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

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

MDN-isPrototypeOf()

// MDN栗子
function Foo() {}
function Bar() {}
function Baz() {}

Bar.prototype = Object.create(Foo.prototype);
Baz.prototype = Object.create(Bar.prototype);

var baz = new Baz();

// console.log(Baz.prototype.isPrototypeOf(baz)); // true
// console.log(Bar.prototype.isPrototypeOf(baz)); // true
// console.log(Foo.prototype.isPrototypeOf(baz)); // true
// console.log(Object.prototype.isPrototypeOf(baz)); // true

// 将Foo的原型创建到Bar的原型中，将Bar原型创建到Baz的原型中，构造原型链
// 所以Baz的实例可以通过__proto__查找Baz.prototype，并一直向上搜寻到Bar和Foo的原型中。

ES5新增一个新方法，叫Object.getPrototypeOf()，在所有支持的实现中，这个方法返回[[Prototype]]的值。

console.log(
    Object.getPrototypeOf(person1) == Person.prototype
);    // true
console.log(
    Object.getPrototypeOf(person1).name;   // "Nicholas"
);

这里第一类代码只是确定Object.getPrototypeOf()返回的对象实际就是这个对象的原型。
第二行第二类代码取得原型中name属性的值。

使用Object.getPrototypeOf()可以方便地取得一个对象的原型，而这在利用原型实现继承的情况下是十分重要的。

代码读取某个对象属性时，都是按照一个搜索链执行的，首先从对象本身开始，有，则返回，没有，继续沿着原型链向上......这就是原型链的通俗抽象描述。

虽然可以通过对象实例访问保存在原型中的值，但是却不能通过对象实例重写原型中的值。如果我们在实例中添加一个属性，和实例原型中的属性同名，那属性就会自动屏蔽原型中的那个属性。

function Person() {
    Person.prototype.name = "Nicholas";
    Person.prototype.age = 29;
    Person.prototype.job = "Software Engineer";
    Person.prototype.sayName = function() {
        console.log(this.name);
    };
};

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

person1.name = "Greg";

console.log(person1.name);  // "Greg"————来自实例
console.log(person2.name);  // "Nicholas"————来自原型

添加一个属性只会阻止我们访问原型中的属性，但不会修改它。即使将它设置为null，也只会在实例中设置这个属性，而不会恢复其指向原型的链接。

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

person1.name = null;

console.log(person1.name);  // null
console.log(person1.__proto__.name);    // "Nicholas"

不过，可以使用delete操作符删除实例属性，从而重新访问到原型中的属性。

function Person() {
    Person.prototype.name = "Nicholas";
    Person.prototype.age = 29;
    Person.prototype.job = "Software Engineer";
    Person.prototype.sayName = function() {
        console.log(this.name);
    };
};

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

person1.name = "Greg";
console.log(person1.name);    //"Greg" 来自原型
console.log(person2.name);    // "Nicholas" 来自原型

delete person1.name;
console.log(person1.name);    // "Nicholas"

delete person1.name;          // 再次删除name属性会发生什么?
console.log(person1.name);    // "Nicholas"

delete person1.__proto__.name; // 必须通过__proto__才能访问person1的原型(prototype)
console.log(person1.name);    // undefined

hasOwnProperty
使用hasOwnProperty()方法可以检测一个属性是存在于实例中，还是存在于原型中。这个方法（不要忘了它是从Object继承来的)只在给定属性存在于对象实例中时，才会返回true。

function Person() {
    Person.prototype.name = "Nicholas";
    Person.prototype.age = 29;
    Person.prototype.job = "Software Engineer";
    Person.prototype.sayName = function() {
        console.log(this.name);
    };
};

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

console.log(person1.hasOwnProperty("name"));    // false

person1.name = "Greg";   // 来自实例
console.log(person1.name);
console.log(person1.hasOwnProperty("name"));    // true

console.log(person2.name);    // 来自原型
console.log(person2.hasOwnProperty("name"));    // false

delete person1.name;
console.log(person1.name);    // "Nicholas" 删除了实例中的name属性，则会读取原型中的
console.log(person1.hasOwnProperty("name"));    // false

通过这个方法，什么时候访问的实例属性，什么时候访问的是原型属性就一清二楚了。调用person1.hasOwnProperty("name")时，只有当person1自身内部具有name属性才会返回true，因为只有这时候name才是一个实例属性，而非原型属性。
下图展示实现与原型的关系。

原型与in操作符
有两种方式使用in操作符：单独使用和在for in循环中使用。在单独使用中，in操作符会在通过对象能够访问给定属性时返回true，无论该属性存在于实例中还是原型中。

function Person() {
    Person.prototype.name = "Nicholas";
    Person.prototype.age = 29;
    Person.prototype.job = "Software Engineer";
    Person.prototype.sayName = function() {
        console.log(this.name);
    };
};

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

console.log(person1.hasOwnProperty("name"));    // false
console.log("name" in person1);                 // true

person1.name = "Greg";
console.log(person1.name);                      // "Greg" 自有属性
console.log(person1.hasOwnProperty("name"));    // true
console.log("name" in person1);                 // true

console.log(person2.name);                      // "Nicholas" 继承属性
console.log(person2.hasOwnProperty("name"));    // false
console.log("name" in person2);                 // true

delete person1.name;                            // 删除了自有属性name
console.log(person1.name);                      // "Nicholas" 继承属性
console.log(person1.hasOwnProperty("name"));    // false
console.log("name" in person1);                 // true

以上，name属性要么是直接在对象上访问到，要么是通过原型访问到的。因此调用in始终返回true，无论该属性存在于实例中还是原型汇总。
同时使用hasOwnProperty()方法和in操作符，就可以确定该属性到底是存在于对象中，还是存在于原型中。

function hasPrototypeProperty(object,name) {
    return !object.hasOwnProperty(name) && (name in object);
}

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

var o = {
    toString:function() {
        return "My Object";
    }
};

for (var prop in o) {
    if (prop == "toString") {
        console.log("Found toString");  // 在IE中不会显示
    }
}

当以上代码运行时，应该会有一个警告框，表明找到了toString方法。这里的对象o定义了一个名为toString()的方法，该方法屏蔽了原型中（不可枚举）的toString()方法。在IE中，由于其实现认为原型的toString方法被打上了值为false的enumerable标记，因此应该跳过该属性，结果我们不会看到警告框。

要取得对象上所有可枚举的实例属性，可以使用ECMAScript5的object.keys()方法。这个方法接收一个对象为参数，返回一个包含所有可枚举属性的字符数组。例如：

function Person() {}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function() {
    console.log(this.name);
};

var keys = Object.keys(Person.prototype);
console.log(keys);  // ["name","age","job","sayName"]

var p1 = new Person();
p1.name = "Rob";
p1.age = 31;
var p1keys = Object.keys(p1);
console.log(p1keys);    // ["name","age"]

变量keys保存一个数组，数组中是可枚举属性的集合，顺序和在for-in循环中是一样的。如果通过Person的实例调用，则object.keys()返回的数组只包含"name"和”age"两个实例属性。

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

《JS高程》面向对象的程序设计学习笔记

理解对象

属性类型

数据属性

访问器属性

定义多个属性

支持属性的特性

创建对象

工厂模式

构造函数模式

原型模式

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

《JS高程》面向对象的程序设计 学习笔记

理解对象

属性类型

数据属性

访问器属性

定义多个属性

支持属性的特性

创建对象

工厂模式

构造函数模式

原型模式

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

《JS高程》面向对象的程序设计学习笔记