有关javascript原型的几个问题

Question

1) Do html elements have prototypes or is it just javascript object? In other words, would something like this be possible in any sort of way?

<div class="wrapper>
    <img src=""mypicture.png />

    <p>Click here</p>
</div>


.wrapper
{width:200px; height:50px;}

img
{width:100%;height:100%;}

p
{display:inline-block;height:100%;width:100%;}

And then in JS/jQuery something like this:

p.prototype = img;
$.on("click", "p", function(){
    $(this).prototype.trigger("click");
});

2) Say I'm using prototypes for a specific plugin I'm writing. I'm not at the moment but just for informational purposes. Say, in this plugin I'm using the JS integral Image() object and i decide, for whatever reason, to assign it a different prototype or add something to the prototype. Would I have to "undo" all the prototype work I did when the plugin gets exited so as to not interfere with anything else on the website that might be using the Image() object. Something like garbage collecting in other OOP languages. Example:

---Plugin start

Image.prototype = foobar;
 var image = new Image();
 ///
    do code here
 ///

on("plugin close ", function (){
     Image.prototype.release;
     OR
     Image.prototype = assign back to whatever it was originaly?
});

--- Plugin End

Here is what I think the answers might be: 1) NO!! But hopefully yes... 2) No prototype resetting isn't necesarry because if a jQuery plugin is wrapped inside of an anonymous function that that instance of code exists only as that one instance and it doesn't affec the global Image() object, just the local instance of the Image() object.

I'm just now trying to get into prototypes. I've done a good amout of research and I def see the benefits of using them but before I jump into them like a fool, I would like to know exactly how to use the properly and what are the things I can and cannot do.

Thx again guys!

Answer 1

About customizing HTML element behaviors , that wouldn't work as you showed in your code, but there's an incoming standard that can be partially used today to do so. Check this article to learn more about custom elements.

In the other hand, about your sample of Image and adding members to its prototype, I really believe you need to understand scoping. If you change a global object prototype, you're modifying its prototype either if you do that in the global or in some local scope.

Thus, you need to inherit Image and add behavior in a new object:

var CustomImage = function() {};
CustomImage.prototype = new Image();

CustomImage.doSomething = function() {

};

Or...

var customImageObject = Object.create(Image.prototype, {
     doSomething: {
         value: function() { }
     }
});

Anyway, that idea about "resetting prototypes" is a very very very bad idea! . Play with prototype chain!