js的this指向问题和Vue的指向问题详细解析
Vue的this的指向和js的this的指向的问题 - 幕布Vue的this的指向和js的this的指向的问题js函数的this指向1.1:js中的this指向记住一个原则:一般情况下(箭头函数除外)this是在执行时才能确认,定义时没有办法确认。下面这段代码会是输出什么呢?输出结果:lisi lilizhangsan由上我们可以看出this是在定义的时候才能确认,当然这是...
·
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是继承来至上下文的。
- 如果是不用箭头函数,setInterval和setTimeout都是属于window对象上的方法,那么this就是指向window了,我们把上面的代码改改,在来举个例子?。
- 1.1:js中的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函数设置定时器
- 箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象, 定义它的时候,可能环境是window; 箭头函数可以方便地让我们在 setTimeout ,setInterval中方便的使用this
- 1.1在Vue所有的生命周期钩子方法(如created,mounted, updated以及destroyed)里使用this,this指向调用它的Vue实例,即(new Vue)。
- 重点
- 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模块域中导出对象域
- 模块域中非导出对象域
- 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问题
- 1.1没有声明作用域
更多推荐
已为社区贡献1条内容
所有评论(0)