详细解读-this-关键字在全局函数对象jQuery中的基础用法！

Posted 2020-10-08

 

一、前言

1、 javascript是一门基于对象的动态语言，也就是说，所有东西都是对象，一个很典型的例子就是函数也被视为普通的对象。Javascript可以通过一定的设计模式来实现面向对象的编程，其中this “指针”就是实现面向对象的一个很重要的特性。但是this也是Javascript中一个非常容易理解错，进而用错的特性。

2、this是Javascript语言的一个关键字。 它代表函数运行时，自动生成的一个内部对象。

二、进入正题

1、全局代码中的——this

　　1、 浏览器宿主的全局环境中，this指的是window对象。在全局代码中，this始终是全局对象本身，这样就有可能间接的引用到它了。

　　示例:

<script type="text/javascript">
        console.log(this); //window
        console.log(this == window);//true
</script>

 

　　2、 浏览器中在全局环境下，使用var声明变量将会把值赋给this或window。

　　示例：

<script type="text/javascript">
        var  name = "Jack" ;
        console.log(this.name);//Jack
        console.log(window.name);//Jack
</script>

　　3、任何情况下，即使创建变量时没有使用var，也是在操作全局this。而在函数里面创建变量时，结果为undefined。

　　示例：

<script type="text/javascript">
    name = "Jack";
    function testThis() {
         age = 20;
         console.log(this.age); // 20
    }
    console.log(this.age); // undefined 
    console.log(this.name);// Jack
    testThis();
    console.log(this.name);// Jack
</script>

二、函数代码中的——this

1、先来看一个最简单的例子

<script type="text/javascript">
    var name = "Jack";
    function sayHi(){
      console.log("你好，我的名字叫" + name);// "你好，我的名字叫Jack"
      console.log("你好，我的名字叫" + this.name);// "你好，我的名字叫Jack"
    }
    sayHi();
</script>

首先，我们定义了一个全局字符串对象name和函数对象sayHi。运行都会打印出，“你好，我的名字叫Jack”。全局变量name将值赋给this。

2、我们把上面的代码改一改：

<script type="text/javascript">
    name = "Jack";
    function testThis() {
      this.name = "Alice";
    }
    console.log("你好，我的名字叫"+this.name); //  "你好，我的名字叫Jack"
    testThis();
    console.log("你好，我的名字叫"+this.name); //  "你好，我的名字叫Alice"
</script>

运行结果为Jack中的this为函数调用之前的全局变量name=Jack将值赋给this，此时textThis函数未将Alice赋值给this；运行结果为Alice为函数调用之后testThis函数将Alice值赋值给了全局变量name，此时name = "Alice"   this.name = "Alice"。

3、函数也是普通的对象，可以将其当作一个普通变量使用。我们再把上面的代码改一改：

<script type="text/javascript">
    var name = "Jack";
    function sayHi(){
       console.log("你好，我的名字叫" + this.name);// undefined
    }
    var person = {};
    person.sayHello = sayHi;
    person.sayHello();
</script>

//而定义  person = {name：Alice}  ，则：
<script type="text/javascript">
    var name = "Jack";
    function sayHi(){
       console.log("你好，我的名字叫" + this.name);// "你好，我的名字叫Alice"
    }
    var person = {name:Alice};
    person.sayHello = sayHi;
    person.sayHello();
</script>

第一，我们定义了一个全局函数对象sayHi并执行了这个函数，函数内部使用了this关键字，那么执行this这行代码的对象是sayHi（一切皆对象的体现），sayHi是被定义在全局作用域中。其实在Javascript中所谓的全局对象，无非是定义在window这个根对象下的一个属性而已。因此，sayHi的所有者是window对象。也就是说，在全局作用域下，你可以通过直接使用name去引用这个对象，你也可以通过window.name去引用同一个对象。因而this.name就可以翻译为window.name。

第二，我们定义了一个person的对象，并定义了它的sayHello属性，使其指向sayHi全局对象。那么这个时候，当我们运行person.sayHello的时候，this所在的代码所属对象就是sayHello了（其实准确来说，sayHi和sayHello是只不过类似两个指针，指向的对象实际上是同一个），而sayHello对象的所有者就是person了。第一次，person里面没有name属性，因此弹出的对话框就是this.name引用的就是undefined对象（Javascript中所有只声明而没有定义的变量全都指向undefined对象）；而第二次我们在定义person的时候加了name属性了，那么this.name指向的自然就是我们定义的字符串了。

参考上面解释，我们将上面示例改造成面向对象式的代码：

<script type="text/javascript">
    var name = "Jack";
    function sayHi(){
       console.log("你好，我的名字叫" + this.name);//两次函数调用均成功，打印两次："你好，我的名字叫Marry"     "你好，我的名字叫Alice"
    }
    function Person(name){
        this.name = name;
    }
    Person.prototype.sayHello = sayHi;
    var marry = new Person("Marry");   
    marry.sayHello();
    var alice = new Person("Alice");
    alice.sayHello();
</script>

在上面这段代码中，我们定义了一个Person的“类”（实际上还是一个对象），然后在这个类的原型（类原型相当于C++中的静态成员变量的概念）中定义了sayHello属性，使其指向全局的sayHi对象。运行代码我们可以看到，marry和kevin都成功打印出来。

4、当用调用函数时使用了new关键字，此刻this指代一个新的上下文，不再指向全局this。通常我将这个新的上下文称作实例。

<script type="text/javascript">
    name = "Jack";
    function testThis() {
      this.name = "Alice";
    }
    console.log(this.name); // "Jack"
    new testThis();
    console.log(this.name); // "Jack"
    console.log(new testThis().name); // "Alice"
</script>

 

三、对象代码中的——this

1、可以在对象的任何方法中使用this来访问该对象的属性。这与用new得到的实例是不一样的。

var obj = {
   name: "Jack",
    func: function () {
        console.log(this.name); //   "Jack"
    }
};

obj.func();

2、可以将函数绑定到对象，就好像这个对象是一个实例一样。

var obj = {
    name: "Jack"
};

function logName() {
    console.log(this.name); //logs "Jack"
}

logName.apply(obj);

3、也可以不通过this，直接访问对象的属性。

var obj = {
   name: "Jack",
    deeper: {
        logName: function () {
            console.log(obj.name);//    "Jack"
        }
    }
};

obj.deeper.logName(); 

四、jQuery代码中的——this

1、jQuery库中大多地方的this也是指代的DOM元素。页面上的事件回调和一些便利的静态方法比如$.each 都是这样的。

<div class="foo bar1"></div>
<div class="foo bar2"></div>
<script src="../05-JQuery/JS/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){

     　　$(".foo").each(function () {
            console.log(this); //  <div class="foo bar1"></div>   <div class="foo bar2"></div>
        });
        $(".foo").on("click", function () {
            console.log(this); //  <div class="foo bar1">   <div class="foo bar2"></div>
        });
          
   })

</script>

 

结束：

　　上面，就是博主自己在实践的过程中，总结的一点经验，希望对大家能否有所帮助，欢迎大家能够提出高贵意见，博主定当补充改正。