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

3）方法中的this

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

例如，

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

3、对象属性

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

例如，

var obj={
siteName:"cjavapy",
showMessage:function(){
console.log(this);
console.log(this.siteName)
}
};
obj.showMessage;//执行结果 ｛siteName:"cjavapy",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 方法传进去的第一个参数。

例如，

//call
var 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｝ 2
fn2.apply(a,[1,1]);//执行结果｛value:0,value:1｝ 2
fn2.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;
}