js this工作原理
js中的this是个很妙的东西,你经常不知道它到底在指向谁,又是谁在调用它。
通用判断方法:
1.this总是指向它的直接调用者
var a={
user:'Artimis',
fn:function(){
console.log(this.user)
}
}
a.fn() //Artimis => this指向a
var b=a.fn;
b() //undefined => this指向window
2.如果没有找到直接调用者,则this指向window
function fn(){
var user='Artimis';
console.log(this.user)
}
fn() //undefined => this指向window
3.遇到return,如果返回的是对象,则this指向返回对象,否则指向函数实例
function A(){
this.user='Artimis';
return {} //return一个空对象
}
var a=new A();
console.log(a.user) //undefined => this指向return的{}
function B(){
this.user='Artimis';
return 1 //return一个数值
}
var b=new B();
console.log(b.user) //Artimis => this指向b
4.使用call/apply/bind绑定的,this指向绑定对象
5.定时器(匿名函数)内没有默认的宿主对象,所以this指向window
6.箭头函数内部没有this,this指向外层最近的调用者
1> 箭头函数在调用时,不会生成自身作用域下的this和arguments
2> 不像普通函数一样在调用时自动获取this,而是沿着作用域链向上查找,找到最近的外部一层作用域的this,并获取
3> 在定义对象的方法/具有动态上下文的回调函数/构造函数中都不适用
改变this指针指向:
1.new操作符
new会创造一个对象实例,这个实例继承了new操作符右边的对象,因此在调用方法时,this会指向对象实例
function A(){
this.user='Artimis'
}
var a=new A();
console.log(a.user) //Artimis => this指向a
.call/apply/bind
call和apply主要用于指定this的环境变量,第一个参数是什么,this就指向什么,如果是null,则指向window
var a={
user:'Artimis',
fn:function(){
console.log(this.user)
}
}
var b=a.fn;
b() //undefined
b.call(a) //Artimis => this指向a
b.call(null) //undefined => this指向window
bind是延迟的,会返回一个修改后的函数,可以自行决定执行的时间
var a={
user:'Artimis',
fn:function(){
console.log(this.user)
}
}
var b=a.fn;
var c=b.bind(a)
c() //Artimis => 延迟执行,自定义执行时间
var a={
fn:function(x,y){
console.log(x+y)
}
}
var b=a.fn;
var c=b.bind(a,2) //自定义参数x
c(3) //
js this工作原理的更多相关文章
- 探索JS引擎工作原理
JavaScript 从定义到执行,JS引擎在实现层做了很多初始化工作,因此在学习 JS 引擎工作机制之前,我们需要引入几个相关的概念:执行环境栈.全局对象.执行环境.变量对象.活动对象.作用域和作用 ...
- 分享-结合demo讲解JS引擎工作原理
代码如下: var x = 1; function A(y){ var x = 2; function B(z){ console.log(x+y+z); } return B; } var C = ...
- node.js基本工作原理及流程
概述 Node.js是什么 Node 是一个服务器端 JavaScript 解释器,用于方便地搭建响应速度快.易于扩展的网络应用.Node.js 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效,非 ...
- 探索JS引擎工作原理 (转)
这篇文章从相对底层的角度介绍了js引擎的工作 引入了 静态作用域 执行环境上下文(context) 等概念 , http://www.cnblogs.com/onepixel/p/5090799.ht ...
- js的工作原理
JavaScript就是所谓的客户端脚本语言,是一种在互联网浏览器(浏览器也称为Web客户端,因为它连接到Web服务器上,以下载页面)内部运行的计算机编程语言. 也就是说,如果一个网页里有js代码,那 ...
- EJS学习(一)之特性、安装、工作原理
前言 EJS,"E" 代表 "effective",即[高效],EJS 是一套简单的JavaScript模板,EJS 没有如何组织内容的教条:也没有再造一套迭代 ...
- 如何编写高质量的js代码--底层原理
转自: 如何编写高质量的 JS 函数(1) -- 敲山震虎篇 本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/7lCK9cHmunvYlbm ...
- require.js工作原理(初始)
详情:请见阮一峰老师的日志:http://www.ruanyifeng.com/blog/2012/11/require_js.html: 导入:<script data-main=" ...
- 图解WebGL&Three.js工作原理
“哥,你又来啦?”“是啊,我随便逛逛.”“别介啊……给我20分钟,成不?”“5分钟吧,我很忙的.”“不行,20分钟,不然我真很难跟你讲清楚.”“好吧……”“行,那进来吧,咱好好聊聊” 一.我们讲什么? ...
随机推荐
- Python学习之--函数/生成器/装饰器
Function,函数,主要是为了:1提高代码的复用程度,2将程序模块化. 定义函数 在Python中,使用def 用来定义函数,一般函数的定义如下: def name(arg1,arg2,....) ...
- Solr+HBase
- _strupr _wcsupr _mbsupr
将字符串转化为大写的形式(Convert a string to uppercase.)定义: char *_strupr( char *string ); wchar_t *_wcsupr( wch ...
- bash: express: command not found及vue连接数据库调接口
今天在使用express -e . 的命令时,cmd给我报了一段不识别的错误: bash: express: command not found ,在网上查了一下,有人指出是express4的版本将命 ...
- Leetcode496.Next Greater Element I下一个更大的元素1
给定两个没有重复元素的数组 nums1 和 nums2 ,其中nums1 是 nums2 的子集.找到 nums1 中每个元素在 nums2 中的下一个比其大的值. nums1 中数字 x 的下一个更 ...
- switch...case...之替换方案一
很多时候,当switch中有N个分支,且分支数已达10+,每个分支都是一个不小的方法体,那我们是不是应该考虑换一种方式来实现这个分支. 而我目前所能想到的是会用到如下几种方法. 1.Action 2. ...
- JAVA面试常见问题之数据库篇
1.MySQL 索引使用的注意事项 更新频繁的列不要加索引 数据量小的表不要加索引 重复数据多的字段不要加索引,比如性别字段 首先应该考虑对where 和 order by 涉及的列上建立索引 2.D ...
- 2018-2019年中国CDN市场发展报告:阿里云成为中国CDN市场的领军者
近日,权威ICT市场咨询机构计世资讯(CCW Research)发布<2018-2019年中国CDN市场发展报告>,报告显示,当前,随着新型信息技术在中国不断应用,以及互联网化新业务的快速 ...
- 洛谷P4022 熟悉的文章
题意:给定一个串集合s,每次给定一个串t,询问一个最大的L,使得存在一种划分能把t划分成若干个子串, 其中好的子串总长不小于0.9|t|.好的子串定义为长度不小于L且是s中某一个串的子串. 解:发现这 ...
- JS字符串的相关方法
1.字符方法 charAt()和charCodeAt(),都接收一个参数,charAt()返回的是给定位置的字符,charCodeAt()返回的是给定位置字符的字符编码.如: <script&g ...