js中的this原理

JavaScript011

js中的this原理,第1张

this 指的是 函数运行时 所在的环境。(不是定义时所在的环境)

怎么理解这句话呢?看如下例子:

在这个例子中,首先第一个输出,因为wFunction是运行在全局环境中,所以 this 指向全局环境,所以输出1;第二个输出,因为wFunction运行在wObj环境中,所以 this 指向wObj,而wObj的w属性值为2,所以输出2;

那么问题来了,为什么第二个说是在wObj环境中运行呢,运行环境是怎么来判别的呢?这得从内存的数据结构说起。

首先,是考虑到内存的数据结构,才设计这个this的。那内存的数据结构是怎样的呢,先看个例子:

这里,javaScript引擎会在内存里先生成一个对象{w:5},然后把这个对象的内存地址(reference)赋值给wObj变量。

如果通过wObj.w来读取这个对象的属性w,则引擎会先从wObj这个变量拿到对象的内存地址,然后从该地址读出这个对象,返回w属性。

在看下面一个例子:

这里,javaScript引擎会先将函数function(){...} 单独保存在内存中 。然后javaScript引擎会在内存里生成一个对象{wFunc:wFunction},而wFunction则是函数的内存地址(reference)。然后把这个对象的内存地址赋值给wObj变量。

如果通过wObj.wFunc()执行函数,则引擎会先从wObj这个变量拿到对象的内存地址,然后从该地址读出这个对象,返回wFunc属性,而wFunc属性的值是函数function(){...}的内存地址(reference),因为这个 是单独的一个值,所以可以在不同环境(上下文)执行 。在这里函数是通过wObj找到的(wObj的属性wFunc),所以在wObj环境中执行的。

这里解释了为啥函数是可以在不同的环境中执行。那么问题来了,这动态的执行环境,怎么获取呢?

针对获取执行环境问题, this 就这么设计出来了,它的设计目的就是在函数体内部,指代函数 当前的运行环境

回到文章开头例子,并加以深化如下:

第一个输出,函数执行时,是通过全局变量wFunction找到函数引用地址的,它的执行环境则是全局,因此输出全局w,为1;

第二个输出,函数执行时,是通过wObj指向的对象里的wFunction属性找到的函数引用地址的,因此,它的执行环境则是wObj指向的对象,因此输出对象的w,为2;

第三个输出,函数执行时,是通过全局变量wObjFunc找到函数引用地址的,(因为let wObjFunc = wObj.wFunction这直接把函数的引用地址直接赋给了全局变量wObjFunc,所以wObjFunc直接指向函数本身)它的执行环境则是全局,因此输出全局w,为1;

代表当前对象啊,js不是有document.getElementByID通过ID获取对象么,this就是获取当前对象,比如id为btn的按钮的onclick方法

onclick="method(this)",这个this就是当前按钮对象,作用和document.getElementByID("btn")一样。

面向对象编程中,我们经常要和this打交道。而对于函数中this到底指向哪里,对刚开始接触JavaScript的我们,经常会分不清楚。

我们必须明确的是函数中this的指向 不是固定 的,和函数执行时的环境有关,简单的说,我们可以理解函数中this指向的是 当前调用该函数的对象 ,所以我们也针对以下几种情况来消化下这种说话。

1、作为函数调用时

简单的例子如下:

在浏览器时执行该代码时,打印出来的都是window对象。

因为作为函数调用时,默认是被认为在全局对象中调用该函数(nodejs环境中是global对象) 注:不是在当前函数所处的作用域对象

有一点需要注意的是, 箭头函数 (我们等等再特殊讲下)

2、作为对象方法调用时

简单的例子如下

代码执行时,答应出来的是obj对象,name值是obj,这是满足我们的预期:函数目前就是作为obj的方法被调用,所以调用该函数的对象是obj。

这种情况我们很容易消化,但是换了一种情况就另当别论,如

这个时候打印出来的window对象,name值是test[what][what]

原来这个时候fn指向的是一个函数 (不是指向 obj执行logThis 这个行为) ,fn调用就是调用一个函数,也就是第一种情况,所以上面的例子就如下:

3、作为构造函数执行

简单的例子如下

这个时候打印出来的是我们新生成的people对象。

因为构造函数执行的过程我们可以简单理解为

1、新生成一个对象(people)

2、该对象原型对象指向构造函数的prototype对象(People.prototype)

3、通过新生成的对象调用构造函数(可以简单理解为People.call(this))

4、作为箭头函数调用

简单例子如下

这个时候打印的我们可能因为都是window对象,然而结果打脸了,第一个打印的是window对象,第二个打印的是obj对象[发怒]

原来箭头函数, 不会生成新的this指向 ,箭头函数在哪个环境执行,指向的就是当前环境的this对象,也就是第二种情况下,this指向的obj.logThis()执行时的this指向(前面我们提到的是obj对象)

5、apply,call,bind调用

this的指针默认指向就是上面提到的4种,但是总有需求,我们想要自定义this指向,这个时候apply,call,bind这3个方法就排的上用场

这三个方法都是函数对象自身的方法,第一个参数支持传入的是函数调用时设置的this对象,如

这个时候第一个打印的是window对象(看1说明),第二个打印的是obj对象(我们通过传参的方法明确说明函数执行是的this对象是obj)

而这三个方法,不同如下

上述总结希望对大家有用[作揖]