第六章.原型与面向对象(6.Object-orientation with prototypes)[完成]

翻译 Secrets of the JavaScript Ninja (JavaScript忍者禁术)

第六章.原型与面向对象(6.Object-orientation with prototypes)

本章重点:

1.利用函数实现构造器

2.解释prototyes

3.利用prototypes实现对象的扩展

4.avoiding common gotchas

5.利用inheritace构建classes

看到prototypes你可能会觉得他与object是紧密联系的,但是,再次提醒各位,我们的重点还是function,Prototypes是一种很方便的定义classes的途径,但是它的本质是属于function的特性

总的来说,如果你很明显的在使用prototypes就是在使用一种classical-style形式的面向对象编程和继承的技术。

让我们开始看看如何使用prototypes

 6.1 实例化和原型(Instantiation and prototypes)

所有functions都拥有一个属性:prototype,

初始状态中prototype指向一个空的object。

这个属性只是在这个函数被当作构造器来调用的时候,

才有作用,其余的情况下,没啥用。

在第三章中,我们利用关键字new来调用一个函数,这个函数就成为了构造器,

它会产出一个新的对象实例作为他的函数上下文(function context)

鉴于对象实例化这个部分很重要,下面我们详细的讨论一下,以便我们能真正理解这个知识点。

 6.1.1 对象实例化(Object instantiation)

通常最简单的一种创建对象的方式如下:

var o = {};

但是这种形式有些缺陷,如果是一个面向对象背景的视角来看,这样做是不便利,并且缺少封装。

JavaScript提供了一种途径,虽然和大多数的语言都不用一一样,例如面向对象阵营中的Java,C++。

JavaScript利用new这个关键字,通过构造器函数来实例化一个对象,

Prototypes作为对象的蓝图(PROTOTYPES AS OBJECT BLUEPRINTS)

让我们来看看利用函数,用和不用new关键字会造成什么结果,注意观察prototype属性是否添加到了新的对象实例中

例6.1

Listing 6.1: Creating an new instance with prototyped method  

function Ninja(){}  

Ninja.prototype.swingSord = function(){  
    return true;  
}  
var ninja1 = Ninja();  
assert(ninja1 === undefined , "No instance of Ninja created.");  

var ninja2 = new Ninja();  
assert(ninja2 && ninja2.swingSword(), "Instance exists and method is callable.");  

这个例子说明,函数的prototype作为new出来的对象的蓝图,但是前题是这个函数是被当作构造函数来调用才行。

实例的属性(INSTANCE PROPERTIES)

当使用构造函数通过new关键字来构建一个对象实例的时候,这就意味着我们可以在构造函数中通过prototype来初始化一些值。

让我们来看例6.2

Listing  6.2:Observing the precedence of initialization activities  
function Ninja(){  
    thisswung = false;  
    this.swingSword = function(){  
        return !this.swung;  
    }  
}  

Ninja.prototype.swingSword = function(){  
    return this.swung;  
}  

var ninja = new Ninja();  
assert(ninja.swingSword(), "Called the instance method, not the prototype method.");  

1.对象的属性从prototype来

2.对喜爱那个的属性从构造函数里面来

当这两者冲突的时候,构造函数优先于prototype。

因为构造函数中的this就是对象实例本身,我们可以在构造函数中做任何初始化的事情。

关联问题(RECONCILING REFERENCES)

这里有个很重要的问题要理解,就是JavaScript如何处理对象实例的属性来关联prototype的时序问题。

在上个例子中,时序问题我们可以能会如此解读:首先一个新的实例对象被创建出来,并传递给了构造函数,然后构造函数的prototype属性会被复制到对象实例中。

然后事实是构造函数内部的逻辑覆盖了prototype的值。

我们会知道,这并不是像我们想的那样,简单的将protype拷贝

例如,如果prototype的值仅仅是简单的拷贝,在这个对象之后对prototype的任何改变都不应该再来影响这个对象才对。但事实是这样吗?

让我们来看例6.3

Listing 6.3: Observing the behavior of changes to the prototype  
function Ninja(){  
    this.swung = true;  
}  
var ninja = new Ninja();  

