Jquery插件内部this的指向

在jQuery插件的范围里, this关键字代表了这个插件将要执行的jQuery对象, 但是在其他包含callback的jQuery函数中,this关键字代表了原生的DOM元素。这常常会导致开发者误将this关键字无谓的包在jQuery中。可以看下面的例子:

<div class="content" style="background:#ff50000"></div>

<div class="box">hello world<div class=""inner></div></div>

html代码结构如上,然后写一个非常简单的插件,用于输出最高的div的高度值。

js代码是这样的:

(function ($) {

$.fn.maxheight = function(){

//在插件范围内,this指的是jquery插件将要执行的对象。并不是原生的dom元素,

//因此,直接用this即可,不需要用$(this).

var max = 0;

console.log(this);//此处this指的是要遍历的jquery对象集合

this.each(function(){

console.log(this);//此处this指的是dom元素,即要遍历的每一个dom元素。

//this->$(this) : DOM对象封装成Jquery对象

max = Math.max(max,$(this).height());//所以这里要使用$选取dom元素。

});

return max;

}

})(jQuery);

var maxheight = $("div").maxheight();

console.log(maxheight);

根据结果可以知道,第一个this指的是jquery对象,而在return this.each()中,this指的是div元素,所以必须使用$将this包裹起来,选取dom元素,再进行操作。

注:

1. 此处说的this与当前调用的作用域有关。在全局变量下,this指向windows变量;在局部变量下,this指向你所调用的当前对象。

关于$(this)和this, 你关键还是要知道this表示的是什么, 如果this是一个dom元素, 那么$(this)是一个jquery元素, 如果this是一个jquery元素, 那么$(this)还是一个jquery元素, 虽然你用==去判断两者是不同的, 但是他们内容都是一样的, 这是我的经验, 我并没有去深入看过源码, jquery的api中似乎也没有说这个.

关于this和$(this)还要注意一点$('.abc').click(function(){});中this是dom元素, $(this)是jquery元素, 而写插件的时候, 由于是扩展prototype, 所以this就是对象实例, 即this就是jquery对象, $(this)还是jquery对象, 他们虽然不是同一对象, 但是内容是完全相同的

转自http://www.cnblogs.com/wayofeng/p/5701878.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 12,382评论 2 17
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 5,214评论 0 2
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 8,842评论 0 44
  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    前端进阶之旅阅读 16,755评论 18 503
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 4,910评论 0 1