mootools Type function | 易学教程

问题

So I am trying to learn javascript by learning how Mootools works internally. I am looking at these lines specifically:

var Type = this.Type = function(name, object){
    if (name){
        var lower = name.toLowerCase();
        var typeCheck = function(item){
            return (typeOf(item) == lower);
        };

        Type['is' + name] = typeCheck;
        if (object != null){
            object.prototype.$family = (function(){
                return lower;
            }).hide();

        }
    }

    if (object == null) return null;

    object.extend(this);
    object.$constructor = Type;
    object.prototype.$constructor = object;

    return object;
};

//some more code

new Type('Type',Type);

What is happening here?

What is the object being assigned to in the constructor statement down at the bottom, the global window object?

Why is it being called as a constructor with the new statement when the Type function seems to only update the passed in object rather than creating a new one?

Specifically what is 'this' in the line object.extend(this); ? is it the global window object, if so is it adding all the key, value pairs of that object to the Type object?

回答1:

Sheesh, questions lately seem to focus a lot more on mootools internals.

I will answer to the best of my knowledge as I am not a core dev.

Type in MooTools is pretty similar to Class (in fact, the Class constructor itself is a Type) but it focuses more on data / values and the Types of values. It also is meant to extend the native Types defined by ECMA spec and make them more flexible.

I guess there is no point in talking about data types in general (String, Number, Array, Object, etc). Why is there are need to extend them? Well, for starters, Duct Typing is a little quirky in js. typeof {}; // object, typeof []; // object, typeof new Date(); // object etc - not the most helpful, even if since all types inherit from object and is logical for them to be grouped together, it does not help you write code.

So, in the context of js objects, they are created from constructor objects...

What Type does is not replace the constructor functions but changes an existing constructor by adding new methods or properties to it.

eg. new Type('Array', Array);

This will turn the native Array constructor into a type object of sorts. You don't need to save the result or anything - it's a one off operation that mods the original and leaves it open for manipulation.

typeOf(Array); // type

So, what is different? Well, for starters, typeOf([]) is now able to actually tell us what it really is - array. And what really happens here is this: object.extend(Type);, the magical bit. It will copy to the target object all the properties defined on the Type object - you can see them here:

https://github.com/mootools/mootools-core/blob/master/Source/Core/Core.js#L211-232

So, immediately, your newly created Type gets the all important implement and extend methods.

More advanced, let's create a new type that is based on the native Array constructor:

var foo = new Type('foo', Array),
    a = new foo();
// it's a real boy!
a.push('hi');
// ['hi'], foo, object
console.log(a, typeOf(a), typeof a);

But, what if we wanted a custom Type? One that is magical and special? No problem, because argument 2 can actually be a (anonymous) function.

var Awesome = new Type('awesome', function(name, surname) {
    // console.log('I R teh construct0r!'); 
    this.name = name;
    this.surname = surname;
});

// extend it a little.
Awesome.implement({
    getName: function() {
        return this.name;
    },
    getSurname: function() {
        return this.surname;
    }
});

var Dimitar = new Awesome('dimitar', 'christoff');
console.log(typeOf(Dimitar)); // awesome
console.log(Dimitar.getName()); // dimitar

In another example, look at DOMEvent. It takes the above and makes it into a faster leaner Object type. https://github.com/mootools/mootools-core/blob/master/Source/Types/DOMEvent.js#L21

So why is that not a class? Because, Classes are more expensive and events happen all the time.

I hope this helps you somewhat. for a more detailed explanation, ask on the mailing list and hope for the best, perhaps a core dev will have time as it's not your standard 'how do I get the accordion working' type of question...

来源：https://stackoverflow.com/questions/10987173/mootools-type-function

标签

javascript

object

constructor

mootools