JavaScript 中的 this 简单规则


Posted in Javascript onSeptember 19, 2017

几条规则确定函数里的 this 是什么。

想确定 this 是什么其实非常简单。总体的规则是,通过检查它的调用位置,在函数被调用的的时候确定 this。它遵循下面这些规则,接下来以优先级顺序说明。

规则

1、如果在调用函数时使用 new 关键字,那么函数里的 this 就是一个全新的对象。

function ConstructorExample() {
  console.log(this);
  this.value = 10;
  console.log(this);
}
new ConstructorExample();
// -> {}
// -> { value: 10 }

2、如果使用 apply、call 或者 bind 调用函数,那么函数里的 this 就是作为参数传进去的对象。

function fn() {
  console.log(this);
}
var obj = {
  value: 5
};
var boundFn = fn.bind(obj);
boundFn();   // -> { value: 5 }
fn.call(obj); // -> { value: 5 }
fn.apply(obj); // -> { value: 5 }

3、如果函数作为一个方法调用,就是说如果使用点符号调用函数,那么 this 就是拥有这个函数作为属性的对象。换句话说,当一个点在函数调用的左侧时,this 就是这个点左侧的那个对象。

var obj = {
  value: 5,
  printThis: function() {
    console.log(this);
  }
};
obj.printThis(); // -> { value: 5, printThis: ƒ }

4、如果函数作为一个纯粹的函数调用,也就是说,它在没有上述任何条件的情况下被调用,那么 this 就是全局对象。在浏览器里,就是 window 对象。

function fn() {
  console.log(this);
}
// 如果在浏览器里调用:
fn(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}

注意这个规则其实和第三个规则是一样的,区别在于没有声明为方法的函数会自动成为全局对象 window 的属性。因此,这其实是一个隐式的方法调用。当我们调用 fn(),其实就会被浏览器理解为 window.fn(),所以 this 就是 window。

console.log(fn === window.fn); // -> true

5、如果上述规则有多个适用,那么优先级更高的就会设置 this 值。

6、如果是 ES2015 里的箭头函数,那么它将忽略上述所有规则,并在创建的时候接收包含它的作用域作为 this 的值。想确定 this 具体是什么的话,只需从创建箭头函数那里往上一行,看看那儿的 this 是什么,箭头函数里的 this 值和它一样。

const obj = {
  value: 'abc',
  createArrowFn: function() {
    return () => console.log(this);
  }
};
const arrowFn = obj.createArrowFn();
arrowFn(); // -> { value: 'abc', createArrowFn: ƒ }

看回第三个规则,当我们调用 obj.createArrowFn() 的时候,createArrowFn 里的 this 是 obj,因为这是方法调用。因此,obj 会在 arrowFn 里绑定到 this 上。如果我们在全局作用域创建一个箭头函数,那么 this 值就会是 window。

应用规则

让我们来看一个代码示例,并应用这些规则。尝试一下看能否弄清楚不同的函数调用下,this 是什么。

确定应用了哪条规则

var obj = {
  value: 'hi',
  printThis: function() {
    console.log(this);
  }
};
var print = obj.printThis;
obj.printThis(); // -> {value: "hi", printThis: ƒ}
print(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}

obj.printThis() 属于第三条规则,方法调用。另一方面,print() 属于第四条规则,纯粹的函数调用。对于 print() 来说,我们在调用的时候没有使用 new、bind/call/apply 或者点符号,所以它对应了规则四,this 就是全局对象 window。

当适用多个规则的时候

当适用多个规则的时候,使用列表里更高优先级的规则。

var obj1 = {
  value: 'hi',
  print: function() {
    console.log(this);
  },
};
var obj2 = { value: 17 };

如果规则二和规则三同时适用,那么规则二占优。

obj1.print.call(obj2); // -> { value: 17 }

如果规则一和规则三同时适用,那么规则一占优。

new obj1.print(); // -> {}

