摘要:在面向对象的中,我们了解到在中,一切都是对象。到目前为止,我们已将函数视为由名称可选,也可以是匿名函数组成的对象及其在调用时执行的代码。这意味着,我们可以调用任何函数,并在调用函数中明确指定。和用于完全相同的目的。
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()到目前为止,我们已将函数视为由名称(可选,也可以是匿名函数)组成的对象及其在调用时执行的代码。但这不是全部真相,实际上函数看起来更接近下面的图像:
现在,我将通过示例介绍每个函数中出现的这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()方法时:
JS引擎正在创建一个新的pokemonName实例,并将pokemon绑定为此变量。重要的是要理解它复制了pokemonName函数。
在创建了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 algorithmscall(), 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函数中都非常有用。即使你最终没有在日常编程中使用它们,你仍然会在阅读其他人的代码时经常遇到它们。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/53462.html
摘要:理解文章中已经比较全面的分析了在中的指向问题,用一句话来总结就是的指向一定是在执行时决定的,指向被调用函数的对象。与和直接执行原函数不同的是,返回的是一个新函数。这个新函数包裹了原函数,并且绑定了的指向为传入的。 理解 JavaScript this 文章中已经比较全面的分析了 this 在 JavaScript 中的指向问题,用一句话来总结就是:this 的指向一定是在执行时决定的,...
摘要:它们有明确的和成员函数的定义,只有的实例才能调用这个的成员函数。用和调用函数里用和来指定函数调用的,即指针的指向。同样,对于一个后的函数使用或者,也无法改变它的执行,原理和上面是一样的。 函数里的this指针 要理解call,apply和bind,那得先知道JavaScript里的this指针。JavaScript里任何函数的执行都有一个上下文(context),也就是JavaScri...
摘要:输出的作用与和一样,都是可以改变函数运行时上下文,区别是和在调用函数之后会立即执行,而方法调用并改变函数运行时上下文后,返回一个新的函数,供我们需要时再调用。 前言 js中的call(), apply()和bind()是Function.prototype下的方法,都是用于改变函数运行时上下文,最终的返回值是你调用的方法的返回值,若该方法没有返回值,则返回undefined。这几个方法...
摘要:不能应用下的等方法。首先我们可以通过给目标函数指定作用域来简单实现方法保存,即调用方法的目标函数考虑到函数柯里化的情况,我们可以构建一个更加健壮的这次的方法可以绑定对象,也支持在绑定的时候传参。原因是,在中,多次是无效的。 bind 是返回对应函数,便于稍后调用;apply 、call 则是立即调用 。 apply、call 在 javascript 中,call 和 apply 都是...
摘要:首先我们可以通过给目标函数指定作用域来简单实现方法保存,即调用方法的目标函数考虑到函数柯里化的情况,我们可以构建一个更加健壮的这次的方法可以绑定对象,也支持在绑定的时候传参。原因是,在中,多次是无效的。而则会立即执行函数。 bind 是返回对应函数,便于稍后调用;apply 、call 则是立即调用 。 apply、call 在 javascript 中,call 和 apply 都是...
摘要:如果连续呢结果会是什么结果还是第一个原因是,在中,多次是无效的。更深层次的原因,的实现,相当于使用函数在内部包了一个,第二次相当于再包住第一次故第二次以后的是无法生效的。 this 1.其实js中的this没那么难理解,当找不到this时记住一句话:谁调我,我就指谁!new 谁指谁 function text1(){ console.log(this); //指wind...
阅读 1614·2021-09-22 10:02
阅读 1885·2021-09-02 15:40
阅读 2809·2019-08-30 15:55
阅读 2191·2019-08-30 15:44
阅读 3561·2019-08-30 13:18
阅读 3190·2019-08-30 11:00
阅读 1902·2019-08-29 16:57
阅读 491·2019-08-29 16:41