JavaScript高级程序设计——面向对象

2018-04-23  本文已影响0人  aaaaaAndy980

面向对象的语言都有一个标志，那就是它们都有类的概念，而通过类可以创建任意多个具有相同属性和方法的对象。但是ECMAScript中没有类的概念，因此它的对象也与基于类的语言中的对象有所不同。

创建自定义对象的两种方法：

// 创建一个Object实例
var person = new Object();
person.name = 'andy';
person.age = 29;

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

// 对象字面量
var person = {
    name: 'andy',
    age: 29,

    sayName: function () {
        console.log(this.name)
    }
}

1. 工厂模式

这种模式抽象了创建具体对象的过程。考虑到在ECMAScript中无法创建类，开发人员就发明了一种函数，用函数来封装以特定接口创建对象的细节。

function createPerson(name, age) {
    var o = new Object();
    o.name = name;
    o.age = age;
    o.sayName = function () {
        alert(o.name);
    }
    return o;
}
var person1 = createPerson('andy', 21);

函数createPerson()能够根据接受的参数来构建一个包含所有必要信息的person对象。可以无数次地调用这个函数，而每次它会返回一个包含两个属性一个方法的对象。工程模式虽然解决了创建多个类似对象的问题，但却没有解决对象识别的问题（即怎样知道一个对象的类型）。随着JavaScript的发展，又一个新模式出现了。

2. 构造函数模式

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

function Person (name, age) {
    this.name = name;
    this.age = age;
    this.sayName = function () {
        alert(this.name);
    }
}
var per = new Person('andy', 21);
per.sayName();    // andy

在该构造函数中，有以下几点不同：

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

我们可以用instanceof操作符来进行对象检测：

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

构造函数模式虽然好用，但也并非没有缺点。使用构造函数的主要问题，就是每个方法都要在每个实例上重新创建一遍。每定义一个函数，也就实例化了一个对象。以这种方式创建函数，会导致不同的作用域链和标识符解析，但创建Function新实例的机制仍然是相同的。因此，不同实例上的同名函数是不相等的。

console.log(per1.sayName === per2.sayName);    // false

创建两个完全同样任务的Function实例的确没有必要；况且有this对象在，根本不用再执行代码前就把函数绑定到特定对象上面。所以这就促使我们可以使用原型模式来自定义对象。

3. 原型模式

a. 原型语法

我们创建的每一个函数都有一个prototype属性，这个属性是一个指针，指向一个对象。而这个对象的用途是包含由特定类型的所有实例共享的属性和方法。使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。换句话说，不必在构造函数中定义对象实例的信息，而是可以将这些信息直接添加到原型对象中：

function Person() {
}
Person.prototype.name = 'andy';
Person.prototype.age = 13;
Person.prototype.sayName = function () {
    console.log(this.name);
}


var per1 = new Person();
var per2 = new Person();
per1.sayName();    // andy
per2.sayName();    // andy

per1.name = 'qiqi';
per1.sayName();    // qiqi

在此，我们将sayName()方法的所有属性直接添加到了Person的prototype属性中，构造函数编程了空函数。即使如此，也仍然可以通过调用构造函数来创建新对象，而且新对象还会具有相同的属性和方法。但与构造函数模式不同的是，新对象的这些属性和方法是由所有实例共享的。也就是说per1和per2访问的都是同一组属性和同一个sayName()函数。

无论什么时候，只要创建了一个函数，就会根据一组特定的规则为该函数创建一个prototype属性，这个属性指向函数的原型对象。在默认情况下，所有原型对象都会自动获得一个constructor属性，这个属性包含一个指向prototype属性所在函数的指针。以前边例子来说，Person.prototype.constructoy指向Person。通过这个构造函数，我们还可继续为原型对象添加其他属性和方法。

几种操作符：

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

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

console.log(per1.hasOwnProperty('name'));    // false

per1.name = 'qiqi';
console.log(per1.hasOwnProperty('name'));    // true

console.log('name' in per1);    // true
console.log('name' in Person);    // true
b. 更简单的原型语法

在前面的例子中，每添加一个属性和方法就要敲一遍prototype，为了减少不必要的输入可以采用以下的写法：

function Person() {
}
Person.prototype = {
    constructor: Person,    // 不添加的话constructor会变化，此处为了使该指针指向原型
    name: 'andy',
    age: 21,
    sayName: function() {
        console.log(this.name);
    }
}

原型模式并不是没有缺点。首先，它省略了为构造函数传递初始化参数这一环节，结果所有实例在默认情况下都取得相同的属性值。虽然这会在某种程度上带来一些不方便，但这不是原型的最大问题。原型模式的最大问题是由其共享的本性导致的。

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

结合以上各种优点缺点，在自定义对象的时候可以采用组合使用的方式!

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

4. 继承

继承是面向对象语言中一个最为津津乐道的概念，许多面向对象语言都支持两种继承方式：接口继承和实现继承。接口继承只继承方法签名，而实现继承则继承实际的方法。因为函数没有签名，所以ECMAScript中无法实现接口继承，只支持实现继承，而且其实实现继承主要是依靠原型链来实现。

a. 原型链
function SuperType() {
    this.property = true;
}
SuperType.prototype.getSuperValue = function() {
    return this.property;
}
function SubType() {
    this.subproperty = false;
}
SubType.prototype = new SuperType();    // 原型链继承
SubType.prototype.getSubValue = function() {
    return this.subproperty;
}
var ins = new SubType();
console.log(ins.getSubValue());

以上代码定义了两个类型：Supertype和SubType。每个类型分别有一个属性和一个方法。他们的主要区别是SubType继承了SuperType，而继承是通过创建SuperType的实例，并将该实例赋给SubType.prototype实现的。实现的本质是重写原型对象，代之以一个新类型的实例。换句话说，原来存在于SuperType的实例中的所有属性和方法，现在也存在于SubType中了 。确立了继承关系之后，给SubType.prototype添加了一个方法。

b. 借用构造函数

在解决原型链中包含引用类型值所带来的问题中，开发人员开始使用一种叫做借用构造函数的技术。这种技术的基本思想相当简单，即在子类型构造函数的内部调用超类型构造函数。别忘了，函数只不过是在特定环境中执行代码的对象，因此通过使用apply()和call()方法也可以在新创建的对象上执行构造函数：

function SuperType(name) {
    this.name = name;  
    this.colors = ['red', 'blue', 'black'];
}
function SubType() {
    // 继承了SuperType，还传递了参数
    SuperType.call(this, 'andy');
}
c. 组合继承

组合继承，有时候也叫伪经典继承，指的是将原型链和借用构造函数的技术组合到一起，从而发挥二者之长的一种继承方式。其背后的思路是使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。这样，既通过在原型上定义方法实现了函数的复用，又能保证每个实例都有它自己的属性：

function SuperType(name) {
    this.name = name;
    this.colors = ['red',  'blue', 'black'];
}
SuperType.prototype.sayName = function() {
    console.log(this.name);
}
function SubType() {
    // 继承属性
    SuperType.call(this, name);
    this.age = age;
}
// 继承方法
SubType.prototype = new SuperType();
SubType.prototype.sayName = function () {
    console.log(this.name);
}
上一篇下一篇

猜你喜欢

热点阅读