文档章节

JavaScript初学者必看“this”

Fundebug
 Fundebug
发布于 2017/05/17 16:42
字数 1648
阅读 24
收藏 0

译者按: JavaScript的this和Java等面向对象语言中的this大不一样,bind()call()apply()函数更是将this的灵活度进一步延伸。

原文: JavaScript: The Keyword ‘This’ for Beginners

译者: Fundebug

为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

如果对JavaScript的关键字this理解不够深刻,有时候会掉入意想不到的坑。在这里我们总结了5条通用规则来帮助你判断this到底指向什么。虽然没有囊括所有的情况,但日常大部分情况都可以使用这些规则来正确推断。

  1. this的值通常是由所在函数的执行环境决定,也就是说要看函数是如何被调用的;
  2. 同一个函数每一次调用,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模式下,上面的例子中thisundefined

声明的对象 (Declared Object)

this关键字在一个声明对象内部使用,其值会被绑定到调用该this的函数的最近的父对象。我们用例子来说明这个问题:

var person = {
  first: 'John',
  last: 'Smith',  
  full: function() {
    console.log(this.first + ' ' + this.last);
  }
};
person.full();
// 输出 'John Smith'

在被声明的对象person中的full函数里面使用了this, 那么调用thisfull函数的最近的父对象就是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.makethis.model的值。

var myCar = new Car('Ford', 'Escape');
console.log(myCar);
// 输出 Car {make: "Ford", model: "Escape"}

call, bind, 和apply

我们可以显示的在call()bind()apply()中设置this的绑定对象。这三个函数很类似,但是我们需要注意它们微小的区别。

<!-- `call`可以接收任意个数的参数,其中第一个必须是一个`this`对象,其余依次是所有的参数。 -->

我们来看一个例子:

function add(c, d) {
  console.log(this.a + this.b + c + d);
}
add(3,4);
// 输出 NaN

add函数输出NaN, 因为this.athis.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.badd.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指向的对象。 接下来我们来总结一下:

  1. this的值通常是由当前函数的执行环境所决定;
  2. 在全局作用域,this指向全局对象 (window对象);
  3. 当使用new关键字声明,this指向新建对象;
  4. 我们可以使用call(), bind(), apply()来设置this
  5. 箭头函数不会绑定this

欢迎加入我们Fundebug全栈BUG监控交流群: 622902485

输入图片说明

版权声明:

转载时请注明作者Fundebug以及本文地址:

https://blog.fundebug.com/2017/05/17/javascript-this-for-beginners/

© 著作权归作者所有

Fundebug
粉丝 12
博文 305
码字总数 313608
作品 0
厦门
私信 提问
好程序员分享JavaScript中8个常见的陷阱

好程序员分享JavaScript中8个常见的陷阱,这里我们针对JavaScript初学者给出一些技巧和列出一些陷阱。如果你已经是一个砖家,也可以读一读。 1. 你是否尝试过对数组元素进行排序? JavaScri...

好程序员IT
04/10
9
0
JavaScript中8个常见的陷阱

译者按: 漫漫编程路,总有一些坑让你泪流满面。 原文: Who said javascript was easy ? 译者: Fundebug 为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习...

Fundebug
2017/06/28
26
0
好程序员web前端分享js技巧和js中一些常见的陷阱

好程序员web前端分享js技巧和js中一些常见的陷阱。 1. 你是否尝试过对数组元素进行排序? JavaScript默认使用字典序(alphanumeric)来排序。因此,[1,2,5,10].sort()的结果是[1, 10, 2, 5]。 ...

好程序员IT
04/12
12
0
如果想成为一名顶尖的前端,这份书单你一定要收藏!

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯IVWEB团队 发表于云+社区专栏 作者:link 2014年一月以来,自己接触web前端开发已经两年多了,记录一下自己前端学习路...

腾讯云加社区
2018/09/17
0
0
asp.net的Ajax学习进阶

asp.net的Ajax学习进阶 作者:清清月儿 主页:http://blog.csdn.net/21aspnet/ 时间:2007.6.3 1.什么是Ajax? 2006年忽如一夜春风来,众多涉及到Web开发的站点都在谈Ajax,那么到底什么是Aja...

晨曦之光
2012/03/09
160
0

没有更多内容

加载失败,请刷新页面

加载更多

Kafka再平衡机制详解

所谓的再平衡,指的是在kafka consumer所订阅的topic发生变化时发生的一种分区重分配机制。一般有三种情况会触发再平衡: consumer group中的新增或删除某个consumer,导致其所消费的分区需要...

爱宝贝丶
17分钟前
11
0
element 验证 请输入大于0的整数

data() { var validatePass = (rule, value, callback) => { // if (value <= 0) { // callback(new Error('请输入大于0的整数')); // } else { // c......

沉迷代码我爱学习
28分钟前
4
0
报表工具花钱or开源?我对比了这6个工具

近一年都在处理报表问题,调研了不少报表工具,也开发了适合公司业务的报表应用。分享一些关于如何选择报表工具的个人观点,希望对你有参考作用。 对于大部分企业来说,能花时间和人力去开发...

帆软
28分钟前
3
0
自建redis笔记--Redis cluster搭建

Redis cluster搭建 2018年十月 Redis 发布了稳定版本的 5.0 版本,推出了各种新特性,其中一点是放弃 Ruby的集群方式,改为 使用 C语言编写的 redis-cli的方式,是集群的构建方式复杂度大大降...

北极之北
29分钟前
3
0
分享一个在caffe中实现的yolo层

这是别人实现的,是我移植到cc的cpu实现,可以实现caffe中使用yolo3,但是我感觉实际效果不如darknet 好点 template <typename Dtype>inline Dtype sigmoid(Dtype x){return 1. / (1. ...

开飞色
31分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部