彻底搞清函数中的this指向
近日阅读《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}
彻底搞清函数中的this指向的更多相关文章
- JS回调函数中的this指向(详细)
首先先说下正常的this指向问题 什么是this:自动引用正在调用当前方法的.前的对象. this指向的三种情况 1. obj.fun() fun中的this->obj,自动指向.前的对 ...
- Javascript回调函数中的this指向问题
使用js中的定时器(setInterval,setTimeout),很容易会遇到this指向的问题. 直接上例子: 1 var name = 'my name is window'; 2 var ob ...
- React之函数中的this指向
我们都知道在React中使用函数时,有两种写法,一是回调函数,二是直接调用,但需要在构造函数中绑定this,只有这样,函数中的this才指向本组件 总结一下没有绑定this的函数中的this指向 不管 ...
- 改变函数中的 this 指向——神奇的call,apply和bind及其应用
在JavaScript 中,call.apply 和 bind 是 Function 对象自带的三个方法,这三个方法的主要作用是改变函数中的 this 指向,从而可以达到`接花移木`的效果.本文将对这 ...
- js闭包中的this(匿名函数中的this指向的是windows)
js闭包中的this(匿名函数中的this指向的是windows) 一.总结 1.普通函数中的this指向的是对象,匿名函数中的this指向的是windows,和全局变量一样 2.让匿名函数中的thi ...
- JS的一些总结(函数声明和函数表达式的区别,函数中的this指向的问题,函数不同的调用方式,函数也是对象,数组中的函数调用)
一.函数声明和函数表达式的区别: 函数声明放在if——else语句中,在IE8中会出现问题 函数表达式则不会 <script> if(true){ function f1(){ conso ...
- 普通函数跟箭头函数中this的指向问题
箭头函数和普通函数的区别如下. 普通函数:根据调用我的人(谁调用我,我的this就指向谁) 箭头函数:根据所在的环境(我再哪个环境中,this就指向谁) 一针见血式总结: 普通函数中的this: 1. ...
- 箭头函数,闭包函数中的this指向
在javscript中,this 是在函数运行时自动生成的一个内部指针,它指向函数的调用者. 箭头函数有些不同,它的this是继承而来, 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象. ...
- 函数中this的指向
每个函数在被调用时都会自动取得两个特殊变量:this和arguments:内部函数在搜索这两个变量时,只会搜索到其活动对象为止,因此永远不可能直接访问外部函数中的这两个变量. f 1 var name ...
随机推荐
- [SinGuLaRiTy] COCI 2016~2017 #5
[SinGuLaRiTy-1012] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. 最近神犇喜欢考COCI...... 测试题目 对于所有的 ...
- 老李分享:Uber究竟是用什么开发语言? 1
老李分享:Uber究竟是用什么开发语言? poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:9 ...
- POPTEST学员就业面试题目!!!!!
POPTEST学员就业面试题目!!!!! poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.(欢迎大家咨询软件测试工程师就业培训 ...
- 操作系统之cache、伙伴系统、内存碎片、段式页式存储管理
存储管理是操作系统非常重要的功能之一,本文主要介绍操作系统存储管理的基础知识,包括缓存相关知识.连续内存分配.伙伴系统.非连续内存分配.内存碎片等,并结合linux系统对这些知识进行简单的验证.文章内 ...
- avalon2对比avalon1 新增的功能汇总
avalon2.0 与1.4,1.5相比, 2.0是移除了ms-repeat, ms-each, ms-with, ms-include, ms-include-src,ms-data, ms-sca ...
- 复选框选中删除行(DOM练习)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 我们一起学Docker(一)
一.什么是Docker? Docker是一个基于LXC(Linux Container,Linux容器),以及cgroup的上层工具,通过对LXC,cgroup及相关系统命令的封装,使得用户可以非常方 ...
- CF #228 div1 B. Fox and Minimal path
题目链接:http://codeforces.com/problemset/problem/388/B 大意是用不超过1000个点构造一张边权为1的无向图,使得点1到点2的最短路的个数为给定值k,其中 ...
- vscode同步设置&扩展插件
首先安装同步插件: Settings Sync 第二部进入你的github如图: 打开设置选项: 新建一个token: 如图: 记住这个token值 转到vscode 按shift+alt +u ...
- 原生ajax实现http请求
1⃣️先简单了解一下HTTP协议: http是计算机通过网络进行通信的一种规则,它是一种无状态协议(不建立持久链接,直白点儿说就是请求响应完事儿之后,链接就断开) 2⃣️一个完整的http请求有 ...