深入理解js对象 #7

liujie2019 · 2018-09-26T05:57:14Z

1. 理解对象

创建自定义对象的最简单方式就是创建一个Object的实例，然后再为这个实例添加相应的属性和方法，例子如下：

var person = new Object();
person.name = "lisi";
person.age = 22;
person.job = "worker";

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

对象字面量形式创建对象(首选方式)：

var person = {
	name: "lisi",
	age: 22,
	job: "worker",
	sayName: function() {
		console.log(this.name);
	}
};

2. 属性类型

2.1 数据属性

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

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

特别说明：直接在对象上定义的属性，它们的[[Configurable]]、[[Enumerable]]和[[Writable]]特性都被设置为true，而[[Value]]特性被设置为特定的值。

var person = {
    name: 'lisi'
};

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

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

var person = {};
Object.defineProperty(person, 'name', {
    // 表明name属性是只读的
    writable: false,
    value: 'lisi'
});
console.log(person.name); // lisi
person.name = 'wangwu';
console.log(person.name); // lisi

在上述例子中：name属性是只读的，即该属性的值不可修改，如果尝试为它指定新值，在非严格模式下，赋值操作会被忽略；在严格模式下，赋值操作将会导致错误：TypeError: Cannot assign to read only property 'name' of object '#<Object>'。

var person = {};
Object.defineProperty(person, 'name', {
    // 表明name属性不可配置
    configurable: false,
    value: 'lisi'
});
console.log(person.name); // lisi
delete person.name;
console.log(person.name); // lisi

严格模式下将报错：TypeError: Cannot delete property 'name' of #<Object>。

var person = {};
Object.defineProperty(person, 'name', {
    configurable: false,
    value: 'lisi'
});
console.log(Object.getOwnPropertyDescriptor(person, 'name'));
// 运行结果如下：
{ value: 'lisi',
  writable: false,
  enumerable: false,
  configurable: false }

特别说明：在调用Object.defineProperty()方法时，如果不指定，configurable、enumerable和writable特性的默认值都是false。在上述代码中enumerable和writable都没有被指定，默认值均为false。

configurable注意点

特别注意：把configurable设置为false，表示不能从对象中删除属性，即一旦把属性定义为不可配置的，就不能再把它变回可配置的了。再调用Object.defineProperty()方法修改除writable之外的特性，都会导致错误。

var person = {};
Object.defineProperty(person, 'name', {
    configurable: false,
    writable: true,
    value: 'lisi'
});
Object.defineProperty(person, 'name', {
    writable: false,
    value: 'lisi'
});
console.log(Object.getOwnPropertyDescriptor(person, 'name'));
// 运行结果：
{ value: 'lisi',
  writable: false,
  enumerable: false,
  configurable: false }

var person = {};
Object.defineProperty(person, 'name', {
    configurable: false,
    value: 'lisi'
});
Object.defineProperty(person, 'name', {
    writable: true,
    value: 'lisi'
});
console.log(Object.getOwnPropertyDescriptor(person, 'name'));
// 运行结果：
TypeError: Cannot redefine property: name

从上述例子中我们可以知道：可以多次调用Object.defineProperty()方法修改同一个属性，但是前提是configurable设置为true。当configurable设置为false时就会有限制。

configurable值	描述
true	可以多次使用，任意修改其他属性
false	仅可以再次将writable由true修改为false，其他均会报错

2.2 访问器属性

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

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

特别说明：访问器属性不能直接定义，必须使用Object.defineProperty()来定义。

var book = {
    _year: 2004,
    edition: 1
};
// year是访问器属性
Object.defineProperty(book, 'year', {
    get: function() {
        return this._year;
    },
    set: function(newValue) {
        if (newValue > 2004) {
            this._year = newValue;
            this.edition += newValue - 2004;
        }
    }
});
console.log(Object.getOwnPropertyDescriptor(book, '_year'));
console.log(Object.getOwnPropertyDescriptor(book, 'year'));

// 这里修改访问器属性，会调用访问器属性的set函数
book.year = 2005;
console.log(book.edition); // 2
// 这里读取访问器属性year，会调用访问器属性的get函数，返回this._year
console.log(book.year);
console.log(book._year); // 2005
// 运行结果如下：
{ value: 2004,
  writable: true,
  enumerable: true,
  configurable: true }
{ get: [Function: get],
  set: [Function: set],
  enumerable: false,
  configurable: false }
