详解js和jquery里的this关键字

《javaScript言语精炼》这本书中,把 this 涌现的场景分为四类,简朴的说就是:

有对象就指向挪用对象
没挪用对象就指向全局对象
用new构作育指向新对象
经由过程 apply 或 call 或 bind 来转变 this 的所指。

函数挪用形式中,thiswindow;要领挪用形式中,this为要领所属的对象;组织器挪用形式中,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是被隐式设置为全局对象的属性。出于这个缘由,该函数返回windowfullname,所以在这里 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(),然后建立两个对象oCar1oCar2,一个对象属性被设置为”red“,另一个为blue;两个对象都被给予了属性showColor,指向原始的showColor()函数,挪用每一个showColor的要领,oCar1输出redoCar2输出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 
}

apply 和 call 挪用以及 bind 绑定

applycall 挪用以及 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
   }) 
});

在很多情况下JQuerythis都指向HTML元素节点。

结论:
this,示意当前的高低文对象是一个html DOM对象,能够挪用html对象所具有的属性,要领。
$(this),代表的高低文对象是一个jquery的高低文对象,能够挪用jquery的要领和属性值。

    原文作者:trigkit4
    原文地址: https://segmentfault.com/a/1190000000660679
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