明确概念： js里的函数都是全局函数，属于window里的，对象里的“函数”只能叫方法

this
一、以函数形式调用的时候，this永远都是window。 test(): window
二、以方法的形式调用，this是调用方法的对象。 p.test(): p
三、以构造函数调用时，this是新创建的哪个对象。 new test(): 新创建的对象
—————————————————————————————————————————————————————————-
1. 以函数的形式调用时，这个函数其实是window的方法，this指向window
2. 以方法的形式调用时，this就是调用方法的对象 （**this的隐式绑定）**
3. 以构造函数的形式调用时，this就是新创建的对象
4. 使用call和apply调用时，this就是指定的那个对象
5. 在全局作用域中this代表window
—————————————————————————————————————————————————————————-

如何确定this的值?

  • test(): window
  • p.test(): p
  • new test(): 新创建的对象
  • p.call(obj): obj （强制让一个函数让obj调用）

直接函数调用就是将：函数名()看作是window的一个方法去执行的

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         .click {
  8.             color: #ff6900;
  9.         }
  10.     </style>
  11. </head>
  13. <body>
  14. <button id="btn">按钮</button>
  15. </body>
  16. <script>
  19.     //在学全局作用域中this的指向之前，你需要了解window对象，因为全局作用的this指向的是window对象
  21.     // window对象
  23.     //console.log(window)
  24.     //全局作用域 window，它是一个对象， 也叫做全局对象，window对象给我们提供了很多方法和对象，也就是js语言内置的方法和对象都是定义在了window对象上
  25.     //比如：
  26.     //我们常见的window自身的属性有 innerWidth-内宽,innerHeight-内高,outerWidth-外宽,outerHeight-外高
  27.     //我们常用的方法有alert() setTimeout() setInterval() confirm()
  28.     //我们常用的对象有 console,JSON，Math，Object，location,
  29.     //我们常用的构造函数有：Object(),String(),Number(),Array(),Date(),formData()
  30.     //我们常用的事件有：onclick, onmouseover, onmouseleave, onmousedown, onmouseup, onkeydown, onkeyup, onchange, oninput, ondrag, onresize
  32.     //我们调用window对象上的方法的时候可以不加window，也可加上
  33.     //window.console.log(window.innerWidth)
  34.     //window.alert('sdsfsdf')
  36.     var a = 'H5-14期'//window对象上会添加一个属性a
  37.     var b = {//window对象上会添加一个对象b
  38.         Class: "14期"
  39.     }
  40.     var c = [1, 2, 3, 4, 5, 6]//window对象上会添加一个数组
  41.     //console.log(window.a)
  42.     //console.log(window.b)
  43.     //console.log(window.c)
  45.     function test() {//window对象上会添加一个test()方法
  46.         console.log('test')
  47.     }
  48.     //window.test()
  50.     function Haha() {//window对象上会添加一个构造函数Haha()
  51.         this.name = 'haha'
  52.     }
  54.     //在全局作用域内，我们实例化对象的时候可以在构造函数前加window
  55.     var obj = new window.Object({
  56.         name: "aaaaaaa"
  57.     })
  58.     //console.log(window.obj.name)
  62.     //我们也可以这样添加一个全局变量，也就是给window对象添加一个属性
  63.     //但是通常我们不这样做，因为别人看我们的项目的时候不易理解，所以我们要用var声明一个变量
  64.     this.hwthwthwt = 'hwthwthwthwt'
  66.     //我们声明的全局变量、常量、全局函数、构造函数实际上是给window对象添加属性,
  67.     //所以在我们使用变量、调用函数、实例化对象的时候实际上是window在调用它们，
  68.     //通常我们会省略window，使用变量、调用函数的时候不用window打点调用，因为我们所有代码都是在window对象里面，
  69.     //window就相当于一个容器，我们就站在window里面，我们不可能在window对象外面调用它的属性
  71.     //但是在我们使用我们自定义的对象的时候是在它外面调用它的属性的，所以要用对象名打点调用它的属性
  72.     //比如：
  73.     var d = {
  74.         text: "你好"
  75.     }
  76.     //console.log(d.text)
  81.     //下面我总结了js中this的指向，在不改变this指向的情况下，this的指向分为了四种情况，分别是：
  83.     //1，在全局作用域内this的指向
  85.     var aa = 'hello'
  86.     //console.log(window.aa)
  87.     //console.log(this.aa)
  88.     //在全局作用内，这里的this指向的是window，所以我们可以用this调用全局变量
  89.     //但是通常在全局作用域内我们不用this和window调用全局变量和全局函数
  91.     function add() {
  92.         console.log(this)
  93.     }
  94.     //this.add()
  95.     //window.add()
  96.     //因为全局作用域的函数是被window调用的，所以在全局作用域的函数里的this指向的是window
  97.     //同样我们也可以用this调用全局作用域的函数，但是通常不会这样做
  99.     window.setTimeout(function() {
  100.         //console.log(this)
  101.     }, 2000)
  102.     //setTimeout()也是被window调用的，而且setTimeout()中的第一个参数function(){}也是window调用的，
  103.     //所以function里面的this也是指向window
  104.     //setInterval()中的this也是指向window
  106.     function hwt() {
  107.         console.log(this)
  109.         function hwt1() {
  110.             console.log(this)
  111.         }
  112.         return hwt1
  113.     }
  114.     //var hwt1 = hwt()
  115.     //hwt1()
  117.     //我们可以写成这样
  118.     //var hwt1 = window.hwt()
  119.     //window.hwt1()
  121.     //hwt()是被window调用的，所以它里面的this指向window
  122.     //hwt1()也是被window调用的，所以它里面的this也是指向window
  123.     //总结：只要是被window调用的函数，函数中的this都是指向window
  129.     //2，在事件监听函数内this的指向
  131.     var btn = document.querySelector('#btn')
  133.     btn.onclick = function(event) {
  134.         console.log(event.target)
  135.         console.log(btn)
  136.         //事件对象event中的target属性是一个对象，就是触发该事件的目标元素，在这里event.target就是btn
  137.         //event.target对象上有一个onclick()方法，btn触发onclick事件的时候，event.target就会调用onclick()
  138.         //所以onclick()方法中的this指的是event.target,也就是btn
  139.     }
  140.     //btn.onclick = function(){} 这段代码是给btn添加一个onclick()方法,btn触发onclick事件的时候就会执行该方法
  141.     //在事件监听函数里的this指的是触发该事件的元素
  143.     btn.onmouseover = function() {
  144.         //console.log(this)
  145.         //这个函数是被btn调用的，所以在这里，this指的是btn
  147.         window.setTimeout(function() {
  148.             //console.log(this)
  149.             //这个函数是被window调用的，所以这里的this指的是window
  150.             this.className = 'setTimeout'
  151.         }, 1000)
  152.     }
  158.     //3, 对象中函数里的this
  160.     var obj = {
  161.         func: function() {
  162.             console.log(this)
  163.             //func()是被对象obj调用的，所以func()中的this指的是对象obj
  164.         },
  165.         obj1: {
  166.             func1: function() {
  167.                 console.log(this)
  168.                 //func1()是被对象obj1调用的，所以func1()中的this指的是对象obj1
  169.             }
  170.         }
  171.     }
  172.     obj.func()
  173.     obj.obj1.func1()
  175.     //如果一个对象里的属性是个函数，这个函数中的this指的就是这个对象
  181.     //4, 构造函数里的this
  183.     function Man() {
  184.         this.isMale = true
  185.         this.getThis = function() {
  186.             console.log(this)
  187.         }
  188.     }
  190.     var man = new Man()//用构造函数Man()实例化一个对象man,对象man也就拥有了getThis()方法
  191.     man.getThis()
  192.     //因为getThis()方法是被man对象调用的，所以getThis()中的this是指向对象man的。
  196.     function Class() {
  197.         this.className = '14期'
  198.         this.getClassName = function() {
  199.             console.log(this.className)
  200.             //在className()方法中this指向的是构造函数Class()的实例对象，
  201.             //所以输出的this.className的值是： '14期'
  203.             window.setTimeout(function(){
  204.                 console.log(this.className)
  205.                 //在setTimeout()中，this指的是window对象，因为window对象上没有className这个属性
  206.                 //所以输出的是：undefined
  207.             },3000)
  208.         }
  209.     }
  211.     var cls = new Class()
  212.     cls.getClassName()
  216.     //总结：在不改变this指向的情况下，方法中的this指的是调用该方法的对象
  218.     //用call(),apply(),bind()可以改变this的指向，所以js中this的指向是不确定的，要看情况而定
  219.     //关于改变this的指向我会再给大家总结一下
  222. </script>
  224. </html>

转自：https://www.cnblogs.com/zc290987034/p/6182961.html

image.png

  1. Dom对象中的this，指向谁？

指向这个Dom对象。因为所触发的事件，就是dom对象中的方法，用dom对象来调用的，所以指向dom对象。

  1. 构造函数中的this，指向谁？ 6. new关键字做了什么？

构造函数中的this指向新创建的对象。new会创建对象，将构造函数中的this指向新创建的对象。 为什么构造函数中写方法总是this.fun = …; 而普通函数不用？因为构造函数需要将定义的方法给未来new的对象用，所以需要用this. 。

  1. 箭头函数中的this，指向谁？

以下三个说法都对：
箭头函数中没有this。
普通函数谁调用指向谁，箭头函数在哪里定义指向谁。
箭头函数外指向谁，箭头函数就指向谁。