2

上述例子中定义了一个book对象，该对象有两个默认属性_year和edition。_year前面的下划线是一种常用的记号，表示只能通过对象方法访问的属性。访问器属性year包含一个getter函数和一个setter函数，getter函数返回_year的值，setter函数通过计算来确定正确的版本。

var book = {
    _year: 2004,
    edition: 1
};
// year是访问器属性
Object.defineProperty(book, 'year', {
    get: function() {
        return this._year;
    }
});

book.year = 2005;
console.log(book.edition);

运行结果如下：

book.year = 2005;
          ^
TypeError: Cannot set property year of #<Object> which has only a getter

如上例所示：没有指定setter函数的属性不能写，再严格模式下尝试写入属性会报错。

2.2 定义多个属性

ECMAScript5定义了一个Object.defineProperties()方法，可以通过描述符一次定义多个属性。接收两个对象参数：第一个对象是要添加和修改其属性的对象，第二个对象的属性与第一个对象中要添加或修改的属性一一对应。例如下例所示：

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;
            }
        }
    }
});

2.3 读取属性的特性

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");
alert(descriptor.value);            //2004
alert(descriptor.configurable);     //false
alert(typeof descriptor.get);       //"undefined"

var descriptor = Object.getOwnPropertyDescriptor(book, "year");
alert(descriptor.value);        //undefined
alert(descriptor.enumerable);   //false
alert(typeof descriptor.get);   //"function"

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

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

3. 创建对象

虽然Object构造函数或对象字面量都可以用来创建单个对象，但这些方法有个明显的缺点：使用同一个接口创建很多对象，会产生大量重复代码。下面介绍一些创建对象的模式：

3.1 工厂模式

<script type="text/javascript">
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 o;
}
var person1 = createPerson("liujie", 13, "student");
var person2 = createPerson("lisi", 14, "doctor");
person1.sayName();
person2.sayName();
</script>

可以无数次的调用这个函数，每次它都会返回一个包含3个属性和一个方法的对象。工厂模式虽然解决了创建多个相似对象的问题，但却没有解决对象识别的问题即怎样知道一个对象的类型。

3.2 构造函数模式

<script type="text/javascript">
    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("liujie", 13, "student");
    var person2 = new Person("lisi", 15, "doctor");
    person2.sayName();
    person1.sayName();
    // 实例的constructor属性指向构造函数
    console.log(person1.constructor == Person);//true
    console.log(person2.constructor == Person);//true
    //创建的所有对象既是Object的实例，也是Person的实例
    //之所以是Object的实例，是因为所有对象均继承自Object
    console.log(person1 instanceof Object);//true
    console.log(person1 instanceof Person);//true
    console.log(person2 instanceof Object);//true
    console.log(person2 instanceof Person);//true
</script>

Person()中的代码除了与createPerson()中相同的部分外，还存在以下不同之处：

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

特别注意：构造函数始终都应该以一个大写字母开头，非构造函数应该以小写字母开头。构造函数本身也是函数，只不过用来创建对象而已。

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

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

在上述例子的中，person1和person2分别保存着Person的一个不同实例。这两个对象都有一个constructor（构造函数）属性，该属性指向Person。
创建自定义的构造函数意味着将来可以将它的实例标志为一种特定的类型；而这正是构造函数模式胜过工厂模式的地方。

<script type="text/javascript">
    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("liujie", 14, "student");
    person.sayName();// liujie
    // 当作普通函数调用(属性和方法都添加到window对象)
    Person("lisi", 16, "doctor");
    window.sayName();// lisi
    // 在另一个对象的作用域中调用
    var o = new Object();
    Person.call(o, "wangwu", 15, "master");//这里是在对象o的作用域中调用Person构造函数，调用后o就拥有了所有属性和sayName()方法
    o.sayName();//wangwu
</script>

由上述例子可知：构造函数与其他函数的唯一区别在于：调用方式不同。但是，构造函数毕竟也是函数，不存在定义构造函数的特殊语法。任何函数，只要通过new操作符来调用，那它就可以作为构造函数；而任何函数，如果不通过new操作符来调用，那它跟普通函数也不会有什么两样。例如，前面例子的Person()函数可以通过上述例子中的任何一种方式来调用。

