1.两者区别
$() = jquery(),即$(this)返回的是一个jQuery对象,能够调用jquery的方法,如click等
this 一般是全局变量,他指向的是函数执行的上下文对象。
比如:现在执行一个函数,该函数的功能为遍历某对象input,且找到该对象的属性。如下:
<div id="mubiao"> <input type="checkbox" checked="" id="minCmax" disabled > <input type="checkbox" id="minCost" > <input type="checkbox" id="other" > </div>
//寻找mubiao div下复选框为选中状态的input,并遍历查找后的结果 var object=[] $("#mubiao").find(':checked').each(function() { object.push($(this).attr("id"))//添加被选中的input id console.log('this:',this) console.log('$(this):',$(this)) });
分别打印出this和$(this),结果为:
这里的this 就是执行函数的对象input,表示当前的上下文对象是一个html DOM
对象,可以调用html
对象所拥有的属性、方法;而$(this)是套了jQuery方法 的对象,可以调用jquery
的方法和属性值。
2.this的多种用法:
(1)在一般函数方法中使用 this 指代全局对象window
|
答案:1秒后,打印 undefined
。
尽管setTimeout()
函数使用object.logMessage
作为回调,但仍将object.logMessage
用作常规函数,而不是方法。
在常规函数调用期间,this
等于全局对象,即浏览器环境中的 window。
这就是为什么logMessage
方法中的 this.message
等于 window.message
,即undefined。
(2)作为对象方法调用,this 指代上级对象
|
console 打印出的是:'Hello, World!'
object.getmessage()
是一个方法调用,此时的 this
表示 object
。
虽然方法还有一个变量声明const message="hello,earth!",但这个变量不会影响this.message
的值
(3)作为构造函数调用,this 指代new 的对象
|
分别为'Fluffy'
和 'Fluffy'
当函数作为构造函数new Pet('Fluffy')
调用时,构造函数内部的this
等于构造的对象
Pet
构造函数中的this.name = name
表达式在构造的对象上创建name
属性。
this.getName = () => this.name
在构造的对象上创建方法getName
。而且由于使用了箭头函数,箭头函数内部的this
值等于外部作用域的this
值, 即 Pet
。
调用cat.getName()
以及getName()
会返回表达式this.name
,其计算结果为'Fluffy'
。
即作为构造并调用的函数,this随着被调用,指向了cat