Ninja.prototype.swingSword = function(){  
    return this.swung;  
}  

assert(ninja.swingSword(), “Method exists, even out of order.”);

很明显,prototype不是简单的拷贝

简单的时序如下:

1.当你查看一个对象的属性,首先,这个对象检查真身的属性中是否存在,如果存在则使用这个值,如果不存在…

2.他会检查与他有关的那个prototype,如果prototype存在这个属性,则使用此值,如果不存在…

3.这个值就是undefined

我们后面会看到,真正的时序会比现在这个复杂一些,不过我们先这么理解。

这一切是如何工作的?

JavaScript中每个对象丢有一个名字叫做constructor的属性,这个属性关联的是创建此对象的构造函数。由于prototype是构造函数的一个属性,所以每个对象都能有方法找到与他相关的prototype。

在本例中,如果我们查看执行此例子时候的console(in Chrome),我们会看到对象的结构如下:

>ninja.constructor  
 function Nunja(){  
    this.swung = true;  
 }  
>ninja.constructor.prototype.swingSword  
 function(){  
    return this.swung  
 }  

这里的更新了prototype就同时更新object中的属性值,我们叫他“同步更新”,

这个特性会给我带来很多的用处,这个特点在其他语言中是很少见到的。

利用这个特性,我们可以构建一个函数化的框架,使用这个框架的用户可以使用到未来的函数实现,哪怕对象已经被创建出来了。

Listing 6.4: Fruther observing the behavior of changes to the prtotype  
function Ninja(){  
    this.swung = true;  
    this.swingSword = function(){  
        return !this.swung;  
    }  
}  

var ninja = new Ninja();  

Ninja.prototype.swingSword = function(){  
    return this.swung;  
}  

asswert(ninja.swingSwrod(), "Called the instance method, not the prototype method.");  

本例中我们看到,在ninja被创建之后,通过更改prototype的值可以影响到ninja中的对应属性。

 6.1.2 通过构造器归类对象(Object typing via constuctors)

例6.5

Listing 6.5:Examining the type of an instance and its constructor  
function Ninja(){}  
var ninja = new Ninja();  

assert (typeof ninja == "object", "The type of the instance is object.");  
assert (ninja instanceof Ninja, "instance of identifies the constructor.");  
assert (ninja.constructor == Ninja, "The ninja object was created by the Ninja function.")  

在本例中,我们定义了一个构造函数,然后利用它创建了一个对象实例.

然后我们利用type of来检验这个实例的类型。这里并不很明显,因为一个实例指定是对象,结果指定是“object”.相比起typeof,更有意思的是instanceof,通过instanceof我们可以清晰的看出一个对象实例的构造函数。

另外,我们知道对象都有一个constructor属性,这个属性关联的就是当初创建这个对象实例的构造函数。

注意,constructor属性除了可以查询到原始的构造函数,我们还可以利用这个属性来创建一个新的Ninja对象实例.

例:6.6

Listing 6.6: Instantiating a new object using a reference to a construcor  
function Ninja(){}  
var ninja = new Ninja();  
var ninja2 = new ninja.constructor();  

assert(ninja2 instanceof Ninja, "It's a Ninja!");  

注意:一个对象实例的constructor属性是可以被更改的,

到这里我们只是接触了一下prototypes的皮毛,下面我们来看看prototypes真正的有趣的地方。

 6.1.3 继承和原型链(Inheritance and the prototype chain)

我们之前看到instanceof这个关键字,

如果想要应用它,我们需要理解JavaScript的继承机制,还有prototype chain扮演着什么样的角色。

让我们看一下例6.7,在这个例子中我们会试图将一个继承加入到对象实例中。

Listing 6.7: Trying to achieve inheritance with prototypes  
function Person(){}  
Person.prototype.dance = function(){};  
function Ninja(){};  

Ninja.prototype = { dance: Person.prototype.dance };  

var ninja = new Ninja();  
assert( ninja instanceof Ninja, "ninja receives functionality from the Ninja prototype");  
assert( ninja instanceof Person, "... and the Person prototype");  
assert( ninja instanceof Object, "... and Object prototype");  