3.2.1 构造函数问题

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

构造函数的主要问题在于：每个方法都要在每个实例上重新创建一遍。每个Person实例都有一个不同的Function实例。在前面例子中person1和person2都有一个sayName()方法，但是这两个方法不是同一个Function的实例。原因在于：在ECMAScript中的函数是对象，因此每定义一个函数，也就是实例化了一个对象。

创建两个完成同样任务的Function实例的确没有必要；况且有this对象在，根本不用在执行代码前就把函数绑定到特定对象上面。因此，可以把函数定义转移到构造函数外部来解决这个问题。

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

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

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

在上述例子中：我们把sayName()函数的定义转移到了构造函数外部。在构造函数内部将sayName属性设置成等于全局的sayName()函数。这样依赖，sayName属性中包含的是一个指向函数的指针，因为person1和person2对象就共享了在全局作用域中定义的同一个sayName()函数。

这样做确实解决了两个函数做同一件事的问题，但是带来了新问题：在全局作用域中定义的函数实际上只能被某个对象调用，这让全局作用域有点名不副实。更让人无法接受的是：如果对象需要定义很多方法，那么就要定义很多个全局函数，于是我们这个自定义的引用类型就丝毫没有封装性可言了。好在，这些问题可通过原型模式解决。

3.3 原型模式

我们创建的每个函数都有一个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属性中，构造函数变成了空函数。这样一来，通过构造函数创建的新对象都会具有相同的属性和方法，而且新对象的这些属性和方法是由所有实例共享的。

3.3.1 理解原型对象

无论什么时候，只要创建了一个新函数，就会根据一组特定的规则为该函数创建一个prototype属性，这个属性指向函数的原型对象。在默认情况下，所有原型对象都会自动获得一个constructor（构造函数）属性，这个属性包含一个指向prototype属性所在函数的指针。

拿前面的例子来说，Person.prototype.constructor指向Person。而通过这个构造函数，我们还可继续为原型对象添加其他属性和方法。

创建了自定义的构造函数之后，其原型对象默认只会取得constructor属性；至于其他方法，则都是从Object继承而来的。当调用构造函数创建一个新实例后，该实例的内部将包含一个指针（内部属性），指向构造函数的原型对象。

>如上图，展示了`Person`构造函数、`Person`的原型属性以及`Person`现有的两个实例之间的关系。其中，`Person.prototype`指向了原型对象，而`Person.prototype.constructor`又指回了`Person`。原型对象中除了包含`constructor`属性之外，还包括后来添加的其他属性。`Person`的每个实例——`person1和person2`都包含了一个内部属性，该属性仅仅指向了`Person.prototype`；换句话说，它们与构造函数没有直接关系。 ###### 3.3.2 isPrototypeOf()：确定对象原型方法 ```js console.log(Person.prototype.isPrototypeOf(person1)); //true console.log(Person.prototype.isPrototypeOf(person2)); //true ``` >上述代码说明`person1和person2`内部都有一个指向`Person.prototype`的指针。 ###### 3.3.3 Object.getPrototypeOf()：ECMAScript 5新增方法 ```js console.log(Object.getPrototypeOf(person1) == Person.prototype); //true console.log(Object.getPrototypeOf(person1).name); //"Nicholas" ``` >通过上述代码可知：`Object.getPrototypeOf()`方法可以方便地获取到一个对象的原型。 ###### 3.3.4 对象属性读取的搜索顺序 >每当代码读取某个对象的某个属性时，都会执行一次搜索，目标是具有给定名字的属性。**搜索首先从实例本身开始**。如果实例中找到了具有给定名字的属性，则返回该属性的值；如果没有找到，则继续搜索指针指向的原型对象，在原型对象中查找具有指定名字的属性。所以，当为对象实例添加一个属性时，这个属性就会屏蔽原型对象中保存的同名属性。这同时也是多个对象实例共享原型所保存的属性和方法的基本原理。

