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 相关文章推荐
jquery 最简单的属性菜单
Oct 08 Javascript
最佳的addEvent事件绑定是怎样诞生的
Oct 24 Javascript
jQuery实现图片放大预览实现原理及代码
Sep 12 Javascript
浅析JS中常用类型转换及运算符表达式
Jul 23 Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 Javascript
r.js来合并压缩css文件的示例
Apr 26 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
May 23 Javascript
详解javascript 正则表达式之分组与前瞻匹配
May 30 Javascript
react项目如何使用iconfont的方法步骤
Mar 13 Javascript
详解vue为什么要求组件模板只能有一个根元素
Jul 22 Javascript
使用layer.msg 时间设置不起作用的解决方法
Sep 12 Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 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
php Smarty初体验二 获取配置信息
2011/08/08 PHP
php自定文件保存session的方法
2014/12/10 PHP
php中10个不同等级压缩优化图片操作示例
2016/11/14 PHP
浅谈PHP之ThinkPHP框架使用详解
2020/07/21 PHP
phpstorm激活码2020附使用详细教程
2020/09/25 PHP
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
JavaScript把数组作为堆栈使用的方法
2015/03/20 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
2015/05/11 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
原生js实现tab选项卡切换
2020/03/23 Javascript
jquery做个日期选择适用于手机端示例
2017/01/10 Javascript
详解react、redux、react-redux之间的关系
2018/04/11 Javascript
在Vue项目中使用snapshot测试的具体使用
2019/04/16 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
nodejs使用node-xlsx生成excel的方法示例
2019/08/22 NodeJs
Vue+webpack实现懒加载过程解析
2020/02/17 Javascript
详解Vue中的自定义指令
2020/12/07 Vue.js
Python列表list数组array用法实例解析
2014/10/28 Python
numpy 计算两个数组重复程度的方法
2018/11/07 Python
Django的性能优化实现解析
2019/07/30 Python
详解Tensorflow不同版本要求与CUDA及CUDNN版本对应关系
2020/08/04 Python
用python对excel进行操作(读,写,修改)
2020/12/25 Python
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
Diptyque英国官方网站:源自法国的知名香氛品牌
2019/08/28 全球购物
双立人加拿大官网:Zwilling加拿大
2020/08/10 全球购物
北京天润融通.net面试题笔试题
2012/02/20 面试题
旅游项目开发策划书
2014/01/18 职场文书
董事长助理岗位职责
2014/02/18 职场文书
工作迟到检讨书
2014/02/21 职场文书
高校教师岗位职责
2014/03/18 职场文书
《音乐之都维也纳》教学反思
2014/04/16 职场文书
三年级评语大全
2014/04/23 职场文书
入党介绍人意见范文
2015/06/01 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
Go语言实现Snowflake雪花算法
2021/06/08 Golang