本例中,目的是让Ninja继承Person的dance属性,但是运行的结果发现,ninja instanceof Person这句是false。

说明ninja并不是一个Person

虽然Ninja复用了Person的dance属性,但是他也不意味着就是一个Person

如果我们想让Ninja复用Person的所有属性,那么就需要copy多次,这绝不是继承。

注意:即便什么也不做,每个对象都会继承Object,你可以通过这句话来检验一下:

console.log({}.constructor)

我们的真正目的是prototype chain。

例如一个Ninja可以是一个person,

一个person可以是Mammal,一个Mammal可以是一个Animal,最终都成为一个Object。

创建prototyp chain的一个方式是通过其他对象的prototype,例如:

SubClass.prototype = new SuperClass();

这样通过SubClass创建出来的对像,会拥有SuperClass的所有属性。

另外它的prototype还会指向SuperClass的prototype

我们来更改一下上面的例子,看例6.8:

Listing 6.8 Achieving inheritance with prototypes  
function Person(){}  
Person.prototype.dance = function(){};  

function Ninja(){}  

Ninja.prototype = new Person();  

var ninja = new Ninja();  
assert(ninja instanceof Ninja, "ninja receives functionality from the Ninja prototype");  
assert(ninja instanceof Person, "... and the Person prototype");  
assert(ninja instanceof Object, "... and the Object prototype");  
assert(typeof ninja.dance == "function", "... and can dance!");  

注意,不要用Ninja.prototype = Person.prototype;

如果这样做,那么更改Ninja prototype的时候同样会更改Person prototype(因为他们是同一个对象)

这里要注意,prototype继承模式中,所有继承链中的函数都是实时更新的(live update)。

我们用一个图来解释prototype chain

图6.6

1.jpg

在图6.6中,我们注意到,对象的所有属性都是继承自Object的prototype。

所有自然对象(native objects)的constructors属性(例如Object,Array,String,Number,RegExp, and Function)都拥有prototype属性,并且它是可以被更改和继承的。

这样一来,每个上面提到的对象的constructors都是functions本身.

在语言层面,这是一个很有用的特点,利用它,我们可以扩展这门语言本身。

例如,JavaScript1.6版本会加入一些有用的方法,例如Arrays的forEach().

如果我们想在1.6版本之前就是用forEach(),并且当JavaScript升级到1.6之后能同步使用新的特点,那么请看下面这个例子,我们针对旧的浏览器,实现一个forEach()

Listing 6.9: Implementing the JavaScrript 1.6 array forEach method in a future-compatible manner  

if (!Array.prototype.forEach){  
    Array.prototype.forEach = function(fn, callback){  
        for (var i = 0; i < this.length; i++){  
            fn.call(callback || null, this[i], i, this);  
        }  
    }  
}  

["a", "b", "c"].forEach(function(value, index, array){  
    assert(value, "Is in position" + index + "out of " + (array.length - 1))  
})  

我们已经看到,我们可以同那个prototypes来增强native JavaScript objects;

现在,让我们来关注一下Dom

 6.1.4 HTML DOM prototypes

浏览器的一个有趣的地方是所有的DOM元素都是继承于HTMLElement构造器.

通过操作HTMLElement的prototype,浏览器就会提供我们扩展任何HTML节点的能力。

让我们来看例6.10

Listing 6.10: Adding a new method to all HTML elemeents via the HTMLElement prototype  
<div id="a">I'm going to be removed.</div>  
<div id="b">Me too!</div>  
<script>  
    HTMLElement.prototype.remove = function(){  
        if (this.parentNode)  
            this.parentNode.removeChild(this);  
    };  

    var a = document.getEleementById("a");  
    a.parentNonde.removeChild(a);  

    document.getElementById("b").remove();  

    assert(!document.getElementById("a"), "a is gone.");  
    assert(!document.getElementById("b"), "b is gone too.");  

我们添加了一个新的remove()方法,通过更改HTMLElement构造器的prototype。

 6.2 The Gotchas!

 6.2.1 对象的扩展(Extending Object)

我们可能会犯的及其严重的错误就是去扩展native Object.prototype.

