JS基础系列-聊聊this

JavaScript06

JS基础系列-聊聊this,第1张

面向对象编程中,我们经常要和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)

而这三个方法,不同如下

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

运行的结果不难想象应该为 undefined is ready for attaching undefine 。这是因为 button onclick 引用了 Warrior 的 attach 的方法。但是这里 button 中并没有 element 这个属性。所以 undefined。这也就是我们常说的 this 指向的问题。

我们通过 bind 的方法将我们方法绑定到指定的对象,这样我们的方法就有了 context 也就是上下文。这样就解决了问题,这样写法我们在 jquery 的事件绑定是最常见不过的了。

当然我们也可以也使用 es6 的箭头函数作为 ready 属性,这个箭头好处就是我无需再写 bind 来讲方法绑定到指定对象,箭头方法中 this 对象。

不通过这样做还是有性能问题的,

这种写法想必我们在写 react 时候会经常遇到这种写法。这样同样可以解决 this 的指向的问题。

每一次都会创建一个函数

我们对 createWarrior 进行改造。