[js学习] this 、$(this)

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

const object = {   message: 'Hello, World!',   logMessage() {     console.log(this.message); // What is logged?   } }; setTimeout(object.logMessage, 1000);

答案：1秒后，打印 undefined。

尽管setTimeout()函数使用object.logMessage作为回调，但仍将object.logMessage用作常规函数，而不是方法。

在常规函数调用期间，this等于全局对象，即浏览器环境中的 window。

这就是为什么logMessage方法中的 this.message等于 window.message,即undefined。

（2）作为对象方法调用，this 指代上级对象

const object = {   message: 'Hello, World!',   getMessage() {     const message = 'Hello, Earth!';     return this.message;   } }; console.log(object.getMessage());

console 打印出的是：'Hello, World!'

object.getmessage()是一个方法调用，此时的 this 表示 object。

虽然方法还有一个变量声明const message="hello,earth!",但这个变量不会影响this.message的值

（3）作为构造函数调用，this 指代new 的对象

 ​​​​​​​

function Pet(name) {   this.name = name;   this.getName = () => this.name;      //返回this.name=name; } const cat = new Pet('Fluffy'); console.log(cat.getName());  //返回 name 的值‘Fluffy’ const { getName } = cat; console.log(getName());

分别为'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 ​​​​​​​