难点在于一旦我们扩展了这个prototype,所有的对象将会受到影响。

让我们来看一个例子

这里我们想在Object上增加一个keys()方法,它会返回一个包含所有属性名的列表

看例子6.11

Listing 6.11: Unexpected behavior of adding extra properties to the Object prototype  
Object.prototype.keys = function(){  
    var keys = [];  
    for (var p in this)  
        keys.push(p);  
    return keys;  
}  

var obj = {a:1, b:2, c:3};  
assert(obj.keys().length == 3, "There are three properties in this object.");  

结果是报错的,我们需要hasOwnProperty(),它能区别哪些是真正属于对象实例的属性,并不是引用的prototype.让我们来看例6.12

Listing 6.12: Using the hasOwnProperty() method to tame Object prototype extensions  
Object.prototype.keys = function(){  
    var keys = [];  
    for (var i in this)  
        if (this.hasOwnProperty(i))  
            keys.push(i);  
    return keys;  
};  

var obj = {a:1, b:2, c:3};  

assert(obj.keys().length == 3, "There are three properties in this object.");  

 6.2.2 Number的扩展(Exending Number)

Listing 6.13: Adding a method to the Number prototype.  
Number.prototype.add = function(num){  
    return this + num;  
}  

var n = 5;  
assert(n.add(3) == 8, "It works when the number is in a variable");  
assert((5).add(3) == 8, "Also worrks if a number is wrapped in parentheses.");  
assert(5.add(3) == 8, "What about a simple literal?");  

本例运行后,浏览器会报错。

It turns out that the syntax parser can’t handle the literal case.

 6.2.3 Subclassing native objects

Listing 6.14: Subclassing the Array object  
function MyArray(){}  
MyArray.prototype = new Array();  
var mine = new MyArray();  
mine.push(1,2,3);  
assert(mine.length == 3, "All the items are on our sub-classed array.");  
assert(mine instanceof Array, "Verify that we implement Array functionality.");  

这种模式就是制造子类,但是在IE中,浏览器不允许Array被子类化,所以这样做是危险的。

让我用另一种方式来实现,例6.15

Listing 6.15: Simulating Array functionality but without the true sub-classing.  
function MyArray(){}  
MyArray.prototype.length = 0;  

(function(){  
    var methods = ['push', 'pop', 'shift', 'unshift', 'slice', 'splice', 'join'];  
    for (var i = 0; i< methods.length; i++)(function(name){  
        MyArray.prototype[name] = function(){  
            return Array.prototype[name].apply(this, arguments);  
        }  
    })(methods[i]);  

})();  

var mine = new MyArray();  
mine.push(1,2,3);  
assert(mine.length == 3, "All the items are on our sub-classed array.");  
assert(!(mine instanceof Array), "We aren't subclassing Array, though.");  

 6.2.4 实例化的问题(Instantiation issues)

我们已经看到函数可以被当作普通函数调用,也可以作为构造器被调用,也许你还是很模糊,不知道哪个代码是哪个,让我们用些例子来详细解释一下。

Listing 6.16: The result of leavving off thee new operator from a function call.  
function User(first, last){  
    this.name = first + " " + last;  
}  
var user = User("Ichigo", "Kurosaki");  
assert(user , "User instantiated");  
assert(user.name == "Ichigo Kurosaki", "user name correctly assigned");  

运行会报错

Listing 6.17: An example of accidentally introducing a variablee into the global namespace  
function User(first, last){  
    this.name = first + " " + last;  
}  
var name = "Rukia";  
var user = User("Ichigo", "Kurosaki");  
assert(name == "Rukia", "name was set to Rukia.");  
Listing 6.18: Determining if we're called as constructor  
function Test(){  
    return this instanceof arguments.callee;  
}  
assert(!Test(), "We didn't instantiate, so it returns false.");  
assert(new Test(), "We did instantiate, returning true.");  

复习一下以前学过的概念:

1.我们可以获得当期被调用的函数的的引用,通过arguments.calle(我们在第四章学过)

2.普通函数的函数上下文是全局域的

3.instanceof关键字可以判断一个对象的构造器

在本例中我们看到这样的表达:

this instanceof arguments.callee

