js的this指向问题和Vue的指向问题详细解析

Vue的this的指向和js的this的指向的问题

• js函数的this指向
  • 1.1:js中的this指向记住一个原则：一般情况下（箭头函数除外）this是在执行时才能确认，定义时没有办法确认。下面这段代码会是输出什么呢？
    
    • 输出结果:lisi lili zhangsan
    • 由上我们可以看出this是在定义的时候才能确认，当然这是在一般情况下
  • 1.2普通函数中
    
    • 输出结果:window
    • console.log:方法用于在控制台输出信息。它可以接受一个或多个参数，将它们连接起来输出。
    • 我们可以理解成在全局作用域中执行的函数，window.fn也是返回的fn函数
  • 1.3在定义的对象中
    
    • 这个答案其实上面也已经给出了，此时的this指向被调用的对象obj,因此答案是lisi
  • 1.4在call和apply中
    
    • call和apply作用是一样的，只是用法稍微不同，这里用call来举例子,call和apply强制性的改变了this的指向，传入的参数是谁，那么this就指向谁。
    • 输出结果是:xiaoxia
  • 1.5在箭头函数中，this是指向定义时函数外部的对象。
    
    • 如果是不用箭头函数，setInterval和setTimeout都是属于window对象上的方法，那么this就是指向window了，我们把上面的代码改改，在来举个例子?。
      
      • 我们开头说在一般情况下，this是在执行时定义的，在箭头函数中，this是继承来至上下文的。
• Vue中的this的指向
  • 1.1在Vue所有的生命周期钩子方法（如created，mounted， updated以及destroyed）里使用this，this指向调用它的Vue实例，即（new Vue）。 
    
    • 这里的this指向的是:new Vue这个对象。new Vue也可以写成var C=new Vue({}).所以这里的this指向的是C。
  • 1.2箭头函数中的this
    • 箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象, 定义它的时候,可能环境是window; 箭头函数可以方便地让我们在 setTimeout ,setInterval中方便的使用this
      
      • 这里的箭头函数的this:指向的是:箭头函数指向window。
      • setTimeout问题:setTimeout函数设置定时器
• 重点
  • 1.1模块域中导出对象域
    
    • A.function定义函数
  • 1.2模块导出对象的各关键字的属性值如data的值
    
    • 此处的this都是Vue的实例
  • 1.3模块导出对象的属性的子属性
    
    • 此处的this都是return的对象
  • 1.4函数中定义函数
    
    • 此处的this为undefined；由于匿名函数不属于定义对象所有，又在编译的模块中，造成window对象被屏蔽，故为undefined
  • 1.5.lamda表达式
    
    • (1)、(2)、(4)、(6)经webpack编译，将this转换为_this(此名有冲突会变化)，而_this正为webpack模块的导出对象__webpack_exports__
    • (3)经Vue转换，该函数属于Vue实例的函数，故this指向Vue的实例
    • (5)中function定义没有改变this，this指向other的对象
    • lamda表达式函数作用域的this都是其父级的this
• 模块域中非导出对象域
  
  • 1.1没有声明作用域
    
    • I、(3)处插入let c=b();，结果调用的this全是undefined
    • II、(3)处插入let c=window.b();，结果window.b为undefined
  • 1.2有声明作用域
    
    • I、(3)处插入let c=b();，调用结果的this全是undefined
    • II、(3)处插入let c=window.b();，调用结果的this，第一个为window，其他的是undefined
  • Vue非编译的模块
    
  • Vue的$.this问题