| 普通函数、构造函数及箭头函数的this指向 | 您所在的位置：网站首页 › 构造函数this的指向 › 普通函数、构造函数及箭头函数的this指向 |
普通函数、构造函数及箭头函数的this指向
|
在JavaScript当中,有关this的指向一直都是初学者比较头疼的一个点,下面分享一些自己对这方面的理解,希望能够帮助到大家! 一、普通函数对于普通函数:由于没有对象的或者实例的调用,这就相当于在全局当中打印this,所以this都是指向js的顶级对象window.
在构造函数当中,我们只需要记住,this指向的是调用它的实例对象. 需要注意的一点,在严格模式下（设置了’use strict’），this就为undefined
在有很多地方会告诉我们构造函数当中的this指向的是上级对象,这只是一般的情况下,就比如上面的情形,this就指向了它的上级对象,但是这种说法是不严格的,因为我们是可以通过一定的方法去修改this的指向的,比如通过call、apply、bind这些就可以更改this的指向,让他指向其他的一些对象,如下图(这里以call方法举例):
箭头函数是ES6新增的一个重要的部分,我们在开发当中也会经常的用到. .箭头函数其实没有this,所以也不能用作构造函数.箭头函数里面的this和函数或者对象调用没有关联,它的指向默认是定义时所处上下的环境所决定的,逐级向上查找找到最近的函数作用域的this.它的this指向即是是通过call/apply/bind这些也不能够发生变化的.实例: var str = "window"; const obj = { str: "obj", fn1: () => { console.log(this.str); //这里的this指向window }, fn2: function () { console.log(this.str); //这里的this指向obj } } obj.fn1() //"window" obj.fn2() //"obj" console.log(this.str) //"window"看上面的代码,在一个对象obj当中,利用普通函数定义的方法fn2,它通过obj对象的调用,所以它就指向了obj,但是箭头函数并不是指向调用它时的对象,而是指向定义它时候的上下的环境所界定的,当我们未调用之前就创建了对象，并且是在全局作用域下创建的，而对象中的方法也是这时候创建的,所以它就指向了window. 注意点:上面这里有一个比较容易忽略的点,就是在第一行当中当中定义str的时候只能够用var方式定义才能使得fn1正确的返回结果,因为: var在全局定义的变量它都是属于window,let和const所定义的并不属于window,而是属于global,并且global不会暴露在全局当中,所以不能用global.变量名来访问,更不能用window来访问 |
上面的代码是创建一个基本的构造函数以及实例对象的过程,其中的属性和方法使用都必须通过实例对象person1的调用才能使用,所以其中的this就一定指向person1了.
上面通过对象的call方法,让Person当中的read方法指向了Student构造函数所创建的实例对象stu1,这样就更改了this的指向,使得stu1可以调用Person当中的方法,最终的到的name,age也都是实例对象stu1所定义的.【本文地址】