如果为true表示是作为构造函数被调用的,如果为false则表示是作为普通函数被调用的。

这就是所,在函数中,我们可以判断出,它是否作为构造函数被调用。

如果我们不是忍者,如果这个函数没有作为构造函数被调用,我们会抛出一个异常来提醒用户,下次正确使用。但是我们可以做的更好,让我们看看如何修复这个问题

Listing 6.19: Fixing things on the caller's behalf  
function User(first, last){  
    if (! (this instanceof arguments.callee)){  
        return new User(first, last);  
    }  
    this.name = first + " " + last;  
}  
var name = "Rukia";  
var user = User("Ichiggo", "Kurosaki");  

assert(name == "Rukia", "Name was set to Rukia.");  
assert(user instanceof User, "user instantiated");  
assert(user.name == "Ichigo Kurosaki", "User name correctly assigned");  

 6.3 编写像类一样的代码(Writing class-like code)

JavaScript可以允许我们通过prototype来实现集成,针对于大多数面向对象背景的开发者来说,JavaScript的继承系统是比较熟悉的。

一般来说,这些开发者会渴求几点:

1.一套可以比较轻量的构建新的构造函数和属性的系统

2.一个简单的方式可以执行prototype的继承

3.一个路径可以利用函数的prototype来覆盖methods

有2个比较突出的JavaScript类库实现了类的继承:base2和Prototype。

我们会提取其中的精华部分来展示。

Listing 6.20: An example of somewhat classical-style inheritance syntax  
var Person = Object.subClass({  
    init: function(isDancing){  
        this.dancing = isDancing;  
    },  
    dance: function(){  
        return this.dancing;  
    }  
});  

var Ninja = Person.subClass({  
    init: function(){  
        this._super(false);  
    },  
    dance: function(){  
        // Ninja-specific stuff here  
        return this._super();  
    },  
    swingSword: function(){  
        return true;  
    }  
});  

var person = new Person(true);  
assert(person.dance(), "The person is dancing.");  

var ninja = new Ninja();  
assert(ninja.swingSword(), "The sword is swinging.");  
assert(!ninja.ance(), "The ninja is not dancing.");  
assert(person instanceof Person, "Person is a Person.");  
assert(ninja instanceof Ninja && ninja instanceof Person, "Ninja is a Ninja and a Person.");  

这里我们通过subclass()方法来构建了一个子类出来,现在我们需要实现这个方法。

Listing 6.21: A sub-classing method  
(function(){  
    //#1 Determines if functions can be serialized  
    var initializing = false,   
    fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;  

    //#2 Creates a subclass  
    Object.subClass = function(prop){  
        var _super = this.prototype;  

        //#3 Instantiates the superclass  
        initializing = true;  
        var proto = new this();  
        initializing = false;  

        //#4 Copies properties into prototype  
        for (var name in prop){  
            proto[name] = typeof prop[name] == "function" &&  
                typpeof _super[name] == "function" && fnTest.test(prop[name]) ?  

                //#5 Defines overriding function  
                (function(name, fn){  
                    return function(){  
                        var tmp = this._super;  

                        this._super = _super[name];  

                        var ret = fn.apply(this, arguments);  
                        this._super = tmp;  

                        return ret;  
                    }  
                })(name, prop[name]) :   
                prop[name]  
        }  

        //#6 Creates a dummy class constructor  
        function Class(){  
            if (!initializing && this.init)  
                this.init.apply(this, arguments);  
        }  

        //#7 Populates class prototype  
        Class.prototype = proto;  

        //#8 Overrides constructor reference  
        Class.constructor = Class;  

        //#9 Makes class extendable  
        Class.subClass = arguments.callee;  

        return Class;  

    };  
})();  

这里最重要的两处实现为initialization和super-method protions,

我们下面来一步步的分析这些代码。

让我们开始看看可能以前你们见过的东西。

 6.3.1 检查函数是否可序列化(Checking for function serializability)

很不幸,我们代码的一开始就是一段秘传的代码,它可能会让人迷惑。

这段代码的目的是检查浏览器是否支持函数的序列化。

函数序列化是获取函数的代码文本资源。