<script type="text/javascript">
    function Person() {
    }
    Person.prototype.name = "liujie";
    Person.prototype.age = 13;
    Person.prototype.job = "student";
    Person.prototype.sayName = function() {
        console.log(this.name);
    };
    //这里person1和person2访问的是同一组属性和同一个sayName()方法
    var person1 = new Person();
    person1.sayName();//liujie
    var person2 = new Person();
    person2.sayName();//liujie
    console.log(person1.sayName == person2.sayName);//true

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

    //Object.getPrototypeOf()返回的对象就是原型对象
    console.log(Object.getPrototypeOf(person1) == Person.prototype);//true
    console.log(Object.getPrototypeOf(person2) == Person.prototype);//true
</script>

<script type="text/javascript">
    function Person() {
    }
    Person.prototype.name = "liujie";
    Person.prototype.age = 13;
    Person.prototype.job = "student";
    Person.prototype.sayName = function() {
        console.log(this.name);
    };
    //这里person1和person2访问的是同一组属性和同一个sayName()方法
    var person1 = new Person();
    person1.name = "liujiejie";
    //如果对象实例中的属性与实例原型中的一个属性同名，实例中的属性会屏蔽原型中的那个属性
    //person1.name=null;//即使将这个属性设置为null,也只会在实例中设置这个属性，而不会恢复其指向原型的链接
    delete person1.name;//如果使用delete操作符则可以完全删除实例属性，从而让我们能够重新访问原型中的属性
    person1.sayName();//liujiejie
    var person2 = new Person();
    // 说明了可以通过对象实例访问保存在原型中的值，但是不能通过对象实例重写原型中的值
    person2.sayName();//liujie
</script>

3.3.5 hasOwnProperty()

hasOwnProperty()方法可以检测一个属性存在于实例中还是存在于原型中。只有给定属性存在于对象实例中时，该方法才返回true。

<script type="text/javascript">
    function Person() {
    }
    Person.prototype.name = "liujie";
    Person.prototype.age = 13;
    Person.prototype.job = "student";
    Person.prototype.sayName = function(){
        console.log(this.name);

    };
    //这里person1和person2访问的是同一组属性和同一个sayName()方法
    //使用hasOwnProperty()方法，当给定属性存在于实例中时，返回true
    var person1 = new Person();
    var person2 = new Person();
    console.log(person1.hasOwnProperty("name"));//false
    person1.name = "liujiejie";
    console.log(person1.name);//liujiejie   来自实例
    console.log(person1.hasOwnProperty("name"));//true
    console.log(person2.name);//liujie  来自原型
    console.log(person2.hasOwnProperty("name"));//false
    delete person1.name;
    console.log(person1.name);//liujie 来自原型
    console.log(person1.hasOwnProperty("name")); // false
</script>

3.4 原型与in操作符

特别注意：只要能够访问到给定属性，in操作符就返回true。不管属性存在于原型上还是实例上。

<script type="text/javascript">
    function Person() {
    }
    Person.prototype.name = "liujie";
    Person.prototype.age = 13;
    Person.prototype.job = "student";
    Person.prototype.sayName = function() {
        console.log(this.name);

    };
    //这里person1和person2访问的是同一组属性和同一个sayName()方法
    //使用hasOwnProperty()方法，当给定属性存在于实例中时，返回true
    var person1 = new Person();
    var person2 = new Person();
    console.log(person1.hasOwnProperty("name"));//false
    console.log("name" in person1);// true

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

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

    delete person1.name;
    console.log(person1.name);//liujie   来自原型
    console.log(person1.hasOwnProperty("name"));// false
    console.log("name" in person1);// true
</script>

同时使用hasOwnProperty()方法和in操作符，就可以确定该属性到底是存在于对象中，还是存在于原型中。如下代码所示：

// 返回true表示存在于原型，false表示存在于实例中
function hasPrototypeProperty(object, name) {
    return !object.hasOwnProperty(name) && (name in object);
}

3.4.1 for-in循环

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

<script type="text/javascript">
	var obj = {
		toString: function(){
			return "myvalue";
		}
	}
	for(var prop in obj) {
		if(prop == "toString"){
			alert("toString found"); // 在IE中不会显示
		}
	}
</script>

3.4.2 Object.keys()

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

<script type="text/javascript">
	function Person(){}
	Person.prototype.name = "lisi";
	Person.prototype.age = 23;
	Person.prototype.sayName = function(){
		alert(this.name + "--" + this.age);
	}
	var keys = Object.keys(Person.prototype);
	console.log(keys);//["name", "age", "sayName"]
	var person1 = new Person();
	person1.name = "wangwu";
	person1.age = 23;
	console.log(Object.keys(person1));//["name", "age"]
	</script>

