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工作原理的更多相关文章

  1. 探索JS引擎工作原理

    JavaScript 从定义到执行,JS引擎在实现层做了很多初始化工作,因此在学习 JS 引擎工作机制之前,我们需要引入几个相关的概念:执行环境栈.全局对象.执行环境.变量对象.活动对象.作用域和作用 ...

  2. 分享-结合demo讲解JS引擎工作原理

    代码如下: var x = 1; function A(y){ var x = 2; function B(z){ console.log(x+y+z); } return B; } var C = ...

  3. node.js基本工作原理及流程

    概述 Node.js是什么 Node 是一个服务器端 JavaScript 解释器,用于方便地搭建响应速度快.易于扩展的网络应用.Node.js 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效,非 ...

  4. 探索JS引擎工作原理 (转)

    这篇文章从相对底层的角度介绍了js引擎的工作 引入了 静态作用域 执行环境上下文(context) 等概念 , http://www.cnblogs.com/onepixel/p/5090799.ht ...

  5. js的工作原理

    JavaScript就是所谓的客户端脚本语言,是一种在互联网浏览器(浏览器也称为Web客户端,因为它连接到Web服务器上,以下载页面)内部运行的计算机编程语言. 也就是说,如果一个网页里有js代码,那 ...

  6. EJS学习(一)之特性、安装、工作原理

    前言 EJS,"E" 代表 "effective",即[高效],EJS 是一套简单的JavaScript模板,EJS 没有如何组织内容的教条:也没有再造一套迭代 ...

  7. 如何编写高质量的js代码--底层原理

    转自: 如何编写高质量的 JS 函数(1) -- 敲山震虎篇   本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/7lCK9cHmunvYlbm ...

  8. require.js工作原理(初始)

    详情:请见阮一峰老师的日志:http://www.ruanyifeng.com/blog/2012/11/require_js.html: 导入:<script data-main=" ...

  9. 图解WebGL&Three.js工作原理

    “哥,你又来啦?”“是啊,我随便逛逛.”“别介啊……给我20分钟,成不?”“5分钟吧,我很忙的.”“不行,20分钟,不然我真很难跟你讲清楚.”“好吧……”“行,那进来吧,咱好好聊聊” 一.我们讲什么? ...

随机推荐

  1. Activiti流程定义部署、删除

    1.部署流程定义 部署流程定义也可以认为是增加流程定义.  首先创建流程引擎对象(公用的方法)   private ProcessEngine processEngine = ProcessEngin ...

  2. 网络爬虫技术Jsoup

    Jsoup介绍:Jsoup 是一个 Java 的开源HTML解析器,可直接解析某个URL地址.HTML文本内容 Jsoup主要有以下功能: 1. 从一个URL,文件或字符串中解析HTML 2. 使用D ...

  3. 在HBase之上构建SQL引擎

  4. linux下mysql导入导出sql文件

    使用mysqldump导出数据库: # mysqldump -u root -p gzy > gzy.sql # mysqldump -u 数据库连接用户名 -p 目标数据库 > 存储的文 ...

  5. scope标签笔记

      scope的几个属性详解: 1.compile:默认值 他表示被依赖项目需要参与当前项目的编译,还有后续的测试,运行周期也参与其中,是一个比较强的依赖.打包的时候通常需要包含进去. 2.test: ...

  6. js匿名函数与闭包作用

    http://www.jb51.net/article/79238.htm 1 闭包允许内层函数引用父函数中的变量,但是该变量是最终值 当mouseover事件调用监听函数时,首先在匿名函数( fun ...

  7. 前端面试题之一HTML

    一.doctype作用? 严格模式与混杂模式如何区分?它们有何意义? (1)<!doctype>声明位于文档中的最前面的第一行,其作用告知浏览器用什么标准解析这个文档,并以浏览器支持的最高 ...

  8. jeecms技术预研

      版权声明:本文版权归云焰所有,转载请注明. https://blog.csdn.net/yan_dk/article/details/27874461 1    Jeecms框架 1.1      ...

  9. 事务一致性理解 事务ACID特性的完全解答

    A  原子性 事务管理者多个小操作,他们同时完成或者同时不完成就是原子性 C 一致性 一致性,是一个很相对的,很主观的概念, 一致性 描述的是 事务 从一个一致的状态变成 另一个一致的状态. 一致性需 ...

  10. Hadoop中map数的计算

    转载▼ Hadoop中在计算一个JOB需要的map数之前首先要计算分片的大小.计算分片大小的公式是: goalSize = totalSize / mapred.map.tasks minSize = ...