在大多数浏览器中,函数的toString()方法就可以搞定。

在我们的代码中,我们这样写的:

/xyz/.test(function(){xyz;})

如何函数可以被序列化,那么结果就是true(关于正则表达式我们后面会讨论)

我们写出这样的代码,为了后面用到:

superPattern= /xyz/.test(function(){ xyz; }) ? /\b_super\b/ : /.*/;

这里的superPattern变量,我们后面会用于检验一个函数是否包含"_super".

现在让我们看看sub-classing方法的代码。

6.3.2 subClasses的实例化(Initialization of subclasses)

在这里,我们会声明一个subclass的方法,我们这样写的:

Object.subClass = function(properties){  
    var _super = this.prototype;  

这里添加到Object上的subClass方法,接受唯一的一个参数,这个参数就是一个属性组,我们需要遍历这个属性组并将它们加到subclass中。

普通的代码一般会写成这样:

function Person(){}  
function Ninja(){}  
NInja.prototype = new Person();  
assert((new Ninja()) instanceof Person, "Ninjas are peeople too!");  

 6.3.3 保留父级的方法(Preserving super methods)

大多数语言都支持继承,一个方法被重写后我们可以访问重写后的方法。

这是很有用的,有时候我们会重写一个方法,但大部分时候我们只是想要加强一个方法。

在我们的代码中我们创建了一个新的方法叫做_super,它是关联着父类的方法。

例如例6.20,当我们想调用父类方法的构造函数的时候,我们这样写的:

var Person = Object.subclass({  
    init: function(isDancing){  
        this.dancing = isDancing;  
    }  
})  

var Ninja = Person.subclass({  
    init: function(){  
        this._super(false);  
    }  
})  

利用_super我们可以省去重新写父类代码的麻烦。

实现这个方法需要多个步骤。

简单来说我们需要merge父类和传递进来的属性。

在开始,我们创建了一个实例,我们将此实例作为prototype,

代码如下:

initializing = true;  
var proto = new this();  
initializing = false;  

记得之前我们讨论过的如何保护初始化吗?对,是通过initializing这个变量标识。

如果我们不考虑父类的函数,我们可以这么写。

for(var name in properties) proto[name] = properties[name];

但是我们要考虑父类的函数,我们会通过_super来引用父类的函数。

我们首先要查明我们是否需要wrap子类函数。我们可以通过下面的表达式:

typeof properties[name] == "function" &&  
typeof _super[name] == "function" &&  
superPattern.test(properties[name])  

这个表示包括了如下的检查项:

1.子类的这个属性是否是个函数?

2.父类的这个属性是否是个函数?

3.子类函数中是否包含_super()?

只有所有条件都满足的时候我们才开始wrap这个函数,具体代码如下:

(function(name, fn){  
    return function(){  
        var tmp = this._super;  
        this._super = _super[name];  
        var ret = fn.apply(this, arguments);  
        this._super = tmp;  
        return ret;  
    }  
})(name, properties[name])  

 6.4 总结(Summary)

在这一章中,我们看到通过prototype我们将面向对象带进了JavaScript。

我首先介绍了prototype的概念,他所扮演的角色。我们也介绍了是否用new关键字来调用一个函数的区别。

接下来,我们学习了如何辨别一个对象的类型。

我们还学习了面向对象中的继承概念,以及学习了如何运用prototype链来影响继承。

我们实现了supclass方法来构建一个子类。

在最后我们还一睹了正则表达式,在下一个章节我们会深入的学习它。

(转载本文章请注明作者和出处 Yann (yannhe.com),请勿用于任何商业用途)

 
51
Kudos
 
51
Kudos

Now read this

第三章.函数是根基(3.Functions are fundamental)[完成]

翻译 Secrets of the JavaScript Ninja (JavaScript忍者禁术) 第三章 函数是根基(3.Functions are fundamental) 本章重点: 1.为什么能够理解函数是如此的重要 2.为什么函数是基本类型对象(first-class objects) 3.函数如何被浏览器调用 4.函数的声明(Delaring functions) 5.函数被调用的秘密 6.函数上下文(The context within a... Continue →