用最简单的方法判断JavaScript中this的指向(推荐)


Posted in Javascript onSeptember 04, 2017

都说 JavaScript 是一种很灵活的语言,这其实也可以说它是一个混乱的语言。它把 函数式编程 和 面向对象编程 糅合一起,再加上 动态语言 特性,简直强大无比(其实是不能和C++比的,^_^ )。

JS 里的 this

  • 在 function 内部被创建
  • 指向调用时所在函数所绑定的对象(拗口)
  • this 不能被赋值,但可以被 call/apply  改变

目录

* 一个特例
* 开始判断
    * 法则一:对象方法中的this指向对象本身(箭头函数形式的除外)
    * 法则二:多层嵌套函数中的this指向等同于包含该this的最近一个function的this
    * 法则三:箭头函数以及非指向对象方法中的function的情况下this指向window
* 习题集
    * 普通函数中的this
    * 函数执行后返回另外一个函数中的this(普通函数中)
    * 多层嵌套函数中的this(定时器&箭头函数)1
    * 多层嵌套函数中的this(定时器&箭头函数)2

一个特例

在正式开始之前,我们先来说一个特例。

// 构造函数
function Student(name) {
 this.name = name
}
// 创建小明和小红两个实例
var XM = new Student('xiaoming')
var XH = new Student('xiaohong')
// 输出信息
console.log(XM) // Student {name: "xiaoming"}
console.log(XH) // Student {name: "xiaohong"}

在构造函数中,this上的值会在创建实例的时候被绑定到新创建的实例上。不适用于下面的判断方法,所以特此说明。

开始判断

下面是一个典型例子,我们的分析从这里开始。

var x = {
 name: 'bw2',
 getName1: function() {
 console.log(this)
 },
 getName2: function() {
 setTimeout(() => {
  console.log(this)
 },0)
 },
 getName31: () => {
 console.log(this)
 },
 getName32: function() {
 return function() {
  console.log(this)
 }
 }
}
x.getName1() // {name: "bw2", getName1: ƒ}
x.getName2() // {name: "bw2", getName1: ƒ}
x.getName31() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}
x.getName32()() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}

法则一:对象方法中的this指向对象本身(箭头函数形式的除外)

var x = {
 name: 'bw2',
 getName1: function() {
 console.log(this)
 }
}
x.getName1() // {name: "bw2", getName1: ƒ}

法则二:多层嵌套函数中的this指向等同于包含该this的最近一个function的this

箭头函数没有独立的this作用域,所以继续往外层走,走到了getName: function(){}。那么就是他了,this指向等同于这个function内部的this指向。根据法则一,this指向对象本身。

var x = {
 name: 'bw2',
 getName2: function() {
 console.log(this) // 等同于此处的this
 setTimeout(() => {
  console.log(this) // 原始的this位置
 },0)
 }
}
x.getName2() // {name: 'bw2', getName1: ƒ}

我们可以试着在浏览器中运行,看看结果。

法则三:箭头函数以及非指向对象方法中的function的情况下this指向window

根据法则二,this是指向最近的function,因此,这里的this等同于返回的函数中的this,不是对象方法中的this,所以,指向全局。

是不是感觉有点奇怪?不过实践证明确实如此。

var x = {
 name: 'bw2',
 getName31: () => {
 console.log(this)
 },
 getName32: function() {
 return function() {
  console.log(this)
 }
 }
}
x.getName31() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}
x.getName32()() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}

习题集

欢迎大家按照法则一到三依次判断,猜测结果,并在浏览器下测试。测试结果也可以回复,大家一起讨论。

因本人能力有限,该系列法则可能在部分情况下失效。欢迎大家一起讨论。

下面是做题时间。

普通函数中的this

function x() {
 console.log(this)
}
x()

函数执行后返回另外一个函数中的this(普通函数中)

function xx(){
 return function() {
 console.log(this)
 }
}
xx()()

多层嵌套函数中的this(定时器&箭头函数)1

