摘要:因为关键字没有处于一个声明的对象内部,默认指向全局对象。这一点可能对于大部分初学者来说有点难以理解。函数会返回一个函数,并且将绑定好。自从年双十一正式上线,累计处理了亿错误事件,得到了金山软件百姓网等众多知名用户的认可。
译者按: JavaScript的this和Java等面向对象语言中的this大不一样,bind()、call()和apply()函数更是将this的灵活度进一步延伸。
原文: JavaScript: The Keyword ‘This’ for Beginners
译者: Fundebug
为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。
如果对JavaScript的关键字this理解不够深刻,有时候会掉入意想不到的坑。在这里我们总结了5条通用规则来帮助你判断this到底指向什么。虽然没有囊括所有的情况,但日常大部分情况都可以使用这些规则来正确推断。
this的值通常是由所在函数的执行环境决定,也就是说要看函数是如何被调用的;
同一个函数每一次调用,this都可能指向不同的对象;
全局对象 (Global Object)打开Chrome浏览器开发者面板(Windows: Ctrl + Shift + J)(Mac: Cmd + Option + J),并且输入:
console.log(this);
看看输出了什么?
// Window {}
window对象! 因为在全局作用域下,this指向全局对象。在浏览器中全局对象就是window对象。
为了让你更加清楚理解为什么this会指向window对象,我们来看另外一个例子:
var myName = "Brandon";
我们可以通过在控制台输入myName来访问其值:
myName // 输出 "Brandon"
其实,所有在全局定义的变量都绑定到window对象。我们来做如下测试:
window.myName // 输出 "Brandon" window.myName === myName // 输出 true
现在我们将this放到函数内部,看看有何效果。
function test(){ return this; } test();
你会发现this依然指向全局的window对象。因为this关键字没有处于一个声明的对象内部,默认指向全局window对象。这一点可能对于大部分初学者来说有点难以理解。当读完这篇文章,你就会豁然开朗。
注意:如果在strcit模式下,上面的例子中this为undefined。
当this关键字在一个声明对象内部使用,其值会被绑定到调用该this的函数的最近的父对象。我们用例子来说明这个问题:
var person = { first: "John", last: "Smith", full: function() { console.log(this.first + " " + this.last); } }; person.full(); // 输出 "John Smith"
在被声明的对象person中的full函数里面使用了this, 那么调用this的full函数的最近的父对象就是person, 因此,this指向person。
为了更好的描述this实际上是指向person对象的,你可以拷贝如下代码到浏览器控制台,将this打印出来。
var person = { first: "John", last: "Smith", full: function() { console.log(this); } }; person.full(); // 输出 Object {first: "John", last: "Smith", full: function}
我们接下来看一个更复杂的例子:
var person = { first: "John", last: "Smith", full: function() { console.log(this.first + " " + this.last); }, personTwo: { first: "Allison", last: "Jones", full: function() { console.log(this.first + " " + this.last); } } };
在这里我们有嵌套的对象,在这个时候,this分别指向谁呢? 我们将其打印出来看一看:
person.full(); // 输出 "John Smith" person.personTwo.full(); // 输出 "Allison Jones"
你会发现满足我们前面所描述的规则:其值会被绑定到调用this的函数的最近的父对象。
new关键字当使用new关键字构建一个新的对象,this会绑定到这个新对象。我们来看一个例子:
function Car(make, model) { this.make = make; this.model = model; };
根据第一条规则,你可能会推断this指向全局对象。但是如果我们使用new关键字来声明一个新的变量,Car函数中的this将会绑定一个新的空对象,然后初始化this.make和this.model的值。
var myCar = new Car("Ford", "Escape"); console.log(myCar); // 输出 Car {make: "Ford", model: "Escape"}call, bind, 和apply
我们可以显示的在call(),bind(),apply()中设置this的绑定对象。这三个函数很类似,但是我们需要注意它们微小的区别。
我们来看一个例子:
function add(c, d) { console.log(this.a + this.b + c + d); } add(3,4); // 输出 NaN
add函数输出NaN, 因为this.a和this.b未定义。
现在我们引入对象,并且使用call()和apply()来调用:
function add(c, d) { console.log(this.a + this.b + c + d); } var ten = {a: 1, b: 2}; add.call(ten, 3, 4); // 输出 10 add.apply(ten, [3,4]); // 输出 10
当我们使用add.call(),第一个参数是this需要绑定的对象,剩下的是add函数本来的参数。
因此,this.a指向ten.a,this.b指向ten.b。add.apply()也类似,除了第二个参数是一个数组,用于存储add函数的参数。
bind()函数和call()类似,但是bind()函数不会立即被调用。bind()函数会返回一个函数,并且将this绑定好。接下来我们来用例子来帮助理解bind()函数的应用场景:
var small = { a: 1, go: function(b,c,d){ console.log(this.a+b+c+d); } } var large = { a: 100 }
执行:
small.go(2, 3, 4); // 输出 10
如果我们想使用large.a的值,而不是small.a呢? 我们可以使用call/apply:
small.go.call(large, 2, 3, 4); // 输出 109
但是,如果我们现在还不知道这三个参数应该传入什么值,应该怎么办呢? 我们可以使用bind:
var bindTest = small.go.bind(large, 2);
如果我们将bindTest在控制台下打印出来,我们会看到:
console.log(bindTest); // 输出 function (b,c,d){console.log(this.a+b+c+d);}
注意:该函数已经将this绑定到large对象,并且传入了第一个参数b。所以,我们接下来是需要传入余下的参数即可:
bindTest(3, 4); // 输出 109箭头函数(=>)
因为需要很大的篇幅,我们会专门写一篇博客来介绍。
结论当你读完这篇博客,你应该可以理解大多数情况下this指向的对象。
接下来我们来总结一下:
this的值通常是由当前函数的执行环境所决定;
在全局作用域,this指向全局对象 (window对象);
当使用new关键字声明,this指向新建对象;
我们可以使用call(), bind(), apply()来设置this;
箭头函数不会绑定this。
关于FundebugFundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了9亿+错误事件,得到了Google、360、金山软件、百姓网等众多知名用户的认可。欢迎免费试用!
版权声明转载时请注明作者Fundebug以及本文地址:
https://blog.fundebug.com/2017/05/17/javascript-this-for-beginners/
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/83179.html
摘要:译者按箭头函数看上去只是语法的变动,其实也影响了的作用域。打开浏览器开发者控制台,输入我们将变量绑定到一个箭头函数,该函数有一个参数返回。或者说箭头函数不会改变本来的绑定。最后,结束刷屏的打印总结箭头函数写代码拥有更加简洁的语法不会绑定。 译者按: 箭头函数看上去只是语法的变动,其实也影响了this的作用域。 原文: JavaScript: Arrow Functions for B...
摘要:然而,不会在年的基础上加,而只是表示年。闭包这是一个经典的面试题虽然期望输出,然而实际上却不会。因为第行的没有在正确的环境下执行。 译者按: 漫漫编程路,总有一些坑让你泪流满面。 原文: Who said javascript was easy ? 译者: Fundebug 为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。 这里我们针对JavaScri...
摘要:数组的方法方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。可选,执行函数时的值。删除所有的键值对,没有返回值。返回一个布尔值,表示某个键是否在当前对象之中。 说明 JavaScript数组去重这个问题,经常出现在面试题中,以前也写过一篇数组去重的文章,(JavaScript 数组去重的多种方法原理详解)但感觉代码还是有点不够简单,今天和大家再说两种方法,代码...
摘要:数组的方法方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。可选,执行函数时的值。删除所有的键值对,没有返回值。返回一个布尔值,表示某个键是否在当前对象之中。 说明 JavaScript数组去重这个问题,经常出现在面试题中,以前也写过一篇数组去重的文章,(JavaScript 数组去重的多种方法原理详解)但感觉代码还是有点不够简单,今天和大家再说两种方法,代码...
阅读 3486·2023-04-25 17:35
阅读 2567·2021-11-24 09:39
阅读 2511·2021-10-18 13:32
阅读 3393·2021-10-11 10:58
阅读 1615·2021-09-26 09:55
阅读 6097·2021-09-22 15:47
阅读 920·2021-08-26 14:15
阅读 3445·2019-08-30 15:55