有些库有时候会故意将 this 值绑定到某些函数里。而通常会在函数里将最有用的值绑定到 this 上使用。举个例子,jQuery 把 this 绑定到 DOM 元素上,在回调中触发一个事件。如果某个库出现一个不太符合上述规则的 this 值,那么请仔细阅读这个库的文档,它很有可能使用 bind 绑定了。

总结

以上所述是小编给大家介绍的JavaScript 中的 this 简单规则,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
导航跟随滚动条置顶移动示例代码
Sep 11 Javascript
了不起的node.js读书笔记之例程分析
Dec 22 Javascript
javascript实现鼠标拖动改变层大小的方法
Apr 30 Javascript
js漂浮广告实现代码
Aug 15 Javascript
AngularJS使用ng-repeat指令实现下拉框
Aug 23 Javascript
jQuery中的select操作详解
Nov 29 Javascript
js中如何完美的解析数据
Mar 18 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
Apr 17 Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 Javascript
js实现经典贪吃蛇小游戏
Mar 19 Javascript
JavaScript日期库date-fn.js使用方法解析
Sep 09 Javascript
Ajax异步刷新功能及简单案例
Nov 20 Javascript
在 Node.js 中使用原生 ES 模块方法解析
Sep 19 #Javascript
Webpack 服务器端代码打包的示例代码
Sep 19 #Javascript
原生js中ajax访问的实例详解
Sep 19 #Javascript
angularjs实现过滤并替换关键字小功能
Sep 19 #Javascript
详解vue-cli与webpack结合如何处理静态资源
Sep 19 #Javascript
前端常见跨域解决方案(全)
Sep 19 #Javascript
详解.vue文件中监听input输入事件(oninput)
Sep 19 #Javascript
You might like
thinkPHP的Html模板标签使用方法
2012/11/13 PHP
PHP之sprintf函数用法详解
2014/11/12 PHP
PHP中模拟链表和链表的基本操作示例
2016/02/27 PHP
php使用ftp远程上传文件类(完美解决主从文件同步问题的方法)
2016/09/23 PHP
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
Jquery 高亮显示文本中重要的关键字
2009/12/24 Javascript
有道JavaScript监听浏览器的问题
2010/06/23 Javascript
jQuery关于导航条背景切换效果实现示例
2013/09/04 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
node.js中的fs.writeFileSync方法使用说明
2014/12/14 Javascript
5种JavaScript脚本加载的方式
2017/01/16 Javascript
使用jQuery和ajax代替iframe的方法(详解)
2017/04/12 jQuery
vue+mockjs模拟数据实现前后端分离开发的实例代码
2017/08/08 Javascript
Vue动态组件实例解析
2017/08/20 Javascript
详解AngularJS跨页面传值(ui-router)
2017/08/23 Javascript
ReactNative实现Toast的示例
2017/12/31 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
微信小程序视频弹幕发送功能的实现
2020/12/28 Javascript
[01:01]2020完美高校联赛(秋)西安落幕
2021/03/11 DOTA
python实现获取客户机上指定文件并传输到服务器的方法
2015/03/16 Python
python基础_文件操作实现全文或单行替换的方法
2017/09/04 Python
用python实现的线程池实例代码
2018/01/06 Python
python处理csv中的空值方法
2018/06/22 Python
python3.6的venv模块使用详解
2018/08/01 Python
Python Flask 搭建微信小程序后台详解
2019/05/06 Python
Django中URL的参数传递的实现
2019/08/04 Python
python列表推导式操作解析
2019/11/26 Python
在python中使用pymysql往mysql数据库中插入(insert)数据实例
2020/03/02 Python
Sneaker Studio罗马尼亚网站:购买运动鞋
2018/11/04 全球购物
金士达面试非笔试
2012/03/14 面试题
大学生学业生涯规划
2014/01/05 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书
2015年小学师德师风建设工作总结
2015/10/23 职场文书
PyCharm 安装与使用配置教程(windows,mac通用)
2021/05/12 Python
Go归并排序算法的实现方法
2022/04/06 Golang
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL