JavaScript 面向对象的程序设计

发表于   |   分类于

理解对象

属性类型

数据属性

数据属性有 4 个描述其行为的特性。

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

访问器属性

访问器属性不包含数据值；

它们包含一对儿 getter 和 setter 函数。

访问器属性有如下 4 个特性：

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

访问器属性不能直接定义,必须使用 Object.defineProperty() 来定义。

不一定非要同时指定 getter 和 setter。只指定 getter 意味着属性是不能写,尝试写入属性会被忽略。

在严格模式下，尝试写入只指定了 getter 函数的属性会抛出错误。类似地，只指定 setter 函数的属性也不能读，否则在非严格模式下会返回 undefined，而在严格模式下会抛出错误。

创建对象

背景：虽然 Object 构造函数或对象字面量都可以用来创建单个对象，但这些方式有个明显的缺点：使用同一个接口创建很多对象，会产生大量的重复代码。为解决这个问题，人们开始使用工厂模式的一种变体。

1️⃣ 工厂模式

考虑到在 ECMAScript 中无法创建类，开发人员就发明了一种函数，用函数来封装以特定接口创建对象的细节，如下面的例子所示：

1
2
3
4
5
6
7
8
9
10
11
12
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", 29, "Software Engineer");
var person2 = createPerson("Greg", 27, "Doctor");

问题

工厂模式虽然解决了创建多个相似对象的问题，但却没有解决对象识别的问题（即怎样知道一个对象的类型）。

2️⃣ 构造函数模式

创建自定义的构造函数，从而定义自定义对象类型的属性和方法：

1
2
3
4
5
6
7
8
9
10
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", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

注意：

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

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

new 操作符经历了哪些操作：

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

优势：
自定义的构造函数意味着将来可以将它的实例标识为一种特定的类型，这也是构造函数模式胜过工厂模式的地方。

问题
每个方法都要在每个实例上重新创建一遍。

解决方案：把函数定义转移到构造函数外部：

1
2
3
4
5
6
7
8
9
10
11
12
13
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");

新的问题：
在全局作用域中定义的函数实际上只能被某个对象调用，这让全局作用域有点名不副实；
如果对象需要定义很多方法，那么就要定义很多个全局函数，于是就==失去了代码的封装性==。

3️⃣ 原型模式

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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

我们任然可以通过调用构造函数来创建对象。

与构造函数的不同点：新对象的这些属性和方法是由所有实例共享的。

更简单的原型语法

1
2
3
4
5
6
7
8
9
function Person() {}
Person.prototype = {
  name: "Nicholas",
  age: 29,
  job: "Software Engineer",
  sayName: function() {
    alert(this.name);
  }
};

我们将 Person.prototype 设置为等于一个以对象字面量形式创建的新对象。最终结果相同，但有一个例外：constructor 属性不再指向 Person 了。

我们在这里使用的语法，本质上完全重写了默认的 prototype 对象,因此 constructor 属性也就变成了新对象的 constructor 属性 (指向 Object 构造函数) , 不再指向 Person 函数。

如果 constructor 的值真的很重要,可以像下面这样特意将它设置回适当的值。

1
2
3
4
5
6
7
8
9
10
function Person() {}
Person.prototype = {
  constructor: Person,
  name: "Nicholas",
  age: 29,
  job: "Software Engineer",
  sayName: function() {
    alert(this.name);
  }
};

原型的动态属性

调用构造函数时会为实例添加一个指向最初原型的 [[Prototype]] 指针,而把原型修改为另外一个对象就等于切断了构造函数与最初原型之间的联系。

请记住：实例中的指针仅指向原型，而不指向构造函数。

问题

  1. 所有实例在默认情况下都将取得相同的属性值（缺少初始化传参环节）
  2. 原型中所有属性是被很多实例共享的（主要问题，主要在于包含引用类型值的属性）

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

最常用的模式。

构造函数模式用于定义实例属性、原型模式用于定义方法和共享属性。

支持向构造函数传递参数。

优点：每个实例都会有自己的一份实例属性的副本, 但同时又共享着对方法的引用,最大限度地节省了内存。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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(person1.friends === person2.friends); //false
alert(person1.sayName === person2.sayName); //true

5️⃣ 动态原型模式

通过检查某个应该存在的方法是否有效,来决定是否需要初始化原型。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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️⃣ 寄生构造函数模式

创建一个函数，该函数的作用仅仅是封装创建对象的代码,然后再返回新创建的对象;

1
2
3
4
5
6
7
8
9
10
11
12
13
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 Engineer");
friend.sayName(); //"Nicholas"

除了使用 new 操作符并把使用的包装函数叫做构造函数之外, 这个模式跟工厂模式其实是一模一样的。构造函数在不返回值的情况下，默认会返回新对象实例。而通过在构造函数的末尾添加一个 return 语句,可以重写调用构造函数时返回的值。

问题

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

7️⃣ 稳妥构造函数模式

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

稳妥构造函数遵循与寄生构造函数类似的模式,但有两点不同:

  1. 新创建对象的实例方法不引用 this;
  2. 不使用 new 操作符调用构造函数。
1
2
3
4
5
6
7
8
9
function Person(name, age, job) {
  //创建要返回的对象
  var o = new Object(); //可以在这里定义私有变量和函数
  //添加方法
  o.sayName = function() {
    alert(name);
  }; //返回对象
  return o;
}

注意，在以这种模式创建的对象中，除了使用 sayName() 方法之外, 没有其他办法访问 name 的值。
可以像下面使用稳妥的 Person 构造函数。 

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

问题

使用 instanceof 无法获取有意义的值。

与寄生构造函数模式类似, 使用稳妥构造函数模式创建的对象与构造函数之间也没有什么关系,因此 instanceof 操作符对这种对象也没有意义。

继承

许多 OO 语言都支持两种继承方式：接口继承和实现继承。

接口继承只继承方法签名，而实现继承则继承实际的方法。

ECMAScript 只支持实现继承, 而且其实现继承主要是依靠原型链来实现的。

1️⃣ 原型链

其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。

定义

每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。那么，假如我们让原型对象等于另一个类型的实例，结果会怎么样呢？显然，此时的原型对象将包含一个指向另一个原型的指针，相应地，另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立，如此层层递进，就构成了实例与原型的链条。这就是所谓原型链的基本概念。

实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function SuperType() {
  this.property = true;
}

SuperType.prototype.getSuperValue = function() {
  return this.property;
};

function SubType() {
  this.subproperty = false;
}

//继承了 SuperType
SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function() {
  return this.subproperty;
};

var instance = new SubType();
alert(instance.getSuperValue()); //true

问题

  1. 最主要的问题来自包含引用类型值的原型。
  2. 创建子类型的实例时,不能向超类型的构造函数中传递参数。实际上, 应该说是没有办法在不影响所有对象实例的情况下,给超类型的构造函数传递参数。

总结

实践中很少会单独使用原型链。

2️⃣ 借用构造函数

实现：在子类型构造函数的内部调用超类型构造函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function SuperType() {
  this.colors = ["red", "blue", "green"];
}

function SubType() {
  //继承了 SuperType
  SuperType.call(this);
}

var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"

var instance2 = new SubType();
alert(instance2.colors); //"red,blue,green"

传递参数

相对于原型链而言，借用构造函数有一个很大的优势，即可以在子类型构造函数中向超类型构造函数传递参数。看下面这个例子。

1
2
3
4
5
6
7
8
9
10
11
12
13
function SuperType(name) {
  this.name = name;
}

function SubType() {
  //继承了 SuperType，同时还传递了参数
  SuperType.call(this, "Nicholas"); //实例属性
  this.age = 29;
}

var instance = new SubType();
alert(instance.name); //"Nicholas";
alert(instance.age); //29

问题

  1. 方法都在构造函数中定义,因此函数复用就无从谈起了。
  2. 而且，在超类型的原型中定义的方法，对子类型而言也是不可见的，结果所有类型都只能使用构造函数模式。

结论

借用构造函数的技术也是很少单独使用的

3️⃣ 组合继承

定义

组合继承(combination inheritance) ，有时候也叫做伪经典继承，指的是将原型链和借用构造函数的技术组合到一块，从而发挥二者之长的一种继承模式。

实现

思路是使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。

既通过在原型上定义方法实现了函数复用，又能够保证每个实例都有它自己的属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function SuperType(name) {
  this.name = name;
  this.colors = ["red", "blue", "green"];
}

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

function SubType(name, age) {
  //继承属性
  SuperType.call(this, name);
  this.age = age;
}

//继承方法
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function() {
  alert(this.age);
};

var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
instance1.sayName(); //"Nicholas";
instance1.sayAge(); //29

var instance2 = new SubType("Greg", 27);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"Greg";
instance2.sayAge(); //27

结论

组合继承避免了原型链和借用构造函数的缺陷，融合了它们的优点，成为 JavaScript 中最常用的继承模式。而且 instanceof 和 isPrototypeOf() 也能够用于识别基于组合继承创建的对象。

4️⃣ 原型式继承

实现

借助原型可以基于已有的对象创建新对象，同时还不必因此创建自定义类型。

1
2
3
4
5
function object(o) {
  function F() {}
  F.prototype = o;
  return new F();
}

先创建了一个临时性的构造函数，然后将传入的对象作为这个构造函数的原型，最后返回了这个临时类型的一个新实例。

ECMAScript 5 通过新增 Object.create() 方法规范化了原型式继承。这个方法接收两个参数：一个用作新对象原型的对象和（可选的）一个为新对象定义额外属性的对象。在传入一个参数的情况下，Object.create() 与 object() 方法的行为相同。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var person = {
    name: "Nicholas",
    friends: ["Shelby", "Court", "Van"]
};

var anotherPerson = Object.create(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");

var yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");

alert(person.friends); //"Shelby,Court,Van,Rob,Barbie"

结论

使用原型式继承需要注意的地方

在没有必要兴师动众地创建构造函数，而只想让一个对象与另一个对象保持类似的情况下，原型式继承是完全可以胜任的。不过别忘了，包含引用类型值的属性始终都会共享相应的值，就像使用原型模式一样。

5️⃣ 寄生式继承

实现

寄生式继承的思路与寄生构造函数和工厂模式类似，即创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后再像真地是它做了所有工作一样返回对象。

1
2
3
4
5
6
7
function createAnother(original) {
  var clone = object(original); //通过调用函数创建一个新对象
  clone.sayHi = function() {    //以某种方式来增强这个对象
    alert("hi");
  };
  return clone; //返回这个对象
}

结论

在主要考虑对象而不是自定义类型和构造函数的情况下，寄生式继承也是一种有用的模式。前面示范继承模式时使用的 object() 函数不是必需的；任何能够返回新对象的函数都适用于此模式。

使用寄生式继承的缺点
使用寄生式继承来为对象添加函数，会由于不能做到函数复用而降低效率；这一点与构造函数模式类似。

6️⃣ 寄生组合式继承

背景

组合继承最大的问题就是无论什么情况下，都会调用两次超类型构造函数：一次是在创建子类型原型的时候，另一次是在子类型构造函数内部。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function SuperType(name) {
  this.name = name;
  this.colors = ["red", "blue", "green"];
}

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

function SubType(name, age) {
  SuperType.call(this, name); //第二次调用 SuperType()
  this.age = age;
}

SubType.prototype = new SuperType(); //第一次调用 SuperType()
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function() {
  alert(this.age);
};

定义

所谓寄生组合式继承，即通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。

基本思路是：不必为了指定子类型的原型而调用超类型的构造函数，我们所需要的无非就是超类型原型的一个副本而已。

本质上，就是使用寄生式继承来继承超类型的原型，然后再将结果指定给子类型的原型。

1
2
3
4
5
function inheritPrototype(subType, superType) {
  var prototype = object(superType.prototype); //创建对象
  prototype.constructor = subType; //增强对象
  subType.prototype = prototype; //指定对象
}
  1. 第一步是创建超类型原型的一个副本
  2. 第二步是为创建的副本添加 constructor 属性，从而弥补因重写原型而失去的默认的 constructor 属性
  3. 最后一步，将新创建的对象（即副本）赋值给子类型的原型
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function SuperType(name) {
  this.name = name;
  this.colors = ["red", "blue", "green"];
}

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

function SubType(name, age) {
  SuperType.call(this, name);
  this.age = age;
}

inheritPrototype(SubType, SuperType);

SubType.prototype.sayAge = function() {
  alert(this.age);
};

结论

  1. 优点：这个例子的高效率体现在它只调用了一次 SuperType 构造函数,并且因此避免了在 SubType. prototype 上面创建不必要的、多余的属性。

  2. 寄生组合式继承是引用类型最理想的继承范式。

相关对象方法

hasOwnProperty()

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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();

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

in 操作符

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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();

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

Object.key()

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function Person(){
}

Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
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"

instanceof 操作符

只要用这个操作符来测试实例与原型链中出现过的构造函数，结果就会返回 true。

isPrototypeOf() 方法

原型链中出现过的原型，都可以说是该原型链所派生的实例的原型，因此 isPrototypeOf() 方法也会返回 true。