JavaScript之this学习心得
this在运行时绑定,并不是在编写时绑定,它的上下文取决于函数调用的各种条件。this既不指向自身,也不指向函数的词法作用域。this是在函数被调用时发生的绑定,指向什么完全取决于函数在哪里被调用。
this绑定规则
1. 默认绑定:this绑定在函数调用的位置。只在非严格模式下,才能绑定到调用位置,严格模式下与调用位置无关。
function foo(){
console.log(this.a);
}
var a = 2;
foo(); // 2
2. 隐式绑定:this绑定需要考虑调用位置是否有上下文对象,或者说是否被某个对象拥有或者包含。this绑定到函数引用的上下文对象上。
function foo(){
console.log(this.a);
}
var obj1 = {
a:1,
foo:foo
};
var obj2 = {
a:2,
obj1:obj1
};
obj2..obj1.foo(); //
注:对象属性引用链中只有最顶层或者说最后一层会影响调用位置。
隐式丢失:被隐式绑定的对象会丢失,然后采用默认绑定,从而把this绑定到全局对象或undefined上,取决于是否是严格模式。其根源是函数对象传递是传的引用,不是复制,与中间经过的各种历程无关,只是与初始定义有关 。
function foo(){
console.log(this.a);
}
var obj = {
a:0,
foo:foo
};
var bar = obj.foo; // 函数别名
var a = "global";
bar(); // "global"
3. 显式绑定:使用函数的call()/apply()方法进行this绑定。它们的第一个参数是一个对象,会把这个对象绑定到this。
function foo(){
console.log(this.a);
}
var obj = {
a:0,
};
foo.call(obj); //
call(obj,var1,var2,···),apply(obj,[var1,var2,···])
4. new绑定:使用new调用函数(构造函数调用),将this绑定到新构建的对象上。
function foo(){
this.a = a;
}
var bar = new foo(0);
console.log(bar.a); //
new操作的执行过程:
- 创建一个全新的对象;
- 新对象被执行[[原型]]连接;
- 新对象绑定到函数调用的this;
- 若函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象。
this绑定判断流程
- 由new调用?绑定到新建的对象;
- 由call/apply/bind调用?绑定到指定的对象;
- 由上下文对象调用?绑定到那个上下文对象;
- 默认:在严格模式下绑定到undefined,否则绑定到全局对象。
JavaScript之this学习心得的更多相关文章
- JavaScript第一阶段学习心得
开始接触JavaScript是从慕课网开始的,基础篇学完.懵了一逼,可能是自己太蠢.感觉跟没学差不多,属性,方法,对象,什么都不懂.有的方法知道起的是什么效果,但是原理什么的都不知道. 还好,基础篇学 ...
- JavaScript 秘密花园 学习心得
目的 记录一下学习心得,便于以后复习,内容是比较基础的...但是很多内容我还是不知道... 对象 对象使用和属性 1.JavaScript 中所有变量都可以当作对象使用,除了两个例外 null和dun ...
- 我JSP学习心得1
老师布置了一项作业,说是要按着老师的要求写,但我觉得只要是技术分享的心得就是好的,不论是不是所要求的内容. 由于和几个人在外面给别人搭建网站,项目需要学习了jsp有用到了javascript,这里有一 ...
- fullpage 插件学习心得
fullpage.js 是一个基于jquery 的插件,它能够轻松的制作出高大上的全屏网站,主要功能有; 1.支持鼠标滚动 2.支持前进后退和键盘控制 3.多个回调函数 4.支持 CSS3 动画 5. ...
- Ajax学习心得
Ajax学习心得 大致学了下Ajax,才知道它不是某种编程语言,而是一种在无需加载整个页面的情况下能够更新部分网页的技术.了解了它的功能后觉得这真是一种好的技术,这得给前端和运维省多少力啊! 传统的网 ...
- jquery validate学习心得
据说,javascript最初的由来就是为了解决表单的验证问题,当然现在的js已经能够用来做各种各样炫酷的效果,不过表单验证一直以来都是js很重要的一个用途(在博客园第一篇博客,不知道说些什么开头~~ ...
- css3 3d学习心得
css3 3d学习心得 卡片反转 魔方 banner图 首先我们要学习好css3 3d一定要有一定的立体感 通过这个图片应该清楚的了解到了x轴 y轴 z轴是什么概念了. 首先先给大家看一个小例子: 卡 ...
- PWA学习心得
PWA学习心得 一.什么是PWA Progressive Web App , (渐进式增强 WEB 应用) 简称 PWA ,是提升WebApp的体验的一种新方法,能给用户原生应用的体验. PWA ...
- 我的MYSQL学习心得(一) 简单语法
我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...
随机推荐
- 位运算卷积-FWT
问题 给出两个幂级数 \(f,g\) ,求 \[ h=\sum _i\sum _jx^{i\oplus j}f_ig_j \] 其中 \(\oplus\) 是可拆分的位运算. 算法 由于位运算具有独立 ...
- bzoj1013/luogu4035 球形空间生成器 (高斯消元)
根据各点到圆心的距离相等,可以列出有N个等号的方程 假设圆心坐标是(x,y,z,...)的话,$x^2,y^2,z^2$等是可以消掉的 于是整理一下,就变成了N元1次方程组,有N个方程.而且保证是相容 ...
- Oracle和SQL SERVER在SQL语句上的差别
Oracle与Sql server都遵循SQL-92标准:http://owen.sj.ca.us/rkowen/howto/sql92F.html,但是也有一些不同之处,差别如下: Oracle中表 ...
- 24. Swap Nodes in Pairs(M);25. Reverse Nodes in k-Group(H)
24. Swap Nodes in Pairs Given a linked list, swap every two adjacent nodes and return its head. For ...
- OpenStack 计算服务 Nova介绍和控制节点部署(七)
介绍 Nova是openstack最早的两块模块之一,另一个是对象存储swift.在openstack体系中一个叫做计算节点,一个叫做控制节点.这个主要和nova相关,我们把安装为计算节点nova-c ...
- sql语句解析顺序和执行顺序
sql语句执行顺序1.from子句组装来自不同数据源的数据2.where子句基于指定的条件对记录行进行筛选3.group by子句将数据划分为多个分组4.使用聚集函数进行计算5.使用having子句筛 ...
- Swift学习笔记2
1.函数参数都有一个外部参数名(external parameter name)和一个局部参数名(local parameter name).外部参数名用于在函数调用时标注传递给函数的参数,局部参数名 ...
- bzoj千题计划268:bzoj3131: [Sdoi2013]淘金
http://www.lydsy.com/JudgeOnline/problem.php?id=3131 如果已知 s[i]=j 表示有j个<=n数的数码乘积=i 那么就会有 s[a1]*s[a ...
- 转自知乎大神----JS 的 new 到底是干什么的?
大部分讲 new 的文章会从面向对象的思路讲起,但是我始终认为,在解释一个事物的时候,不应该引入另一个更复杂的事物. 今天我从「省代码」的角度来讲 new. --------------------- ...
- Facebook人工智能实验室的前世今生
Facebook人工智能实验室的前世今生 是时候停止把Facebook当作纯粹的社交媒体公司来看了.它用无人机提供互联网服务,为了发展虚拟现实而收购Oculus,不懈追求人工智能,Facebook已经 ...