javascript 'this‘代码用于链接
我正在尝试开发一个像jQuery这样的允许链接的库。我已经有了起作用的功能，但我需要把它们联系在一起。请查看下面的代码，并帮助我解决如何使用“this”来访问正确的上下文和开发一个允许链接的jQuery类库。我希望'learnQuery()‘像jQuery()那样工作。我很难将cssClass方法链接在一起。
function learnQuery(elementSelector) {
'use strict';
var learnQueryContext = this;
function cssPropProxy(property, value) {
return cssProp(elementSelector, property, value);
}
function ajaxReqProxy(url, options) {
return ajaxReq(url, options);
}
var cssClass = new CssClass();
return {
cssProp : cssPropProxy,
ajaxReq : ajaxReqProxy,
cssClass: {
add: function(setClass) {
cssClass.add(elementSelector, setClass);
return learnQueryContext;
},
remove: function(deleteClass) {
cssClass.remove(elementSelector, deleteClass);
return learnQueryContext;
},
toggle: function(toggleClass) {
cssClass.toggle(elementSelector, toggleClass);
return learnQueryContext;
},
has: function(hasClass) {
cssClass.has(elementSelector, hasClass);
return learnQueryContext;
}
}回答 3
Stack Overflow用户
发布于 2015-02-12 13:26:19
感谢埃德温和MarkM的回复。我的主要问题是上下文。当与另一个方法链接时，我需要learnQuery(元素).someMethod()来保留它的上下文。我仍然很难完全理解JS中的“这”，以及如何确保它引用调用对象--特别是当对象在闭包中调用函数截止值时，就像我的示例中所示。上面的示例使用learnQueryContext变量来指出，我知道这是我的问题所在，我无法弄清楚如何保留上下文(即正确的对象)，以便调用的函数对其进行操作并返回所需的值。我离得很近。我没有像最初那样返回long对象，而是将其转换为可以在其内部引用的变量，然后返回该变量。这使得它能够保留正确的上下文。见下文：
function learnQuery(elementSelector) {
'use strict';
function cssPropProxy(property, value) {
return cssProp(elementSelector, property, value);
}
function ajaxReqProxy(url, options) {
return ajaxReq(url, options);
}
var cssClass = new CssClass();
var dom = new Dom();
var eventListener = new EventListener();
var returnedContext = {
cssProp : cssPropProxy,
ajaxReq : ajaxReqProxy,
cssClass: {
add: function(setClass) {
cssClass.add(elementSelector, setClass);
return returnedContext;
},
remove: function(deleteClass) {
cssClass.remove(elementSelector, deleteClass);
return returnedContext;
},
toggle: function(toggleClass) {
cssClass.toggle(elementSelector, toggleClass);
return returnedContext;
},
has: function(hasClass) {
return cssClass.has(elementSelector, hasClass);
}
}
};
return returnedContext;
}现在我可以用：
learnQuery('someElement').cssClass.add('someClass').cssClass.toggle('someClass');它的工作就像预期的那样。cssClass本身就是我在其他地方定义的构造函数，以及它的方法。这段代码只是一个接口，允许learnQuery()使用它们。
请让我知道你的想法和如何解决它。
Stack Overflow用户
发布于 2015-02-11 19:30:44
是的，在尝试学习同样的东西之前，我曾玩过这样的游戏。我还保存了这个，看看你能不能理解：
var $ = (function(){
$ = function(selector){ return new MyQuery(selector); };
var MyQuery = function(selector){
var nodes = document.querySelectorAll(selector);
this.each = Array.prototype.forEach.bind(nodes);
this.map = Array.prototype.map.bind(nodes);
var len = this.length = nodes.length;
for(var i = 0; i < len; i++) this[i] = nodes[i];
};
$.fn = MyQuery.prototype = {
addClass: function(classes){
this.each(function(el){
classes.forEach(function(className){
el.classList.add(className);
});
});
return this;
},
removeClass: function(classes){
this.each(function(el){
classes.forEach(function(className){
el.classList.remove(className);
});
});
return this;
},
addAttribute: function(newAttrib, value){
this.each(function(el){
el.setAttribute(newAttrib, value);
});
return this;
},
removeAttribute: function(attrib, value){
this.each(function(el){
el.removeAttribute(attrib);
});
return this;
},
remove: function(){
this.each(function(el){
el.remove();
});
return this;
},
on: function(type, callback){
this.each(function(el){
el.addEventListener(type, callback);
});
return this;
},
append: function(elem){
this.each(function(el){
el.appendChild(elem);
});
return this;
},
css: function(prop, value){
this.each(function(el){
el.style[prop] = value;
});
return this;
}
}
return $;
})();Stack Overflow用户
发布于 2015-02-11 20:33:08
很难弄清楚你想用这些函数做些什么。cssPropProxy()返回cssProp，但是cssProp看起来只是对cssPropProxy()的引用。
链接的基本思想是返回对象实例。在您的代码中，它看起来像是要返回对函数的引用。下面是一个赤裸裸的链接示例，可能会有所帮助：
function chainingExample(startText){
return {
mytext: startText,
append: function(text){
this.mytext += text;
return this;
},
show: function(){
return this.mytext;
}
}
}
console.log(chainingExample("hello").append(" there").append(" again").show());
/* results in: "hello there again" */当使用这种方式时，this指向返回的对象。它看起来会像：
{ mytext: 'hello there again',
append: [Function],
show: [Function] }当然，您可以对此进行扩展，但关键的思想是，您返回的对象需要包含要调用的函数。this和原型是JS中比较令人困惑的部分之一。一个非常方便的，简短的文本是：‘你不知道JS:这&对象原型’的凯尔辛普森。
https://stackoverflow.com/questions/28462751
复制相似问题
腾讯云开发者
