前端读者 | 嗨,你知道this吗
本文来自 @position_柚子,地址:https://juejin.im/post/5995c7a76fb9a0247a60c407
在平时的代码中,相信大家经常用到 this
,可是你真的明白此 this
真的是你认为的 this
吗?今天柚子君总结了一下平时用到的 this
的场景,大家走过路过不要错过啊~
首先咱们先来看一下《JavaScript 高级程序设计》上是怎么说的。
this
对象是在运行时基于函数的执行环境绑定的:在全局函数中,this
等于 windows
,而当函数被作为某个对象的方法调用时,this
等于那个对象。
还有一种情况,在《深入理解 ES6》一书中写道:
如果箭头函数被非箭头函数包含,则 this
绑定的是最近一层非箭头函数的 this
,且不能通过 call()、apply() 或 bind()
方法来改变 this 的值。
首先看一下非箭头函数的情况:
一、普通函数调用
这是一个普通的函数声明,在这种情况下,this
是指向 window
的:
var test = '哈哈哈';
function thisHandler() {
console.log('test:',this.test,'this:',this);
}
thisHandler() // test: 哈哈哈 this: window
其实上面的代码就相当于 window
调用 thisHandler()
,所以这时 this
指向 window
var b = '哈哈哈';
function thisHandler() {
console.log('b:',this.b,'this:',this);
}
window.thisHandler() // b: 哈哈哈 this: window
二、作为对象的方法调用
当作为对象的方法被调用时,this
这时就指向调用它的对象。
var thisHandler = {
name: "柚子",
test: function(){
console.log('my name:',this.name);
}
}
thisHandler.test() // my name: 柚子
再来一个栗子:
var thisHandler = {
name: "柚子",
fn: {
name: '芒果',
test: function() {
console.log('my name:',this.name);
}
}
}
thisHandler.fn.test() // my name: 芒果
这时 this
指向的是对象 fn
了,所以,关于对象调用这一点明白了吗,如果明白了,那没关系,接着看下一个强化题:
var name = '柚子'
var thisHandler = {
name: "芒果",
fn: {
name: '糖果',
test: function(){
console.log('my name:',this.name);
}
}
}
var testHandler = thisHandler.fn.test
testHandler()
这里是一秒钟分割线
哒哒哒,答对了,这里的 this
指向的 window
,那么这是为什么呢,哪位小盆友来回答一下。举手:
上面说到了,this
指向的是最后调用它的对象,第一步是赋值给了 testHandler
,最后执行的那一句相当于 window.testHandler()
。所以这里的 this
指向的是 window
。最后输出的就是 my name: 柚子
。
哒哒哒,真聪明,来闯下一关~
三、构造函数的调用
var name = '柚子'
function Bar() {
this.name = '芒果'
}
var handlerA = new Bar();
console.log(handlerA.name); // 芒果
console.log(name) // 柚子
其实要明白为什么会是这样一个结果,咱们就要来聊聊 new
做了哪些事情。
- 创建类的实例。这步是把一个空的对象的
__proto__
属性设置为Bar.prototype
。 - 初始化实例。函数
Bar
被传入参数并调用,关键字this
被设定为该实例。 - 返回实例。
弄明白了 new
的工作内容,自然而然的也明白了上面输出的原因。
Bar()
中的 this
指向对象 handlerA
,并不是全局对象。
四、apply / call 调用
使用 apply
方法可以改变 this
的指向。如果这个函数处于非严格模式下,则指定为 null
或 undefined
时会自动指向全局对象(浏览器中就是window对象)。
var name = '芒果';
var thisHandler = {
name: "柚子",
test: function(){
console.log('my name:',this.name);
}
};
thisHandler.test(); // my name: 柚子
thisHandler.test.apply(); // my name: 芒果
四、箭头函数
在《深入理解 ES6》一书中可以知道箭头函数和普通函数的一个不同之处就在于 this 的绑定。
箭头函数中没有 this
绑定,必须通过查找作用域链来决定其值。如果箭头函数被非箭头函数包含,则 this
绑定的是最近一层非箭头函数的 this
;否则,this
的值会被设置为 undefined
。
var name = '柚子'
var thisHandler = {
name: '芒果',
test:() => {
console.log('my name:',this.name,'this:',this);
}
}
thisHandler.test(); // my name: 柚子 this: Window
这时 this
不是指向 thisHandler
,而是 Window
。
关于 this
的使用和体会还是要在平时运用中理解,先了解其原理,那么在使用的时候就如鱼得水啦。
前端读者 | 嗨,你知道this吗的更多相关文章
- 前端读者 | Web App开发入门
本文来自互联网 自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词 - Web App(意为基于WEB形式的应用程序).业界关于Web App与Nativ ...
- 前端读者 | 前端构建工具Gulp
@羯瑞 整理 前言 前端工具现在层出不穷,网上搜下一大片,就看你怎么去使用了,基于项目看用什么样的构建工具.有的工具提供的功能还是非常强大的. FIS.百度团队的产品.现在百度的多个产品中使用.面向前 ...
- 前端读者 | 前端开发者调试面板vConsole
来着微信团队开源的一个调试工具,[GitHub地址]https://github.com/Tencent/vConsole 一个轻量.可拓展.针对手机网页的前端开发者调试面板. 特性 查看 conso ...
- 前端读者 | 前端面试基础手册(HTML+CSS)
本文来自@羯瑞:希望前端面试基础手册能帮助要找工作的前端小伙伴~~ HTML 前端需要注意哪些SEO? 合理的title.description.keywords:搜索对着三项的权重逐个减小,titl ...
- 前端读者 | Javascript设计模式理论与实战:状态模式
本文来自 @狼狼的蓝胖子:链接:http://luopq.com/2015/11/25/design-pattern-state/ 在软件开发中,很大部分时候就是操作数据,而不同数据下展示的结果我们将 ...
- 前端读者 | 由setTimeout引发的JS引擎运行机制的研究
本文来自 @xiaoyuze88 链接:http://xiaoyuze88.github.io/ 太久没碰代码了,那天想到关于循环调用setTimeout实现每隔一秒输出递增的数的那个问题,搞了搞,发 ...
- 前端读者 | 从一行代码里面学点JavaScript
本文来自 @张小俊128:链接:http://www.html-js.com/article/A-day-to-learn-from-a-line-of-code-inside-the-JavaScr ...
- 前端读者 | 如何判断Javascript对象是否存在
本文来自@阮一峰 Javascript语言的设计不够严谨,很多地方一不小心就会出错. 举例来说,请考虑以下情况. 现在,我们要判断一个全局对象myObj是否存在,如果不存在,就对它进行声明.用自然语言 ...
- 前端读者 | CSS三角形和饼图
@羯瑞 三角形 .triangle{width:0;height:0;border-width:50px;border-style:solid;border-color:red blue green ...
随机推荐
- HDU 4417 主席树写法
Super Mario Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
- JS this的指向
总结:this指向调用函数的那个对象. 在不同的应用场景this的指向有所不同,但细细思考都符合总结的意思. 场景一:一般的函数调用 这种常见的函数调用方式this指向的是window,因为相当于是w ...
- 题解【bzoj4653 [NOI2016] 区间】
先按照长度排个序,然后依次添加区间.什么是添加?设这个区间是\([l,r]\),添加就是把\(a_l,a_{l+1},a_{l+2},{...},a_{r}\)都加上\(1\),其中\(a_i\)表示 ...
- FreeRTOS - 如何根据FreeRTOS提供的功能(信号量、任务通知、队列等)设计程序
原文地址:http://www.cnblogs.com/god-of-death/p/6917837.html 1.二值信号量 就像一个标志位,事件产生置一,事件处理后直零 用于任务之间的同步,即一个 ...
- python字符串内置函数
1.字符串 定义:它是一个有序的字符的集合,用于存储和表示基本的文本信息,‘’或“”或‘’‘ ’‘’中间包含的内容称之为字符串特性:1.只能存放一个值2.不可变3.按照从左到右的顺序定义字符集合,下标 ...
- yum快速安装gitlab
安装gitlab前戏使用官方的源,还是比较慢的,gitlab官方提供了一个清华大学的源 新建 /etc/yum.repos.d/gitlab-ce.repo,内容为 源[gitlab-ce]name= ...
- Linux系统文件权限体系详解
准备工作:先简单了解Linux文件权限 在Linux系统中,ls -l 命令可以查看文件的权限,如 [zhaohuizhen@localhost Test]$ ls -l a -rw-rw-r--. ...
- 教你 Shiro 整合 SpringBoot,避开各种坑(山东数漫江湖)
依赖包 <dependency> <groupId>org.apache.shiro</groupId> <artifactId>shiro-sprin ...
- Plant (矩阵快速幂)
题目链接:http://codeforces.com/problemset/problem/185/A 题目: Dwarfs have planted a very interesting plant ...
- 阿里云服务器部署笔记二(python3、Flask、uWSGI、Nginx)
从git上把项目拉到服务器,项目可以在服务器上运行后,就只需要配置uwsgi和nginx了.它们的逻辑关系是:外部请求->nginx->uwsgi->项目实例. 一.配置uwsgi ...