详解js和jquery里的this关键字

`js`中的this

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

先来看个例子：

<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，所以返回的是第一个fullname

说明

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

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

var iCar = new Object();

iCar.color = "red";

iCar.showColor = function(){

     alert(this.color);//输出"red"

};

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

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

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。

引用对象属性时，必须使用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

}

jquery中的this

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

 $(function () {

   $('button').click(function () {

       alert(this);//this 表示原生的DOM

       //$(this)表示当前对象，这里指的是button

   })

});

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