使用オブジェクトを直接

Question

私はHTML要素（複数可）、選択のCSSに変更を加えるために使用されstyliseという名前の一つの方法を、持っている引数としてセレクタを受け取るオブジェクトを作ってるんです。

コード：

/* ----- JavaScript ----- */ 
 
function get(selector) { 
 
    var 
 
     self = {}, 
 
     elements = Array.from(document.querySelectorAll(selector)); 
 
    
 
    this.stylise = function(object) { 
 
     Object.keys(object).forEach(function(propertyName) { 
 
      for (var index = 0; index < elements.length; index++) { 
 
       elements[index].style[propertyName] = object[propertyName]; 
 
      }; 
 
     }); 
 
    }; 
 
    
 
    return Object.setPrototypeOf(self, this.prototype); 
 
};

<!----- HTML -----> 
 
<input id = "text" type = "text" style = "padding: .5em .7em;"/>

ラインreturn Object.setPrototypeOf(self, this.prototype);が好きで、それを呼び出すことにより、期待通りに上記のコードは動作しますスキップされた場合：

var a = new get("#text"); 
a.stylise({ 
    backgroundColor: "yellow", 
    borderRadius: "5px" 
}); 

しかし、私は上記を動作させたい呼び出すことによってそれが好き：Object doesn't support property or method 'stylise'：

get("#text").stylise({ 
    backgroundColor: "yellow", 
    borderRadius: "5px" 
}); 

私はコンソールで次のエラーを得たように私はObject.setPrototypeOf(self, this.prototype)を使用してそれを達成しようとしたが、無駄に。

私のコードのどの部分がこれを引き起こしていますか？どのように解決できますか？

Answer 1

あなたはちょうどあなたが作成したとselfに割り当てたオブジェクトを返すとself.styliseではなくthis.styliseに割り当てるget持って、（それはあなたのために到達するものです非常に、非常にいくつかの状況があります）そのためsetPrototypeOfは必要ありません。 ：

/* ----- JavaScript ----- */ 
 
function get(selector) { 
 
    var 
 
     self = {}, 
 
     elements = Array.from(document.querySelectorAll(selector)); 
 
    
 
    self.stylise = function(object) { 
 
     Object.keys(object).forEach(function(propertyName) { 
 
      for (var index = 0; index < elements.length; index++) { 
 
       elements[index].style[propertyName] = object[propertyName]; 
 
      }; 
 
     }); 
 
    }; 
 
    
 
    return self; 
 
} 
 
get("#text").stylise({ 
 
    backgroundColor: "yellow", 
 
    borderRadius: "5px" 
 
});

<!----- HTML -----> 
 
<input id = "text" type = "text" style = "padding: .5em .7em;"/>

実際には、あなたがオブジェクト初期化子内styliseを作成することができます。また、elementsにforEachを使用することができます。

/* ----- JavaScript ----- */ 
 
function get(selector) { 
 
    var elements = Array.from(document.querySelectorAll(selector)); 
 

 
    return { 
 
    stylise: function(object) { 
 
     Object.keys(object).forEach(function(propertyName) { 
 
     elements.forEach(function(element) { 
 
      element.style[propertyName] = object[propertyName]; 
 
     }); 
 
     }); 
 
    } 
 
    }; 
 
} 
 
get("#text").stylise({ 
 
    backgroundColor: "yellow", 
 
    borderRadius: "5px" 
 
});

<!----- HTML -----> 
 
<input id="text" type="text" style="padding: .5em .7em;" />

---

あなたは、コンストラクタの外（とオブジェクトのelementsを置くことは大丈夫だったという）styliseを定義したいことを他の場所で言いました。その場合は、Object.createを使用して、特定のプロトタイプオブジェクト（この場合はget.prototype）に基づいてオブジェクトを作成します。これはコンストラクタを呼び出す前にオブジェクトを作成するときにnewが実行する操作ですが、newを使用しないと言っています。

この例では、最初にgetで2つのオブジェクトを作成してから、styliseを呼び出します。あなたがこれをやろうとしている掲示様々な試みは、そのシナリオに失敗します：

/* ----- JavaScript ----- */ 
 

 
// The builder function 
 
function get(selector) { 
 
    // Create a new object we'll return, backed by `get.prototype` 
 
    var obj = Object.create(get.prototype); 
 
    
 
    // Put the elements matching the selector on it 
 
    obj.elements = Array.from(document.querySelectorAll(selector)); 
 
    
 
    // Return it 
 
    return obj; 
 
} 
 

 
// Add `stylise` to the prototype `get` assigns objects 
 
get.prototype.stylise = function(object) { 
 
    // Get our elements, so we don't have to worry about `this` in the callbacks below 
 
    var elements = this.elements; 
 
    
 
    // Style them 
 
    Object.keys(object).forEach(function(propertyName) { 
 
    elements.forEach(function(element) { 
 
     element.style[propertyName] = object[propertyName]; 
 
    }); 
 
    }); 
 
}; 
 

 
// Using it 
 
var t1 = get("#text1"); 
 
var t2 = get("#text2"); 
 
t1.stylise({ 
 
    backgroundColor: "yellow", 
 
    borderRadius: "5px" 
 
}); 
 
t2.stylise({ 
 
    backgroundColor: "green", 
 
    borderRadius: "10px" 
 
});

<!----- HTML -----> 
 
<input id="text1" type="text" style="padding: .5em .7em;" /> 
 
<input id="text2" type="text" style="padding: .5em .7em;" />

---

サイドノート：1を置くことは無害あるものの関数宣言は、（それらの後;を必要としません。 ）。 ;は、終了ステートメント用です。宣言はステートメントではありません。