this关键字是JavaScript中最复杂的机制之一,是一个特别的关键字,被自动定义在所有函数的作用域中,但是相信很多JsvaScript开发者并不是非常清楚它究竟指向的是什么。本文旨在对this进行初步的了解。
![这里写图片描述](https://box.kancloud.cn/2016-04-07_570603edad1d6.jpg "")
person1.grow();//25
setTimeout(person1.grow, 100);//undefined
至所以出现两个不一样的结果,是因为grow函数丢失了同this之间的绑定。
对于这个问题,暂且保留。继续往下看
person2.grow();//undefined
这是因为在person2的grow函数中,this指代的对象即是全局对象window(非严格模式下,严格模式下this指代的为undefined).
对于这个问题,比较好解决,我们的目的是绑定在person2作用域上。
因此我们可以像下面这样书写:
将this赋值给self;因为在setTimeout函数外部,this对象指代的是person2,我们可以将其赋值给self,解决此处this绑定的问题。self只是一个可以通过词法作用域和闭包进行引用的标识符,不关系this绑定的过程中发生了什么。
![这里写图片描述](https://box.kancloud.cn/2016-04-07_570603edc0022.jpg "")
ES6(ECMAScript6)引入了一个箭头函数,和上面一样可以解决此问题。=>是ES6中添加的一个特殊的语法格式用于函数声明。
100
胖箭头函数在涉及到this绑定时的行为和普通函数的行为完全不一致,它放弃了普通this绑定的规则,使用当前的词法作用域覆盖this本来的值。
“胖箭头”的用法,胖箭头通常被认为是function关键字的简写。
![这里写图片描述](https://box.kancloud.cn/2016-04-07_570603edd0456.jpg "")
言归正传,继续探讨解决此问题的其它方法,有一个更好的方法是正确的使用和包含this机制。
![这里写图片描述](https://box.kancloud.cn/2016-04-07_570603ede0e3a.jpg "")
bind(this),此处的this指代的是person对象,作用与胖箭头一样。
到这个地方,对于person1的问题,我们仍然没有解决。
前面的方法对其都是不起作用的,很明显,我们在person1对象外部使用setTimeout去调用函数,this会指代全局对象window(同样是非严格模式下),因此,此处采用简单粗暴的方法,用call强制性的将this绑定到person1上。
![这里写图片描述](https://box.kancloud.cn/2016-04-07_570603edf421d.jpg "")
希望本文能对你了解JavaScript的关键字this有所帮助。
- 前言
- jQuery轮播图插件
- JS模拟事件操作
- JS闭包与变量
- JS绑定事件
- HTML5之file控件
- JavaScript的this词法
- JavaScript的this词法(二)
- JS this词法(三)
- JS检测浏览器插件
- JS拖拽组件开发
- number输入框
- Modernizr.js和yepnode.js
- DOM变化后事件绑定失效
- div和img之间的缝隙问题
- 详解JavaScript作用域
- bootstrap入门
- 表单验证(登录/注册)
- Bootstrap网格系统
- Bootstrap排版
- Bootstrap创建表单(一)
- Bootstrap表单(二)
- Bootstrap按钮
- Bootstrap图片
- Bootstrap字体图标(glyphicons)
- Bootstrap的aria-label和aria-labelledby
- Bootstrap下拉菜单
- Bootstrap按钮组
- Bootstrap按钮菜单
- Bootstrap输入框组
- Bootstrap导航元素
- Bootstrap导航栏
- sublimeText频频崩溃
- JQuery不同版本的差异(checkbox)
- Bootstrap面包屑导航、分页、标签、徽章
- Bootstrap警告
- Bootstrap进度条
- 前端的上传下载
- JS字符串的相关方法
- CSS3选择器(全)
- CSS3新增文本属性详述
- 利用CSS3实现图片切换特效
- CSS3新增颜色属性
- CSS3的border-radius属性详解
- JS创建对象几种不同方法详解
- JS实现继承的几种方式详述(推荐)
- CSS3响应式布局
- JS模块化开发(requireJS)
- 利用@font-face实现个性化字体
- 前端在html页面之间传递参数的方法
- CSS自动换行、强制不换行、强制断行、超出显示省略号
- 如何在Html中引入外部页面
- reactJS入门
- React组件生命周期
- 使用React实现类似快递单号查询效果
- ReactJS组件生命周期详述
- React 属性和状态详解