var x = {
 name: 'bw2',
 getName: () => {
 setTimeout(() => {
  console.log(this)
 },0)
 }
}
x.getName()

多层嵌套函数中的this(定时器&箭头函数)2

var x = {
 name: 'bw2',
 getName: () => {
 setTimeout(function() {
  console.log(this)
 },0)
 }
}
x.getName()

再次说明,该法则为实验性法则,未进行大范围的测试,不保证在所有情况下都有一致的结果。如果你发现了法则判断失败的情况,欢迎留言,一起探讨。

总结

以上所述是小编给大家介绍的Mysql 5.7.19 winx64 ZIP Archive 安装及使用教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript中的isXX系列是否继续使用的分析
Apr 16 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
Dec 02 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
Jan 14 Javascript
jQuery打印指定区域Html页面并自动分页
Jul 04 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
Mar 16 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
Oct 13 Javascript
fastclick插件导致日期(input[type="date"])控件无法被触发该如何解决
Nov 09 Javascript
js实现精确到秒的日期选择器完整实例
Apr 30 Javascript
node跨域请求方法小结
Aug 25 Javascript
实例解析Vue.js下载方式及基本概念
May 11 Javascript
教你如何用node连接redis的示例代码
Jul 12 Javascript
js实现星星海特效的示例
Sep 28 Javascript
JS与HTML结合实现流程进度展示条思路详解
Sep 03 #Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
Sep 03 #Javascript
JS实现页面内跳转的简单代码
Sep 03 #Javascript
初探JavaScript 面向对象(推荐)
Sep 03 #Javascript
jquery+css实现下拉列表功能
Sep 03 #jQuery
使用JavaScript实现点击循环切换图片效果
Sep 03 #Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 #jQuery
You might like
ThinkPHP之N方法实例详解
2014/06/20 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
PHP加密3DES报错 Call to undefined function: mcrypt_module_open() 如何解决
2016/04/17 PHP
PHP中子类重载父类的方法【parent::方法名】
2016/05/06 PHP
LBS blog sql注射漏洞[All version]-官方已有补丁
2007/08/26 Javascript
JavaScript获取GridView中用户点击控件的行号,列号
2009/04/14 Javascript
window.onbeforeunload方法在IE下无法正常工作的解决办法
2010/01/23 Javascript
Javascript中Eval函数的使用
2010/03/23 Javascript
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
在JavaScript中正确引用bind方法的应用
2015/05/11 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
JS实现状态栏跑马灯文字效果代码
2015/10/24 Javascript
JavaScript利用闭包实现模块化
2017/01/13 Javascript
基于jquery实现多选下拉列表
2017/08/02 jQuery
Scala解析Json字符串的实例详解
2017/10/11 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
axios拦截设置和错误处理方法
2018/03/05 Javascript
vue 中动态绑定class 和 style的方法代码详解
2018/06/01 Javascript
JS浮点数运算结果不精确的Bug解决
2019/08/01 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
2021/02/05 Javascript
python使用内存zipfile对象在内存中打包文件示例
2014/04/30 Python
Django 如何使用日期时间选择器规范用户的时间输入示例代码详解
2020/05/22 Python
浅谈keras 模型用于预测时的注意事项
2020/06/27 Python
Python判断远程服务器上Excel文件是否被人打开的方法
2020/07/13 Python
美国新蛋IT数码商城:Newegg.com
2016/07/21 全球购物
巴西家用小家电购物网站:Polishop
2016/08/07 全球购物
阿迪达斯越南官网:adidas越南
2020/07/19 全球购物
自荐信模版
2013/10/24 职场文书
文体活动总结范文
2014/05/05 职场文书
校长师德师风自我剖析材料
2014/09/29 职场文书
母亲节感言
2015/08/03 职场文书
苹果电脑mac os中货币符号快捷输入
2022/02/17 杂记
Python之matplotlib绘制饼图
2022/04/13 Python
Python使用MapReduce进行简单的销售统计
2022/04/22 Python