详解js和jquery里的this关键字

时间 2019-12-20

原文原文链接

在《javaScript语言精粹》这本书中，把 this 出现的场景分为四类，简单的说就是：javascript

有对象就指向调用对象
没调用对象就指向全局对象
用new构造就指向新对象
经过 apply 或 call 或 bind 来改变 this 的所指。

函数调用模式中，this为window；方法调用模式中，this为方法所属的对象；构造器调用模式中，this为建立的新对象。html

`js`中的this

咱们要记住：this永远指向函数运行时所在的对象！而不是函数被建立时所在的对象。
this对象是在运行时基于函数的执行环境绑定的，在全局环境中，this等于windowjava

先来看个例子：jquery

<script>
   var fullname = "Trigkit4";
   var person = {
       fullname : 'Jack',
   prop:{
       fullname : 'Blizzard',
       getFullname : function () {
           return this.fullname;
       }
   }
};

console.log(person.prop.getFullname());//Blizzard
var test = person.prop.getFullname;
console.log(test());//Trigkit4
</script>

当getFullname被分配到test变量时，上下文指的是全局对象（window）。这是由于test是被隐式设置为全局对象的属性。出于这个缘由，该函数返回window的fullname，因此在这里 this 指的是window，因此返回的是第一个fullnameapp

说明

this 关键字一般在对象的构造函数中使用，用来引用对象。函数

关键字this：老是指向调用该方法的对象，如：ui

var iCar = new Object();
iCar.color = "red";
iCar.showColor = function(){
     alert(this.color);//输出"red"
};

关键字this用在对象的showColor()方法中，在此环境，this等于iCarthis

使用this是由于在实例化对象时，老是不能肯定开发者会使用什么样的变量名。使用this，便可在任意多个地方重用同一个函数。考虑下面的例子：code

function showColor(){
     alert(this.color);
}
var oCar1 = new Object;
oCar1.color = "red";
oCar1.showColor = showColor;

var oCar2 = new Object;
oCar2.color = "blue";
oCar2.showcolor = showcolor;

oCar1.showColor();//输出"red"
oCar2.showColor();//输出"blue"

这段代码中，首先用this定义函数showColor()，而后建立两个对象oCar1和oCar2，一个对象属性被设置为"red",另外一个为blue；两个对象都被赋予了属性showColor，指向原始的showColor()函数，调用每一个showColor的方法，oCar1输出red，oCar2输出blue。htm

引用对象属性时，必须使用this关键字。

全部基于全局做用域的变量其实都是window对象的属性（property）。这意味着即便是在全局上下文中，this变量也能指向一个对象。

对于 JScript 的客户版本，若是在其余全部对象的上下文以外使用 this，则它指的是 window 对象。
例如：

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <script type="text/javascript"> 
        alert(this);//弹出 object window；
    </script>
</head>
<body>
    
</body>

做为构造函数调用

所谓构造函数，就是经过这个函数生成一个新对象（object）。这时，this就指这个新对象。

<script type="text/javascript"> 
        function test(){
            this.x = 10;
        }
        
        var obj = new test();
        alert(obj.x); //弹出 10；
 </script>

全局环境中的this

在看下面一个this出如今全局环境中的例子：

<script type="text/javascript"> 
    var name = "全局";
    function getName(){
        var name = "局部";
        return this.name;
    };
    alert(getName());//弹出 全局； 
</script>

函数getName()所处的对象是window对象，所以this也必定在window对象中。此时的this指向window对象，因此getName()返回的this.name实际上是window.name，所以alert出全局。

结论：不管this身处何处，必定要找到函数运行时（或者说在何处被调用了）的位置。

经过不一样的调用语法，改变相同函数内部this的值：

<script type="text/javascript">
    var foo = {
        test:function(){
            alert(this);
        }
    }
    foo.test();//object,由于test方法在调用时属于foo对象
    
    var baz = foo.test;
    baz();//window,由于baz()被调用时属于global对象
</script>

局部环境中的this

看下面一个this出如今局部环境中的例子

<script type="text/javascript"> 
    var name = "全局";

    var jubu={
    name:"局部",
    getName:function(){
         return this.name;
     }
    };
    alert(jubu.getName());
</script>

其中this身处的函数getName不是在全局环境中，而是处在jubu环境中。不管this身处何处，必定要找到函数运行时的位置。此时函数getName运行时的位置：

alert(jubu.getName());

显然，函数getName所在的对象是jubu，所以this的安身之处定然在jubu，即指向jubu对象，则getName返回的this.name实际上是jubu.name，所以alert出来的是“局部”！

做用域链中的this

<script type="text/javascript">
function scoping () {
  console.log(this);

  return function () {
    console.log(this);
  };
}

scoping()();
>>window
>> window
</script>

由于scoping函数属于window对象，天然做用域链中的函数也属于window对象。

对象中的this

能够在对象的任何方法中使用this来访问该对象的属性。这与用new获得的实例是不同的。

var obj = {
    foo: "test",
    bar: function () {
        console.log(this.foo);
    }
};

obj.bar(); // "test"

重写this

没法重写this，由于它是一个关键字。

function test () {
    var this = {};  // Uncaught SyntaxError: Unexpected token this 
}

apply 和 call 调用以及 bind 绑定

apply 和 call 调用以及 bind 绑定都是指向绑定的对象，

<script type="text/javascript">
    var bar = {
        value: 'huang',
        ages: 10
    };
    function foo(){
        console.log(this);
    }
    console.log(foo());//window,函数没有所属对象：指向全局对象
    console.log(foo.apply(bar));//即bar.foo()，this指向了bar,因此能读取该对象的全部属性
    console.log(foo.call(bar));//ages: 10  value: "huang" __proto__: Object

    var newFoo = foo.bind(bar);
    console.log(newFoo());//Object
</script>

jquery中的this

$()生成的是什么呢？实际上$()=jquery()，那么也就是说返回的是一个jquery的对象。
$(this)是jquery对象，能调用jquery的方法，例如click(), keyup()。

$(function () {
   $('button').click(function () {
       alert(this);//this 表示原生的DOM
       //$(this)表示当前对象，这里指的是button
   }) 
});

在许多状况下JQuery的this都指向HTML元素节点。

结论：
this，表示当前的上下文对象是一个html DOM对象，能够调用html对象所拥有的属性，方法。
$(this),表明的上下文对象是一个jquery的上下文对象，能够调用jquery的方法和属性值。