正文

javascript初学者必看“this”

Fundebug博客  2022-02-10  114

关键词：

译者按: 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。

声明的对象 (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, 那么调用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。

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

版权声明:
转载时请注明作者Fundebug以及本文地址：
https://blog.fundebug.com/2017/05/17/javascript-this-for-beginners/

javascript初学者必看“new”

...介绍了new,更多的是介绍原型(prototype)，值得一读。原文:JavaScriptForBeginners:the‘new’operator译者:Fundebug为了保证可读性，本文采用意译而非直译。当你使用new的时候，会：创建一个新的空对象；将this绑定到该对象；添加一个名为__p... 查看详情

javascript学者必看“new”

当你使用new的时候，会：1.创建一个新的空对象； 2.将this绑定到该对象； 3.添加一个名为__proto__的新属性，并且指向构造函数的原型(prototype)； 4.返回该this对象。如果你没有特别理解，那么我们接下来用例子来详细解... 查看详情

javascript初学者必看“箭头函数”

...上去只是语法的变动，其实也影响了this的作用域。原文:JavaScript:ArrowFunctionsforBeginners译者:Fundebug为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。本文我们介绍箭头(arrow)函数的优点。... 查看详情

javascript必看十道面试题(代码片段)

1.this指向1.谁调用指向谁例：functionfoo()console.log("this",this);newfoo();2.全局指向window例： functionfoo() console.log("this",this); foo();3.构造函数的this指向构造函数实例4.call/apply/bind强制改变th 查看详情

javascript必看十道面试题(代码片段)

深入浅出javascript中的this

深入浅出JavaScript中的this在Java等面向对象的语言中，this关键字的含义是明确且具体的，即指代当前对象。一般在编译期确定下来，或称为编译期绑定。而在JavaScript中，this是动态绑定，或称为运行期绑定的，这就导致JavaScript中... 查看详情

汇编语言经典书目，初学者必看（转）

...多处寻得的关于学习汇编各个方面的书籍，由于可能对于初学者来说，从什么地方开始都是一个难题…（呵呵有点自大了呢）… （1）16位入门经典书籍王爽汇编语言经典中的经查看详情

嵌入式初学者学习嵌入式必看必看书籍

嵌入式初学者学习嵌入式必看必看书籍列表，有电子档的同学可以共享出来，谢谢Linux基础 1、《Linux与UnixShell编程指南》 2、《嵌入式Linux应用程序开发详解》 C语言基础 1.TheCprogramminglanguage... 查看详情

java初学者必看，idea小技巧汇总

idea小技巧汇总误删除的文件或者包查看一个类中的所有方法搜索jdk中的类选中代码，把他们包装起来查看一个方法的参数批量改名IDEA对选中的多行代码上下左右移动... 查看详情

kubernetes零基础快速入门！初学者必看！

　　起源　　Kubernetes源自于google内部的服务编排系统-borg，诞生于2014年。它汲取了google十五年生产环境的经验积累，并融合了社区优秀的idea和实践经验。　　名字　　Kubernetes这个名字，起源于古希腊，是舵手的意思，所以它的... 查看详情

java基础语法学习day01---初学者必看详解(代码片段)

java基础语法学习day01---初学者必看详解1.初识java1)什么是java1.1)计算机语言1.2)高级的1.3)编程2)编写第一个java程序2.1)创建java项目2.2)创建package包2.3)创建Class类2.4)编写程序并运行3)调整字体3.1)菜单栏选中3.2)左上角搜索font3.3)右侧展... 查看详情

初学者必看，springboot+mybatisplus+swagger快速开发套路和总结

快速开发套路和总结一、模块开发快速开发套路建module改pomyml主启动二、业务类开发业务类(手动)建表写sql实体类、dao、servicecontrolle... 查看详情

java基础语法学习day04(补充）---初学者必看详解(代码片段)

java基础语法学习day04补充---初学者必看详解1、分支结构1.1嵌套分支1.2switch-case语句1.2.1语法1.2.2break关键字1.2.3案例剖析1.2.3优势1、分支结构1.1嵌套分支if(判断条件1) 满足条件的代码1elseif(判断条件2) 满足条件的代码2elseif(判断条件... 查看详情

深入解析javascript中的this关键字

如果问初学者js中什么东西比较难懂，很多回答会是this关键字。this在不同场景下所指向的对象不同，这就有一种扑朔迷离的感觉，放佛魔法一般神秘：this到底是什么？这里有四种绑定规则。 1.默认绑定默认绑定是无法应用... 查看详情

java基础语法学习day05---初学者必看详解(代码片段)

java基础语法学习day05---初学者必看详解1、循环结构什么是循环1.1while循环while语句的执行逻辑while语句的流程图while语句用于处理循环逻辑使用break语句跳出循环练习：1.2do-while循环do-while语句的执行逻辑do-while语句的流程图do-wh... 查看详情

javascript学习--item21漂移的this

而在JavaScript中，this是动态绑定，或称为运行期绑定的，这就导致JavaScript中的this关键字有能力具备多重含义，带来灵活性的同时，也为初学者带来不少困惑。本文仅就这一问题展开讨论，阅罢本文，读... 查看详情

轻松几句搞定javascript中的this指向问题

this关键字在JavaScript中扮演了至关重要的角色，每次它的出现都伴随着它的指向问题，这也是很多初学者容易出错的地方。不过，这篇文章将会带你一次性搞定this指向的问题，望能给大家提供帮助！一、谁最终调用函数，this就... 查看详情

java四大知识点讲解，初学者必看

自学Java的初学者先弄清这些Java的基本概念也是必不可少的，死记硬背肯定是不行的，重在理解，理解它们之间的区别与联系，分别有哪些应用。想想这些代码中用到了哪些知识点。不要一味地照着书本敲代码。... 查看详情

正文

javascript初学者必看“this”

全局对象 (Global Object)

声明的对象 (Declared Object)

new关键字

call, bind, 和apply

箭头函数(=>)

结论

javascript初学者必看“new”

javascript学者必看“new”

javascript初学者必看“箭头函数”

javascript必看十道面试题(代码片段)

javascript必看十道面试题(代码片段)

深入浅出javascript中的this

汇编语言经典书目，初学者必看（转）

嵌入式初学者学习嵌入式必看必看书籍

java初学者必看，idea小技巧汇总

kubernetes零基础快速入门！初学者必看！

java基础语法学习day01---初学者必看详解(代码片段)

初学者必看，springboot+mybatisplus+swagger快速开发套路和总结

java基础语法学习day04(补充）---初学者必看详解(代码片段)

深入解析javascript中的this关键字

java基础语法学习day05---初学者必看详解(代码片段)

javascript学习--item21漂移的this

轻松几句搞定javascript中的this指向问题

java四大知识点讲解，初学者必看

`new`关键字

`call`, `bind`, 和`apply`