3.4.3 Object.getOwnPropertyNames()

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

<script type="text/javascript">
	function Person(){}
	Person.prototype.name = "lisi";
	Person.prototype.age = 23;
	Person.prototype.sayName = function(){
		alert(this.name + "--" + this.age);
	}
	var keys2 = Object.getOwnPropertyNames(Person.prototype);
	console.log(keys2); // ["constructor", "name", "age", "sayName"]
</script>

注意：这里的结果中包含了不可枚举的constructor属性。Object.getOwnPropertyNames()和Object.keys()方法都可以用来代替for-in循环。

3.5 更简单的原型语法

在前面的例子中每添加一个属性和方法都要敲一遍Person.prototype。为了减少不必要的输入，从视觉上更好地封装原型的功能，更常见的做法是用一个包含所有属性和方法的对象字面量来重写整个原型对象，如下代码所示：

function Person() {
}
// 这里将一个新的对象字面量赋值给Person.prototype
// 新的对象字面量的constructor指向Object
Person.prototype = {
    name : "Nicholoas",
    age : 29,
    job : "Software Engineer",
    sayName : function () {
        console.log(this.name);
    }
};
var friend = new Person();

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

在上述代码中：将Person.prototype设置为等于一个对象字面量形式创建的新对象，最终结果相同。但是有一个例外：constructor属性不再指向Person了。因为，每创建一个函数，就会同时创建它的prototype对象，这个对象也会自动获得constructor属性。而我们在这里本质上完全重写了默认的prototype对象，因此constructor属性也就变成了新对象的constructor属性(指向Object构造函数)，不再指向Person函数。所以需要显式设置constructor属性到适当的值。

function Person() {
}

Person.prototype = {
    // 显示指定constructor属性
    constructor : Person,
    name : "Nicholoas",
    age : 29,
    job : "Software Engineer",
    sayName : function () {
        alert(this.name);
    }
};

这样重设constructor属性会导致它的[[Enumerable]]特性被设置为true。默认情况下，原生的constructor属性是不可枚举的。因此，考虑使用Object.defineProperty()方法。

function Person() {
}

Person.prototype = {
    name : "Nicholoas",
    age : 29,
    job : "Software Engineer",
    sayName : function () {
        alert(this.name);
    }
};
Object.defineProperty(Person.prototype, 'constructor', {
    enumerable: false,
    value: Person
});

3.6 原型的动态性

<script type="text/javascript">
    function Person() {
    }
    Person.prototype = {
        constructor: Person,
        name : "Nicholas",
        age : 29,
        job : "Software Engineer",
        sayName : function () {
            alert(this.name);
        }
    };
    var friend = new Person(); // 即使先创建了实例，后修改了原型也没有问题
    Person.prototype.sayHi = function() {//向原型中添加方法
        alert("hi");
    };
    friend.sayHi();   //"hi" – works! 先在实例中寻找sayHi方法，找不到的话再搜索原型
</script>

function Person() {
}
var friend = new Person();// 调用构造函数创建实例，并向实例中添加一个指向最初原型的[[Prototype]]指针，而把原型重写修改后就等于切断了构造函数与最初原型之间的联系。
Person.prototype = {
    //这里重写原型对象切断了现有的原型与任何之前已经存在的对象实例之间的联系，之前的实例引用的仍然是最初的原型
    constructor: Person,
    name : "Nicholas",
    age : 29,
    job : "Software Engineer",
    sayName : function () {
        console.log(this.name);
    }
};
friend.sayName(); // TypeError: friend.sayName is not a function
var person = new Person();
person.sayName(); // Nicholas

#### 3.7 原生对象的原型

原型模式的重要性不仅体现在创建自定义类型方面，就连所有原生的引用类型，都是采用这种模式创建的。所有原生引用类型（Object、Array、String，等等）都在其构造函数的原型上定义了方法。

3.8 原型对象的问题

首先，它省略了为构造函数传递初始化参数这一环节，结果所有实例在默认情况下都将取得相同的属性值。最重要的，其共享的本性对于函数非常合适，对于包含基本值的属性也说得过去，通过在实例上添加一个同名属性，可以隐藏原型中的对应属性。但对于包含引用类型值得属性来说，例如数组，就会有问题了。

