彻底搞清函数中的this指向
2024-08-26 05:09:23
近日阅读《javascript设计模式与开发实践》
书中的apply和call调用函数层出不穷,很多妙用;
函数中的this是根据调用方式来决定的
函数调用方式有4中
1、直接调用 a(...arg); 函数a中的this总是绑定的window /严格模式下绑定的undefined
2、方法调用 a.b(...arg); 方法函数b会返回当前执行上下文的对象a;如果a.b.c(); 那么此时返回的就是b
3、构造器调用 new a(...arg);构造器不会引用任何上下文的内容,只是单纯的根据自己生成一个对象并且返回;
4、使用call/apply调用 a.call(this,...arg);
function add(){
this.a = "add-a";
console.log(this)
}
add();
//控制台:window;
//数据改变:此时会多一个全局变量a;window.a="add-a"; var obj = {
a:1,
b:{
a:2,
c:add
}
}
obj.b.c();
//控制台:obj.b指向的对象 {a:"add-a",c:function add()...}
//数据改变:直接调用类似,add会改变上下文的属性值;obj.b.a==="add-a" new obj.b.c();
//控制台:通过构造器调用,不会改变obj.b.a;所以此时obj.b.a依然等于"add-a"
//数据改变:无 obj.b.c.call();
//控制台:window;
//数据改变:window.a的值会重新被赋值"add-a"
//不传入参数或者传入undefined、null时,add中的this就会是全局对象
//否则传入什么对象、运行时的this就是传入的对象
//注意:这里其他的数据类型 String Number Boolean Object也会当做一个对象进行处理
//例如:
obj.b.c.call(1);
//控制台: Number {a: "add-a", [[PrimitiveValue]]: 1}
obj.b.c.call(false);
//控制台:Boolean {a: "add-a", [[PrimitiveValue]]: false}
最新文章
- HTML基础篇之视频音频
- 阻止iOS中页面弹性回滚,只允许div.phone_body的区块有弹性
- HTML学习之Web存储(五)
- [转]Eclipse Java注释模板设置详解
- poj2761Feed the dogs(划分树-区间K值)
- HDU 4344 随机法判素数(费马小定理
- MVC 插件化框架支持原生MVC的Area和路由特性
- openssh6.7.deb download packed for debian7/ubuntu12.04 amd64
- Myeclipse 搭建Java Web 项目 《一》
- css3实现可以计算的自适应布局——calc()
- 关于使用lombok遇到的问题
- shiro多Realm第一次调用不生效问题
- pyinstaller打包错误 UnicodeDecodeError: 'gbk' codec can't decode byte 0xab in position 160:
- Singleton Summary
- C#中用OLEDB操作EXCEL时,单元格内容长度超过255被截断
- 前端ajax传数据成功发送,但后端接收不到
- Hyperledger Fabric 账本结构解析
- UVA 10891 Game of Sum(区间DP(记忆化搜索))
- Objective-C中的基本数据类型
- 在activity之间通过静态变量传递数据
热门文章
- Html5 Canvas笔记(2)-Canvas绘图
- 性能测试分享:jmeter性能监控(一)
- 老李推荐:第5章3节《MonkeyRunner源码剖析》Monkey原理分析-启动运行: 启动脚本
- CF #401 (Div. 2) E. Hanoi Factory (栈+贪心)
- 一个GOOD的Idea需要伯乐发觉-致敬错过的IDEA
- Java基础学习(三)—面向对象(上)
- Angular.js学习笔记 (二)
- spring mvc中,直接注入的HttpServletRequst是否安全呢?
- Android系统--输入系统(八)Reader线程_使用EventHub读取事件
- ASP.NET MVC4 微信公众号开发之网页授权(二):通过公众号AppID(应用ID)和AppSecret(应用密钥)取得网页授权openid