JS的this指向问题(史上最全)
一句话概括this指向:谁调用this就指向谁
这句话可能太过广义,那么请看以下的各种this指向场景
1.箭头函数(=>)
箭头函数this的指向不会发生改变,也就是说在创建箭头函数时就已经确定了它的this的指向了;它的指向永远指向箭头函数外层的 this。
function fn1() {console.log(this);let fn2 = () => {console.log(this);}fn2(); //this->window}fn1();//this->window//因为fn1函数中this的指向是window,所以fn2箭头函数this指向fn1函数也就是间接指向window
2.直接调用
在函数被直接调用时,this 将指向全局对象。在浏览器环境中全局对象是 Window,在 Node.js 环境中是 Global。
全局作用域中:this永远指向window
函数作用域中:
- 如果函数直接被调用 this指向window 函数名()
- 被对象的对象.属性()调用 函数中的this指向这个对象
var obj = {fn: function fn1() {console.log(this);},}obj.fn(); //this->obj
3.对象.属性()调用
这里说的this指向就是上文中代码中的例子,有兴趣可以自行多尝试一下此场景中的this
4.new
当使用 new 关键字调用函数时,函数中的 this 一定是 JS 创建的新对象。
可能你会有所疑问:“如果使用 new 关键调用箭头函数,是不是箭头函数的 this 就会被修改呢?”。
我们可以在控制台尝试一下:
fun = () => {}
new fun() // throw error
从控制台中可以看出,箭头函数不能当做构造函数,所以不能与 new 一起执行。
5.bind
bind 是指 Function.prototype.bind()->原型里的方法
多次 bind 时只认第一次 bind 的值
例子:
function fn() {console.log(this)
}fn.bind(1).bind(2)() // 1
注意:箭头函数中 this 不会被修改
fun = () => {// 这里 this 指向取决于外层 thisconsole.log(this)
}fun.bind(1)() // Window
bind 与 new
注意:new优先
function func() {console.log(this, this.__proto__ === func.prototype)
}boundFunc = func.bind(1)
new boundFunc() // Object true
bind 函数中 this 不会被修改
function func() {console.log(this)
}boundFunc = func.bind(1)
boundFunc.apply(2) // 1 bind优先
总结:将参数一一进行传递,在被函数调用时不会立马执行函数,返回有一个新函数,新函数中的this指向改变,不影响原来的函数的this指向
6.apply 和 call
作用:改变this指向
区别:调用时传递参数形式不同
- call:将参数一一进行传递(改变函数中的this指向 指向第一个参数;并且执行函数)
- apply:将参数用数组的形式传递(改变函数中的this指向 指向第一个参数;并且执行函数)
使用:
function Person(name,age){this.name = name;this.age = age;
}
var person = new Person("xiaoming",100);
var obj = {}
Person.apply(obj,['xiaoming',300]);//Person {name: 'xiaoming', age: 100};
Person.call(obj,'xiaozhang',300);//Person {name: 'xiaoming', age: 100};
console.log(person)
箭头函数中 this 不会被修改
func = () => {// 这里 this 指向取决于外层 thisconsole.log(this)
}func.apply(1) // Window
7.不在函数里
不在函数中的场景,可分为浏览器的 <script />
标签里,或 Node.js 的模块文件里。
- 在
<script />
标签里,this 指向 Window。 - 在 Node.js 的模块文件里,this 指向 Module 的默认导出对象,也就是 module.exports
非严格模式
严格模式是在 ES5 提出的。在 ES5 规范之前,也就是非严格模式下,this 不能是 undefined 或 null。所以在非严格模式下,通过上文各种场景得知,如果得出 this 指向是 undefined 或 null,那么 this 会指向全局对象。在浏览器环境中全局对象是 Window,在 Node.js 环境中是 Global。
非严格模式代码我就不运行了结果了,感兴趣的朋友可以自行复制打印在控制台看看运行结果~~~
function fn() {console.log("function fn:", this);(() => {console.log("arrow function: ", this)})()
}fn()fn.bind(null)()fn.bind(undefined)()fn.bind().bind(2)()fn.apply()
全文总结:谁调用this就指向谁!
JS的this指向问题(史上最全)相关推荐
- JS身份证号码校验大全史上最全号称公安局安全监测
身份证号码校验 function testid(id) {// 1 "验证通过!", 0 //校验不通过 // id为身份证号码var format = /^(([1][1-5]) ...
- 【必备】史上最全的浏览器 CSS JS Hack 手册
浏览器渲染页面的方式各不相同,甚至同一浏览器的不同版本("杰出代表"是 IE)也有差异.因此,浏览器兼容成为前端开发人员的必备技能.如果有一份浏览器 Hack 手册,那查询起来就方 ...
- Nginx面试题(史上最全 + 持续更新)
尼恩面试宝典专题39:Nginx面试题(史上最全.持续更新) 本文版本说明:V27 <尼恩面试宝典>升级规划为: 后续基本上,每一个月,都会发布一次,最新版本,可以联系构师尼恩获取, 发送 ...
- Github教程】史上最全github使用方法:github入门到精通
[Github教程]史上最全github使用方法:github入门到精通 [初识Github] 首先让我们大家一起喊一句"Hello Github".YEAH!就是这样. Git是 ...
- 2023史上最全Java面试题【完整版】跳槽必备,看完轻松收撕面试官
✨作者简介:杨 戬,博客专家.github开源作者 ✨多年工作总结:Java学习路线总结,小白逆袭Java技术总监 ✨技术交流:定期更新Java硬核干货,不定期送书活动.助你实现技术飞跃 ✨关注公众号 ...
- 这可能是史上最全的Python算法集!
来源 | CSDN(ID:CSDNnews ) 本文是一些机器人算法(特别是自动导航算法)的Python代码合集. 其主要特点有以下三点:选择了在实践中广泛应用的算法:依赖最少:容易阅读,容易理解每个 ...
- python优化算法工具包_这可能是史上最全的 Python 算法集(建议收藏)
原标题:这可能是史上最全的 Python 算法集(建议收藏) 导读:本文是一些机器人算法(特别是自动导航算法)的Python代码合集.其主要特点有以下三点: 选择了在实践中广泛应用的算法: 依赖最少: ...
- java 3 9 2 6数字排序_GitHub - JourWon/sort-algorithm: 史上最全经典排序算法总结(Java实现)...
史上最全经典排序算法总结(Java实现) 查找和排序算法是算法的入门知识,其经典思想可以用于很多算法当中.因为其实现代码较短,应用较常见.所以在面试中经常会问到排序算法及其相关的问题.但万变不离其宗, ...
- 史上最全的Linux常用命令汇总①收藏这一篇就够了!(超全,超详细)
史上最全的Linux常用命令汇总①(超全面!超详细!)收藏这一篇就够了! Linux命令基础 Shell Linux命令分类 Linux命令行的格式 编辑Linux命令行的辅助操作 获取命令帮助的方法 ...
- 史上最全 BAT 大厂面试题整理
转载自 史上最全 BAT 大厂面试题整理!(速度收藏) 主要分为以下几部分: (1)java面试题 (2)Android面试题 (3)高端技术面试题 (4)非技术性问题&HR问题汇总 1 ja ...
最新文章
- GNN教程:DGL框架中的采样模型!
- 杜克大学提出 AI 算法,拯救渣画质马赛克秒变高清
- RESTful Web 服务 - 方法
- Asp.Net服务器控件开发的Grid实现(二)Html标记渲染
- RAC环境创建本地数据文件的解决方法
- shell编程之 cut命令详解
- bzoj 1055: [HAOI2008]玩具取名(区间DP)
- JSON Web Token实际应用
- Unix 网络编程 I/O 模型 第六章
- 只需一个设置命令隐藏 MacBook Pro 浏海
- 【GDB调试学习笔记】Makefile生成多个可执行文件
- 液晶接口系列——MIPI(三)DSI时序讲解与实际测试
- vbs整人代码蓝屏_求大量VBS整人代码.
- 华硕Armoury crate 奥创控制中心 卡在安装安装已连接设备中,安装失败,请重新启动,网络连接失败(-101)
- 在整车OTA上,为啥新能源车企反而比传统车企做的更好?
- 可在线接收验证短信的网站
- 诺,你们要的Python进阶来咯!我还没见过比这全面的!
- 租车还能这么玩?快来看看神州租车
- HTML5、CSS3进阶——渐变背景
- Codeforces1063 C. Dwarves, Hats and Extrasensory Abilities(交互,二分)