JavaScript this在函数中的指向及实例详解

当前位置主页 > 网站技术 > 代码类 >

最大化缩小

JavaScript this在函数中的指向及实例详解

栏目：代码类时间：2019-11-08 21:01

一、this，其实可以类比成人

说到this的话，我们在js中主要研究的都是函数中的this，在javascript中，this代表当前行为的执行主体，而context代表的是当前行为执行的的环境（区域）。

例如男神在北理珠吃饭，这句话分别代表的含义如下

男神 -->> 主体（this）

吃饭 -->> 函数（function）

北理珠 -->> 环境（context）

-->>说明：吃饭是函数，男神是函数的主体，北理珠就是当前行为的执行环境（context），主体跟上下文没有必然的联系，主体只与函数有关系；就好像男神吃饭，其实哪里都可以吃饭，吃饭这个动作的主体永远都是男神，环境是可以变化的。

-->>结论：上面，其实也可以说明，this指的是谁，和函数在哪里定义和执行是没有任何关系的。

二、在函数中，如何区分this

1、函数执行，首先看函数名前面是否有“.” ，有的话， “.”前面是谁，this就是谁；没有的话this就是window

//例子一
console.log(this);
function eat() {
  console.log(this); //this->window
}
~function() {
  eat(); //this->window
}();
 
//例子二
function fn() {
  console.log(this); 
}
var obj = {fn: fn};
fn(); //this->window
obj.fn() //this->obj
 
//例子三
function sum() {
  fn(); 
}
sum(); //this->window
 
//例子四
var oo = {
  sum: function() {
    console.log(this);
    fn();
  }
}
oo.sum(); //首先sum函数里面，第一个输出this为oo；之后执行fn()，this为window

2、立即执行函数中的this永远都是window

(function() {
  console.log(this); // this->window
})()

3、给元素的某一事件绑定方法，当事件触发的时候，执行对应的方法，方法中的this是当前元素

function fn() {
  console.log(this);
}
//例子一
document.getElementById("div1").onclick = fn; //this -> dom元素
//例子二
document.getElementById("div1").onclick = function() {
  console.log(this); // this->#div
  fn(); // this->window
}

结论：找到函数在哪里执行的，有点，this就是点前面东西；没点，this就是window

三、使用this分析一道面试题

var num = 20;
var obj = {
  num: 30,
  fn: (function(num) {
    this.num *= 3;
    num += 15;
    var num = 45;
    return function() {
      this.num *= 4;
      num + =20;
      console.log(num);
    }
  })(num)
};
var fn = obj.fn;
fn(); // ->65
obj.fn(); // ->85
console.log(window.num, obj.num) // ->240, 120

上面代码使用堆栈图来描述，如下，首先正方形代表栈内存（函数执行环境，context），圆边方形代表堆内存（用来存放字符串）。