彻底搞清函数中的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 ...
随机推荐
- CSS核心属性
学习目标 1.css浮动属性详解 2.Css文本属性 3.Css列表属性 4.Css背景属性 5.Css边框属性 一.Css浮动属性详解 无论多么复杂的布局,其基本出发点均是:"如何在一行显 ...
- 老李分享:Python开发性能测试脚本
老李分享:Python开发性能测试脚本 测试开发工程师的工作主要是根据测试目标来完成,帮助测试人员完成测试目标,测试的业务需求是测试人员提出,但是由于环境的制约,手中没有性能测试工具的时候,性能测 ...
- 手机自动化测试:Appium源码之API(2)
手机自动化测试:Appium源码之API(2) TouchAction AppiumDriver的辅助类,主要针对手势操作,比如滑动.长按.拖动等.TouchAction的原理是讲一系列的动作放在 ...
- 如何在IntelJ下用Maven创建一个Web项目
相信一开始做Web项目的同学都是直接把项目包放在WEB-INF/lib目录下,然后就开始做项目了.但是之后接触了一些使用了Maven进行包管理的项目,我们就不得不学一学如何用Maven做包管理. 在网 ...
- 一些CSS/JS小技巧
CSS部分 1.文本框不可点击 .inputDisabled{ background-color: #eee;cursor: not-allowed;} 2.禁止复制粘贴 onpaste=" ...
- Java中常用来处理时间的三个类:Date、Calendar、SimpleDateFormate,以及Java中的单例设计模式:懒汉式、饿汉式以及静态内部类式
(一)java.util.Date类 1.该类有一个long类型的属性:用来存放时间,是用毫秒数的形式表示,开始的日期是从1970年1月1号 00:00:00. 2.该类的很多方法都已经过时,不 ...
- sublime text 3 打造舒适黑色主题
效果: 这里我使用了两个主题插件组合成的 Spacegray Afterglow Ctrl+Shift+P -> Package Control:Install Packages 分别输入Spa ...
- 如何选择适合自己的CMS建站系统
在互联网发展突飞猛进的今天,可谓”得市场者得天下”,而电商已成为占据市场速度最快.范围最广的手段,进而网站建设也逐渐引起商家重视,并深入到了企业和个体的发展战略之中. 如今企业建站已 ...
- Android学习探索之运用MVP设计模式实现项目解耦
前言: 一直致力于提高开发效率降低项目耦合,今天想抽空学习一下MVP架构设计模式,学习一下如何运用到项目中. MVP架构设计模式 MVP模式是一种架构设计模式,也是一种经典的界面模式.MVP中的M代表 ...
- vs2017添加引用时报错未能正确加载“ReferenceManagerPackage”包。
最近新装了2017,开始前几天还好, 可是最近在添加引用时,报错 ---------------------------Microsoft Visual Studio----------------- ...