JS this指向全解析-优快云博客

this指向问题

普通函数中的this是谁?-----window
对象.方法中{per.sayHi();}的this是谁?----当前的实例对象
定时器方法中的this是谁?----window
构造函数中的this是谁?-----实例对象
原型对象方法中的this是谁?---实例对象

举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>Document</title>
</head>
<body>

</body>
</html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>

    /*
     *
     * 函数中的this的指向
     *
     *
     * 普通函数中的this是谁?-----window
     * 对象.方法中{per.sayHi();}的this是谁?----当前的实例对象
     * 定时器方法中的this是谁?----window
     * 构造函数中的this是谁?-----实例对象
     * 原型对象方法中的this是谁?---实例对象
     *
     * */
    //BOM:中顶级对象是window,浏览器中所有的东西都是window的

//    严格模式函数指向:
//            "use strict";//严格模式
    function f1() {
      console.log(this); //window
    }
    window.f1();
//

    //  严格模式函数指向:
    "use strict";//严格模式
    function f1() {
        console.log(this); //undefined
    }
    f1();
    //


//    普通函数
    function f1() {
      console.log(this); //window
    }
    f1(); //相当于 window.f1();

//    定时器中的this
    setInterval(function () {
      console.log(this);  //window
    },1000);


//    构造函数
    function Person() {
      console.log(this); //Person
      this.sayHi=function () {    // 对象的方法
        console.log(this);//Person
      };
    }


//    原型中的方法
    Person.prototype.eat=function () {
      console.log(this);//Person
    };
    var per=new Person();
    console.log(per); //Person
    per.sayHi();
    per.eat();


    //BOM:中顶级对象是window,浏览器中所有的东西都是window的
  </script>
</head>
<body>


</body>
</html>