JavaScript(JS) this关键字

1、this 关键字的作用

1）在方法中，this 表示该方法所属的对象。

2）如果单独使用，this 表示全局对象。

3）在函数中，this 表示全局对象。

4）在函数中，在严格模式下，this 是未定义的(undefined)。

5）在事件中，this 表示接收事件的元素。

6）类似 call() 和 apply() 方法可以将 this 引用到任何对象。

2、函数和方法中的this

1）普通函数中的this都引用window对象

例如，

//function关键字声明的普通函数function  fn1(){console.log(this);};fn1();//执行结果：window{...}//函数表达式形式的普通函数var  fn2=function(){console.log(this);}fn2();//执行结果：window{...};

2）构造函数中this

构造函数中的this指向的是它实例化的对象。

例如，

//写一个构造函数function site()｛this.siteName='wonhero';this.siteUrl='https://www.wonhero.com';｝;var mysite=new site();//js在执行到此条语句时，将this的引用指向了mysiteconsole.log(mysite.siteName),//执行结果 wonhero//需要注意的是 如果直接执行构造函数，而不是new 一下，那么this还是指向windowfunction site()｛this.siteName='wonhero';this.siteUrl='https://www.wonhero.com';console.log(this)｝;site();//执行结果 window{...}

3）方法中的this

在对象方法中， this 指向调用它所在方法的对象。

例如，

var site = {  siteName: "wonhero",  siteUrl : "https://www.wonhero.com",  siteId    : 1314,  siteInfo : function() {    return this.siteName + " " + this.siteUrl;  }};//this所属的对象是site

3、对象属性

作为对象属性值的函数，其内部this指向的就是这个对象。

例如，

var obj={siteName:"wonhero",showMessage:function(){console.log(this);console.log(this.siteName)}};obj.showMessage;//执行结果 ｛siteName:"wonhero",showMessage:fn｝ 1//需要注意的是，如果函数不是作为对象属性的属性值被调用，而是作为属性值赋值给其他变量，则此函数中的this不再指向该对象var obj={showMessage:function(){console.log(this)}}var z=obj.showMessage;//作为属性值赋值z();//执行结果 window｛...｝

4、apply&call方法

函数调用call()、apply()方法后，this的引用为call apply 方法传进去的第一个参数。

例如，

//callvar a={age:0,value:1};//定义一个对象function fn1(){console.log(this)};fn1.call(a)//执行结果：｛age:0,value:1｝//call apply 的功能一样，唯一不同的是传给函数的参数的方式（就是第二个参数开始，第一个参数是this指向的新对象）//apply 传数组，这个数组包含函数所需要的参数，call 直接传参数var a={age:0,value:1};//定义一个对象，用来做call和apply的第一个参数function fn2(arg1,arg2){console.log(this)console.log(arg1+arg2)};fn2.call(a,1,1)//执行结果｛age:0,value:1｝ 2fn2.apply(a,[1,1]);//执行结果｛value:0,value:1｝ 2fn2.apply(a,1,1)//报错//还有一个bind方法.bind方法和call使用方式一样,作用也一样，不一样的是实现方式，call传参结束后直接执行函数（apply也是），而bind只是更改this值和给函数传参，函数并不执行,所以bind可以作为事件的处理函数去使用//比如给div绑定一个click事件div.onclick=fn.call(obj,arg1,arg2)//还没等div点击fn就已经被执行div.onclick=fn.bind(obj,arg1,arg2)//这样当div被点击时才会有效

5、函数中使用 this（严格模式）

严格模式下函数是没有绑定到 this 上，此时 this 是 undefined。

例如，

"use strict";function myFunction() {  return this;}

6、this的其它使用情况

在函数中，函数的所属者默认绑定到 this 上。

单独使用 this，则它指向全局(Global)对象。

在浏览器中，window 就是该全局对象为 [object Window]:

var x = this;console.log(x);function myFunction() {  console.log(this);  return this;}