一篇文章详细讲解JavaScript中的this(普通函数、箭头函数、 函数运用)

console.log(this === window); // 在浏览器中输出 true

function regularfunction() {
  console.log(this);
}

regularfunction(); // 非严格模式下指向 window，严格模式下为 undefined

// 演示严格模式下的情况
(function () {
  "use strict";
  regularfunction();
})();

var person = {
  name: "john",
  sayname: function () {
    console.log(this.name);
  }
};

person.sayname(); // 输出 "john"，这里的 this 指向 person 对象

function person(name) {
  this.name = name;
  this.sayhello = function () {
    console.log("hello, i'm " + this.name);
  };
}

var john = new person("john");
john.sayhello(); // 输出 "hello, i'm john"，这里 this 指向 john 实例

<button id="mybutton">click me</button>

<script>
  var button = document.getelementbyid("mybutton");
  button.onclick = function () {
    console.log(this); // 点击按钮时，这里的 this 指向按钮元素
    				  //打印 ：<button id="mybutton">click me</button>
  };
</script>

// 普通函数
function outerfunction() {
  this.name = "outer";
  var innerfunction = function () {
    console.log(this.name);
  };
  innerfunction();
}

// 箭头函数
function outerfunctionwitharrow() {
  this.name = "outer with arrow";
  var innerfunction = () => {
    console.log(this.name);
  };
  innerfunction();
}

new outerfunction(); // 输出 undefined，因为 innerfunction 中的 this 指向全局对象，全局对象没有 name 属性
new outerfunctionwitharrow(); // 输出 "outer with arrow"，箭头函数的 this 继承自 outerfunctionwitharrow 的 this

var obj = { name: 'jack' }
function fn(a, b) {
  console.log(this)
  console.log(a)
  console.log(b)
}
fn(1, 2)
fn.call(obj, 1, 2)

var obj = { name: 'jack' }
function fn(a, b) {
  console.log(this)
  console.log(a)
  console.log(b)
}
fn(1, 2)
fn.apply(obj, [1, 2])

var obj = { name: 'jack' }
function fn(a, b) {
  console.log(this)
  console.log(a)
  console.log(b)
}
fn(1, 2)
var newfn = fn.bind(obj)
newfn(1, 2)

var myobject = {
  value: 10,
  callbackfunction: function () {
    console.log(this.value);
  }
};
[1,2,3].foreach(() => {
  myobject.callbackfunction()
});        //输出三个10

function outerfunction() {
  this.name = "outer";
  var array = [1, 2, 3];
  array.foreach(() => {
    console.log(this.name);  //打印三次outer
  });
}
new outerfunction();

//被一个全局函数调用
settimeout(function () {
  console.log(this); 
}, 1000);

//在全局作用域中独立调用
  function outer(){
    inner()
  }
  function inner(){
    console.log(this);
  }
  outer()

//回调函数中错误使用this
var person = {
  name: "eve",
  greetlater: function () {
    settimeout(function () {
      console.log(this.name); // 此处的function为普通函数，作为settimeout的参数this指向全局对象
    }, 1000);
  }
};

person.greetlater();

var person = {
  name: "eve",
  greetlater: function () {
    settimeout( ()=> {
      console.log(this.name); // 输出eve
    }, 1000);
  }
};

person.greetlater();

//在嵌套函数中混淆 this 指向
var outer = {
  name: "outer object",
  innerfunction: function () {
    var inner = {
      name: "inner object",
      nestedfunction: function () {
        console.log(this.name); // 这里 this 指向 inner，而不是 outer
      }
    };
    inner.nestedfunction();
  }
};

outer.innerfunction();

var outer = {
  name: "outer object",
  innerfunction: function () {
    var self = this;
    var inner = {
      name: "inner object",
      nestedfunction: function () {
        console.log(self.name); // 现在可以访问到 outer 的 name 属性，输出 "outer object"
      }
    };
    inner.nestedfunction();
  }
};

outer.innerfunction();

var outer = {
  name: "outer object",
  innerfunction: function () {
    var inner = {
      name: "inner object",
      nestedfunction: () => {
        console.log(this.name); // 输出 "outer object"
      }
    };
    inner.nestedfunction();
  }
};

outer.innerfunction();