JavaScript基础之this详解


Posted in Javascript onJune 04, 2017

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

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

如果对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的绑定对象。这三个函数很类似,但是我们需要注意它们微小的区别。

<!-- call可以接收任意个数的参数,其中第一个必须是一个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。

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

译者: Fundebug

Javascript 相关文章推荐
IE6浏览器下resize事件被执行了多次解决方法
Dec 11 Javascript
JavaScript instanceof 的使用方法示例介绍
Oct 23 Javascript
JS实现图片产生波纹一样flash效果的方法
Feb 27 Javascript
SpringMVC返回json数据的三种方式
Dec 10 Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
Mar 11 Javascript
jquery获取复选框checkbox的值实现方法
May 30 Javascript
canvas实现流星雨的背景效果
Jan 13 Javascript
详解js静态资源文件请求的处理
Aug 01 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
Apr 03 Javascript
Vue 监听列表item渲染事件方法
Sep 06 Javascript
详解Vue中watch对象内属性的方法
Feb 01 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
Jun 04 #Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
Jun 04 #Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
Jun 04 #Javascript
JavaScript箭头(arrow)函数详解
Jun 04 #Javascript
Angular 4依赖注入学习教程之简介(一)
Jun 04 #Javascript
angularJs中datatable实现代码
Jun 03 #Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
Jun 03 #Javascript
You might like
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
PHP 创建标签云函数代码
2010/05/26 PHP
深入php var_dump()函数的详解
2013/06/05 PHP
php生成zip文件类实例
2015/04/07 PHP
php实现图片上传、剪切功能
2016/05/07 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
2017/05/04 PHP
PHP二维索引数组的遍历实例分析【2种方式】
2019/06/24 PHP
ext jquery 简单比较
2010/04/07 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
Jquery.Form 异步提交表单的简单实例
2014/03/03 Javascript
Javascript小技巧之生成html元素
2014/05/15 Javascript
javascript中setAttribute()函数使用方法及兼容性
2015/07/19 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
JavaScript数组方法总结分析
2016/05/06 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
2016/09/17 Javascript
JavaScript模仿Pinterest实现图片预加载功能
2016/10/25 Javascript
jQuery中用on绑定事件时需注意的事项
2017/03/19 Javascript
nodeJS与MySQL实现分页数据以及倒序数据
2020/06/05 NodeJs
[50:27]OG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/30 DOTA
Python实现栈的方法
2015/05/26 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
python 模拟创建seafile 目录操作示例
2019/09/26 Python
Python生成随机验证码代码实例解析
2020/06/09 Python
Python代码需要缩进吗
2020/07/01 Python
如何让python的运行速度得到提升
2020/07/08 Python
Lou & Grey美国官网:主打舒适性面料服饰
2017/12/21 全球购物
俄罗斯第一家多品牌在线奢侈品精品店:Aizel.ru
2020/09/06 全球购物
旅游管理本科生求职信
2013/10/14 职场文书
中英文求职信范文
2014/01/27 职场文书
五水共治捐款倡议书
2014/05/14 职场文书
售后服务承诺书模板
2014/05/21 职场文书
考试作弊万能检讨书
2014/10/19 职场文书
python pyhs2 的安装操作
2021/04/07 Python
MySQL数据库实验之 触发器和存储过程
2022/06/21 MySQL