用最简单的方法判断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 中对象的继承〔转贴〕
Jan 22 Javascript
Mootools 1.2教程 类(一)
Sep 15 Javascript
JQ技术实现注册页面带有校验密码强度
Jul 27 Javascript
JQuery菜单效果的两个实例讲解(3)
Sep 17 Javascript
详解JavaScript对象序列化
Jan 19 Javascript
JS中this上下文对象使用方式
Oct 09 Javascript
基于jQuery实现表格的排序
Dec 02 Javascript
JavaScript定义全局对象的方法示例
Jan 12 Javascript
JS实现的按钮点击颜色切换功能示例
Oct 19 Javascript
vue实现购物车列表
Jun 30 Javascript
JavaScript array常用方法代码实例详解
Sep 02 Javascript
Javascript 模拟mvc实现点餐程序案例详解
Dec 24 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
PHP生成不同颜色、不同大小的tag标签函数
2013/09/23 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
PHP获取日期对应星期、一周日期、星期开始与结束日期的方法
2018/06/22 PHP
javaScript的函数对象的声明详解
2015/02/06 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
2015/03/13 Javascript
JavaScript判断是否为数组的3种方法及效率比较
2015/04/01 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
2015/08/31 Javascript
全面解析Bootstrap表单样式的使用
2016/09/09 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
angular4中关于表单的校验示例
2017/10/16 Javascript
NodeJs实现定时任务的示例代码
2017/12/05 NodeJs
vue watch监听对象及对应值的变化详解
2018/02/24 Javascript
vue自定义一个v-model的实现代码
2018/06/21 Javascript
关于JavaScript中高阶函数的魅力详解
2018/09/07 Javascript
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
[01:29:31]VP VS VG Supermajor小组赛胜者组第二轮 BO3第一场 6.2
2018/06/03 DOTA
python使用wxpython开发简单记事本的方法
2015/05/20 Python
Python编程中的文件读写及相关的文件对象方法讲解
2016/01/19 Python
结合Python的SimpleHTTPServer源码来解析socket通信
2016/06/27 Python
Django返回json数据用法示例
2016/09/18 Python
利用python脚本如何简化jar操作命令
2019/02/24 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
Python3查找列表中重复元素的个数的3种方法详解
2020/02/13 Python
Spanx塑身衣官网:美国知名内衣品牌
2017/01/11 全球购物
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
牦牛毛户外探险服装:Kora
2019/02/08 全球购物
2014年国庆节活动总结
2014/08/26 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
2014年社区综治工作总结
2014/11/17 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