gpt4 book ai didi

jquery - 为什么 jQuery 插件中是 this 而不是 $(this)

转载 作者:行者123 更新时间:2023-12-01 00:18:03 26 4
gpt4 key购买 nike

The docs告诉我们:

Let's say we want to create a plugin that makes text within a set of retrieved elements green. All we have to do is add a function called greenify to $.fn and it will be available just like any other jQuery object method.

$.fn.greenify = function() {
this.css( "color", "green" );
};


$( "a" ).greenify(); // Makes all the links green.

Notice that to use .css(), another method, we use this, not $( this ). This is because our greenify function is a part of the same object as .css().

我不明白最后一段。该函数向 this 传递什么?为什么不使用 $(this) 来引用 jQuery 对象?我们在 jQuery 中不是使用 $(el).css() 来正常设置 CSS 吗?那为什么不在插件中呢?

最佳答案

让我们尝试更深入地了解一下:

让我们尝试生成一个非常简化的版本库,例如 jQuery,并将其命名为 microM

(function(global) {
//function analog jQuery
var microM = function(context) {
return new microM.fn.init(context);
}

//init prototype
microM.fn = microM.prototype = {
version: '0.0.0.1',
constructor: microM
};

//function for initialize context
var init = microM.fn.init = function(context) {
if (context instanceof microM) context = microM.extend([], context.context);

this['context'] = [].concat(context);
return this;
};

init.prototype = microM.fn;

//add function extend to prototype and as static method
microM.extend = microM.fn.extend = function() {
if (arguments.length == 2) {
var target = arguments[0],
source = arguments[1];
} else {
var target = this,
source = arguments[0];
}
for (var key in source) {
target[key] = source[key];
}

return target;
}

//extend microM prototype with a few simple function
microM.fn.extend({
min: function() {
return Math.min.apply(Math, this.context);
},
max: function() {
return Math.max.apply(Math, this.context);
},
pow: function(exponent) {
for (var i = 0, len = this.context.length; i < len; i++) {
this.context[i] = Math.pow(this.context[i], exponent);
}
return this;
},
get: function() {
return microM.extend([], this.context);
},
map: function(callback) {//a function that takes a callback
var result = [];
for (var i = 0, len = this.context.length; i < len; i++) {
var callbackResult = callback.call(this.context[i], this.context[i], i);
if (callbackResult instanceof microM) result = result.concat(callbackResult.get());
else result = result.concat(callbackResult);
}
return microM(result);
}
});

//looks a like jQuery :-)
global.microM = microM;
})(window);

所以我们有一个最简单的库,看起来像 jQuery。现在我们要向其添加“插件”,例如函数 square

就像在 jQuery 中一样,我们将其添加到原型(prototype)中,或者 fn 与我们案例中的原型(prototype)相同:

microM.fn.square = function() {
return this.pow(2);
}

这里我们可以直接从 this 调用 pow,因为在这种情况下 this 是我们 microM 的实例,并且microM.prototype 中的所有功能均可直接使用;

但是当我们调用在回调中接受回调的 map 函数时,this 将是具体元素,例如 Number 原语,因为我们这样调用它

callback.call(this.context[i], this.context[i], i);

第一个参数在 call function 中- 是thisArg

下面的代码片段可能可以澄清我困惑的解释:-)

(function(global) {
var microM = function(context) {
return new microM.fn.init(context);
}

microM.fn = microM.prototype = {
version: '0.0.0.1',
constructor: microM
};

var init = microM.fn.init = function(context) {
if (context instanceof microM) context = microM.extend([], context.context);

this['context'] = [].concat(context);
return this;
};

init.prototype = microM.fn;

microM.extend = microM.fn.extend = function() {
if (arguments.length == 2) {
var target = arguments[0],
source = arguments[1];
} else {
var target = this,
source = arguments[0];
}
for (var key in source) {
target[key] = source[key];
}

return target;
}

microM.fn.extend({
min: function() {
return Math.min.apply(Math, this.context);
},
max: function() {
return Math.max.apply(Math, this.context);
},
pow: function(exponent) {
for (var i = 0, len = this.context.length; i < len; i++) {
this.context[i] = Math.pow(this.context[i], exponent);
}
return this;
},
get: function() {
return microM.extend([], this.context);
},
map: function(callback) {
var result = [];
for (var i = 0, len = this.context.length; i < len; i++) {
var callbackResult = callback.call(this.context[i], this.context[i], i);
if (callbackResult instanceof microM) result = result.concat(callbackResult.get());
else result = result.concat(callbackResult);
}
return microM(result);
}
});

global.microM = microM;
})(window);


microM.fn.printTo = function(id, descr) {
document.getElementById(id).innerHTML += (descr ? descr + ": " : "") + JSON.stringify(this.get()) + '<br/>';
return this;
}

microM.fn.square = function() {
return this.pow(2);
}

var t = microM([2, 3, 4]).printTo('res', 'initial');
t.square().printTo('res', 'square')
.map(function(el) {
return microM(this + 10).square();
}).printTo('res', 'mapped')
.map(function(el) {
return this instanceof Number;
}).printTo('res', 'inside map: this instanceof Number');
<div id="res"></div>

关于jquery - 为什么 jQuery 插件中是 this 而不是 $(this),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30478602/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com