34

What' s “this”

在面向对象的JS中,我们了解到在JS中,一切都是对象。因为一切都是对象,我们开始明白我们可以为函数设置和访问其他属性。而this提供了一种更优雅的方式隐式“传递”一个对象的引用。
关于this,我们常见的误区:

  • 认为this指向函数本身
function f1() {
    console.log(this)
}
f1() // window 
  • 认为this指向函数作用域

关于这两个误区,其实在官方文档中有很明确的说明。

函数的调用方式决定了this的值。

那么this并不是指向函数本身,也不是指向函数的作用域,而是在运行时进行绑定的,并不是在编写时绑定,它的上下文也取决于函数调用时的各种条件。this的绑定和函数声明的位置没有任何关系,只取决于函数的调用方式。

它指向什么完全取决于函数在哪里被调用,也就是说,谁调用,谁负责

而bind()、apply()、call()则是可以更改this指向的方法

(这部分并不是翻译的原文,因为原文关于this讲的不是很细致,而我觉得理解了this,才能了解bind()、apply()、call()有什么用处。所以这块是我根据《你不知道的JavaScript 上卷》this的部分,粗略的介绍了部分,有兴趣的话可以看看那本书,关于this讲的很细致。)

call(), apply() and bind()

到目前为止,我们已将函数视为由名称(可选,也可以是匿名函数)组成的对象及其在调用时执行的代码。但这不是全部真相,实际上函数看起来更接近下面的图像:

clipboard.png

现在,我将通过示例介绍每个函数中出现的这3种类似方法。

bind()

官方文档说: bind()方法创建一个新函数,当调用时,将其关键字设置为提供的值。

这非常强大。它让我们在调用函数时明确定义它的值。我们来看看cooooode:

var pokemon = {
    firstname: 'Pika',
    lastname: 'Chu ',
    getPokeName: function() {
        var fullname = this.firstname + ' ' + this.lastname;
        return fullname;
    }
};

var pokemonName = function() {
    console.log(this.getPokeName() + 'I choose you!');
};

var logPokemon = pokemonName.bind(pokemon); // creates new object and binds pokemon. 'this' of pokemon === pokemon now

logPokemon(); // 'Pika Chu I choose you!'

让我们分解吧。当我们使用bind()方法时:

  1. JS引擎正在创建一个新的pokemonName实例,并将pokemon绑定为此变量。重要的是要理解它复制了pokemonName函数。
  2. 在创建了pokemonName函数的副本之后,它可以调用logPokemon(),尽管它最初不在pokemon对象上。它现在将识别其属性(Pika和Chu)及其方法。

很酷的是,在我们bind()一个值后,我们可以像使用任何其他正常函数一样使用该函数。我们甚至可以更新函数来接受参数,并像这样传递它们:

var pokemon = {
    firstname: 'Pika',
    lastname: 'Chu ',
    getPokeName: function() {
        var fullname = this.firstname + ' ' + this.lastname;
        return fullname;
    }
};

var pokemonName = function(snack, hobby) {
    console.log(this.getPokeName() + 'I choose you!');
    console.log(this.getPokeName() + ' loves ' + snack + ' and ' + hobby);
};

var logPokemon = pokemonName.bind(pokemon); // creates new object and binds pokemon. 'this' of pokemon === pokemon now

logPokemon('sushi', 'algorithms'); // Pika Chu  loves sushi and algorithms

call(), apply()

call()的官方文档说 call()方法调用具有给定此值的函数和单独提供的参数。

这意味着,我们可以调用任何函数,并在调用函数中明确指定what_ this _should reference_。真的类似于bind()方法!这绝对可以让我们免于编写hacky代码。

bind()和call()之间的主要区别在于call()方法:

  • 1、接受其他参数
  • 2、执行它立即调用的函数。
  • 3、call()方法不会复制正在调用它的函数。

call()和apply()用于完全相同的目的。它们之间的唯一区别是_ call()期望所有参数都单独传递,而apply()需要一个数组。例:

var pokemon = {
    firstname: 'Pika',
    lastname: 'Chu ',
    getPokeName: function() {
        var fullname = this.firstname + ' ' + this.lastname;
        return fullname;
    }
};

var pokemonName = function(snack, hobby) {
    console.log(this.getPokeName() + ' loves ' + snack + ' and ' + hobby);
};

pokemonName.call(pokemon,'sushi', 'algorithms'); // Pika Chu  loves sushi and algorithms
pokemonName.apply(pokemon,['sushi', 'algorithms']); // Pika Chu  loves sushi and algorithms

这些内置的方法存在于每个JS函数中都非常有用。即使你最终没有在日常编程中使用它们,你仍然会在阅读其他人的代码时经常遇到它们。


_小生_
2.6k 声望1.1k 粉丝

人一般不会因为做过什么而后悔,