function Person() {
}
Person.prototype = {
    constructor: Person,
    name : "Nicholas",
    age : 29,
    job : "Software Engineer",
    friends: ['lisi', 'wangwu'],
    sayName : function () {
        console.log(this.name);
    }
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push('xiaohong');
console.log(person1.friends); // [ 'lisi', 'wangwu', 'xiaohong' ]
console.log(person2.friends); // [ 'lisi', 'wangwu', 'xiaohong' ]
console.log(person1.friends === person2.friends); // true

person1和person2实例共享了同一个friends，但是实例一般都是要有属于自己的全部属性。这就是原型模式的问题所在。

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 Engineer");
var person2 = new Person("Greg", 27, "Doctor");

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

该例中，实例属性都是在构造函数中定义，共享属性constructor和方法sayName()则是在原型中定义的。这种构造函数和原型混成的模式，是目前在ECMAScript中使用最广泛、认同度最高的一种创建自定义类型的方法。可以说，这是用来定义引用类型的一种默认模式。

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 Engineer");
friend.sayName();

6. 寄生构造函数模式

通常，在前几种模式都不适用的情况下，可以使用寄生（parasitic）构造函数模式。这种模式的基本思想是创建一个函数，该函数的作用仅仅是封装创建对象的代码，然后再返回新创建的对象；但从表面上看，这个函数又很像是典型的构造函数。

这个模式可以在特殊的情况下用来为对象创建构造函数。假设我们想创建一个具有额外方法的特殊数组。用于不能直接修改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());  //"red|blue|green"

注意：返回的对象与构造函数或者与构造函数的原型属性之间没有关系；也就是说，构造函数返回的对象与在构造函数外部创建的对象没有什么不同。因此，不能依赖instanceof操作符来确定对象类型。

7. 稳妥构造函数模式

道格拉斯 · 克罗克福德（Douglas Crockford）发明了JavaScrip中的稳妥对象（durable objects）这个概念。所谓稳妥对象，指的是没有公共属性，而且其方法也不引用this的对象。稳妥对象最适合在一些安全的环境中（这些环境中会禁止使用this和new），或者在防止数据被其他应用程序（如Mashup）改动时使用。稳妥构造函数遵循与寄生构造函数类似的模式，但有两点不同：一是新创建的对象的实例方法不引用this；二是不适用new操作符调用构造函数。

function Person(name, age, job) {

    //创建要返回的对象
    var o = new Object();

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

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

    //返回对象
    return o;
}

除了使用sayName()方法外，没有别的方式可以访问name的值。

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

变量friend中保存的是一个稳妥对象，而除了调用sayName()方法外，没有别的方式可以访问其数据成员。即使有其他代码会给这个对象添加方法或数据成员，但也不可能有别的方法访问到构造函数中的原始数据。稳妥构造函数模式提供的这种安全性，使得它非常适合在某些安全环境——例如，ADsafe和Caja提供的环境——下使用。

参考文档

The text was updated successfully, but these errors were encountered:

liujie2019 added javascript 学习总结读书笔记 labels Sep 26, 2018

liujie2019 added this to Done in 原生JS Mar 3, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

深入理解js对象 #7

深入理解js对象 #7

liujie2019 commented Sep 26, 2018

深入理解js对象 #7

深入理解js对象 #7

Comments

liujie2019 commented Sep 26, 2018

1. 理解对象

2. 属性类型

2.1 数据属性

configurable注意点

2.2 访问器属性

2.2 定义多个属性

2.3 读取属性的特性

3. 创建对象

3.1 工厂模式

3.2 构造函数模式

3.2.1 构造函数问题

3.3 原型模式

3.3.1 理解原型对象

3.3.5 hasOwnProperty()

3.4 原型与in操作符

3.4.1 for-in循环

3.4.2 Object.keys()

3.4.3 Object.getOwnPropertyNames()

3.5 更简单的原型语法

3.6 原型的动态性

3.8 原型对象的问题

4. 组合使用构造函数模式和原型模式

5. 动态原型模式

6. 寄生构造函数模式

7. 稳妥构造函数模式

参考文档