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 相关文章推荐
js模仿windows桌面图标排列算法具体实现(附图)
Jun 16 Javascript
jQuery基于ID调用指定iframe页面内的方法
Jul 06 Javascript
JavaScript面向对象分层思维全面解析
Nov 22 Javascript
详解Bootstrap各式各样的按钮(推荐)
Dec 13 Javascript
bootstrap daterangepicker汉化以及扩展功能
Jun 15 Javascript
浅谈react受控组件与非受控组件(小结)
Feb 09 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
Mar 27 Javascript
微信小程序实现运动步数排行功能(可删除)
Jul 05 Javascript
vue生命周期和react生命周期对比【推荐】
Sep 19 Javascript
值得收藏的八个常用的js正则表达式
Oct 19 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
Oct 11 Javascript
微信小程序选择图片控件
Jan 19 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
php日历[测试通过]
2008/03/27 PHP
PHP ajax 分页类代码
2008/11/13 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
2019/05/21 PHP
PHP FileSystem 文件系统常用api整理总结
2019/07/12 PHP
js停止输出代码
2008/07/20 Javascript
jQuery 获取URL参数的插件
2010/03/04 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
javascript获取元素离文档各边距离的方法
2015/02/13 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
bootstrap-treeview自定义双击事件实现方法
2016/01/09 Javascript
详解Angular 4.x 动态创建组件
2017/04/25 Javascript
AugularJS从入门到实践(必看篇)
2017/07/10 Javascript
vue.js根据代码运行环境选择baseurl的方法
2018/02/28 Javascript
JS无限级导航菜单实现方法
2019/01/05 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
2019/04/14 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
Python实现SSH远程登陆,并执行命令的方法(分享)
2017/05/08 Python
django 创建过滤器的实例详解
2017/08/14 Python
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
python执行CMD指令,并获取返回的方法
2018/12/19 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
Python2手动安装更新pip过程实例解析
2020/07/16 Python
golang/python实现归并排序实例代码
2020/08/30 Python
浅析HTML5页面元素及属性
2021/01/20 HTML / CSS
cosme官方海外旗舰店:日本最大化妆品和美容产品的综合口碑网站
2017/01/18 全球购物
Geekbuying波兰:购买中国电子产品
2019/10/20 全球购物
Ariat官网:美国马靴和服装品牌
2019/12/16 全球购物
Booking.com亚太地区:Booking.com APAC
2020/02/07 全球购物
品质管理部岗位职责范文
2014/03/01 职场文书
面试自我介绍演讲稿
2014/04/29 职场文书
三潭印月的导游词
2015/02/12 职场文书
Win11怎么把合并的任务栏分开 Win11任务栏合并分开教程
2022/04/06 数码科技