javascript - 如何使用原型(prototype)进行自定义方法和对象操作

Question

老实说，我正在尝试理解 JavaScript 原型(prototype)，但没有取得太大进展。我不太确定如何解释我正在尝试做的事情，只是说我的最终目标部分是学习如何类似于 jQuery 遍历 DOM 并添加自定义方法来操作正在访问的特定元素。

编辑:下面的代码已更新，以反射(reflect)我从迄今为止收到的答案中学到的概念，并显示这些概念与我希望实现的目标的差距。

function A(id) {
    "use strict";
    this.elem = document.getElementById(id);
}
A.prototype.insert = function (text) {
    "use strict";
    this.elem.innerHTML = text;
};

var $A = function (id) {
    "use strict";
    return new A(id);
};

var $B = function (id) {
    "use strict";
    return document.getElementById(id);
};

function init() {
    "use strict";
    $A('para1').insert('text goes here'); //this works
    $A('para1').innerHTML = 'text goes here';  //this does not work
    console.log($A('para1')); //returns the object A from which $A was constructed
    console.log($B('para1')); //returns the dom element... this is what I want

    /*I want to have $A('para1').insert(''); work and $A('para1').innerHTML = '';
      work the same way that $B('para1').innerHTML = ''; works and still be able
      to add additional properties and methods down the road that will be able
      act directly on the DOM element that is contained as $A(id) while also
      being able to use the properties and methods already available within
      JavaScript*/
}
window.onload = init;

如果可能，请添加解释，说明您的代码为何有效，以及为什么您认为这是实现此目的的最佳方法。

注意:我询问的全部目的是为了自己学习这个...请不要建议使用 jQuery，它违背了目的。

Answer 1

var $ = function(id) {  
    return new My_jquery(id);  
}  

function My_jquery(id) { 
    this.elem = document.getElementById(id);
}

My_jquery.prototype = {
   insert : function(text) { this.elem.innerHtml = text; return this;}
}

$('para1').insert('hello world').insert('chaining works too');  

在 My_jquery.prototype 中添加你想要对 elem 进行操作的任何方法