に「これ」を使用して、独自のメソッドを呼び出すために：「！ハローの世界」どのように私はこのような何かしたいと思いDOMノード
function alrtHtml() {
alert(this.innerHTML)
}
function myFunc(id) {
document.getElementById(id).alrtHtml()
}<html>
<head>
<meta charset="UTF-8" />
<title>test</title>
</head>
<body>
<h1 id="h1">Hallo world!</h1>
<input type="button" value="click" onclick="myFunc('h1')" >
</body>
</html>は、テキストを警告すべきh1タグ内にあります。
あなたが探しているのはdocument.getElementById(id)が返すタイプのprototypeに関数を追加することです。
この場合、Elementが返されます。そのため、関数をプロトタイプに追加するには、次のコードを記述します。別の代替として、
Element.prototype.alrtHtml = function() {
alert(this.innerHTML)
}
、あなたはまた、右alertHTMLに要素を渡すことができます。
function alertHTML(el) {
alert(el.innerHTML)
}
function myFunc(id) {
var elArg = document.getElementById(id)
alertHTML(elArg)
// You could also write it like this:
/*
alertHTML(document.getElementById('h1'))
*/
}<h1 id='h1'>Hello, world</h1>
<button onclick="myFunc('h1')">Button</button>ありそれを行う理由の過多だが、それの要旨はにあります誰かがプロトタイプにalertHTMLメソッドを作成している場合は、問題を回避してください。
EDIT：あなたは本当にがthis使用したい場合、あなたはまた、結合機能を知りたいかもしれません - funfunfunction made a good video on this here。ここではそれがうまくいく方法は次のとおりです。その機能は、あなたがapplyに渡す最初の引数としてthisであるものは何でも
function alertHTML() {
alert(this.innerHTML)
}
function myFunc(id) {
var el = document.getElementById(id)
alertHTML.apply(el)
}<h1 id='h1'>Hello, world</h1>
<button onclick="myFunc('h1')">Button</button>apply実行が。
すべてのフィードバックありがとうが、私は関数を呼び出すために "element.xx（）"のような何かをしたいです。それは私のアイデアの一例に過ぎない "この"キーワードを使いたくないのです。 - PS：私の悪い英語のために申し訳ありません私はチェス – SkyCrafter
ネイティブプロトタイプを拡張したくないのが一般的です。それを行わずに連鎖可能なメソッドを作成する方法の1つは、独自のメソッドを作成することです（applyに渡す引数の残りは直接関数に渡されます）。要素を取得し、ほとんどのライブラリと同様に、innerHTMLに警告する別の連鎖可能なメソッドを作成します。
おそらく最も簡単な例では、あなただけの独自のオブジェクトではなく、ネイティブオブジェクトを拡張している、とあなたはチェーン可能メソッドのいずれかの種類を作成することができます。この方法で、この
function getElement(selector) {
if (!(this instanceof getElement)) return new getElement(selector);
this.element = document.querySelector(selector);
return this;
}
getElement.prototype.alertHtml = function() {
alert(this.element.innerHTML);
return this;
}
function myFunc(id) {
getElement(id).alertHtml();
}
myFunc('#test');<div id="test">TEST</div>ようなものになるだろうそれに追加する。
非常にクールです。以前これをやっていることは考えられませんでした。 – m0meni
すごいコードですが、関数getElement（）の最初の行を私に説明できますか？ – SkyCrafter
@SkyCrafter - それはトリックです。関数が 'new'で呼び出されていない場合は、それ自体のインスタンスではないので、インスタンスを作成するために' new'を呼び出し、次回はその条件をスキップします。これは、毎回 'new getElement'を行うことなくインスタンスを作成する一般的な方法です.jQueryと他のいくつかのライブラリは同じことを内部的に行います。 – adeneo
ドミニクは正しいアイデアを持っていましたが、次回は有効なJSを書くようにしています：p – m0meni
そう、私はあなたの編集を気付きました。答えをもっと鮮明にしてくれてありがとう！私はまだスタックオーバーフローの新しさとどのように良い答えを作るので、本当にあなたの助けに感謝しています！ – DominicValenciana
これは非常に悪いことですが、お勧めしません。 –