js this指向分析

一、普通函数

  1、this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁;

    实际上this的最终指向的是那个调用它的对象

 1   1) function a() {
 2             var name = ‘xiaoming‘
 3             console.log(this) // window
 4             console.log(this.name) // undefined
 5         }
 6
 7         window.a()
 8
 9    2)  var b = {
10             name: ‘xiaoming‘,
11             like: function() {
12                 console.log(this) // b
13             }
14         }
15         b.like()
16
17    3)  var c = {
18             name: ‘xiaoming‘,
19             intro: {
20                 like: ‘drinking‘,
21                 age: function() {
22                     console.log(this)
23                 }
24             }
25         }
26         c.intro.age() // intro
27         var d = c.intro.age
28         d() // window  **  this的最终指向的是那个调用它的对象 , 此时通过赋值后调用他的是window

二、构造函数

1、new 操作符作用:

  new操作符会创建一个对象实例

具体如下:

1)创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型。

2)属性和方法被加入到 this 引用的对象中。

3)新创建的对象由 this 所引用,并且最后隐式的返回 this 。

1  var obj = {};
2  obj.__proto__ = Base.prototype;
3  Base.call(obj);

2、call 、apply 、bind 用法

  这三种方法都是函数实例上的方法,都可以改变this上下文环境

  1)call、apply 如果第一个参数传null , 则会将this指向全局环境 ; apply 以数组的形式传递多个参数

  2) bind 会创建一个新的函数体,通常用作绑定原来函数的this值

 1 // call Function.call(thisObj,arg1,arg2,arg3)
 2 // call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
 3
 4 1) var f = {
 5             name: ‘xiaoming‘,
 6             intro: {
 7                 like: ‘drinking‘,
 8                 age: function() {
 9                     console.log(this.like)
10                 }
11             }
12  }
13
14  var g = f.intro.age
15  f.intro.age()     // drinking
16  g()                  // undefined
17  g.call(intro)     // 将this指针指向改为指向intro  drinking
18
19 2)  // bind
20  var h = {
21             name: ‘xiaoming‘,
22             intro: {
23                 like: ‘drinking‘,
24                 age: function() {
25                     console.log(this.like)
26                 }
27             }
28  }
29   var i = f.intro.age
30   var j = i.bind(intro)
31    j() // bind  需要调用才能执行

3)构造函数返回对象

  当构造函数内部返回对象时,此时 this 指向返回的那个对象

1 function K() {
2    this.name = ‘xiaoming‘
3    return {}
4 }    

 var l = new K()  console.log(l.name) // undefine

三、箭头函数

  1)  “箭头函数” 没有自己的this,其派生的this遵循词法作用域规则,因此this解析时总是指向其外层作用域的this

  2) “箭头函数”的this,总是指向定义时所在的对象,而不是运行时所在的对象

 1   var o = {
 2             a: 12,
 3             b: {
 4                 a: 11,
 5                 fn: () => {
 6                     console.log(this.a)    // this 指向外层的window
 7                 }
 8             }
 9         }
10         o.b.fn()
 1  function P(){
 2       this.index = 1;
 3       setInterval(() => console.log(this.index++) , 100)  // ---> this 指向 P
 4  }
 5  var exp1 = new P()
 6  console.log(exp1())
 7
 8  function Q(){
 9      this.index = 1;
10      setInterval(
11          function(){
12               console.log(this.index++)   // ---> this 指向 window
13           },
14           100
15           )
16      }
17  var exp2 = new Q()
18  console.log(exp2())

参考:

1)图解javascript this指向什么?

2)箭头函数中this的用法

3)关于箭头函数this的理解几乎完全是错误的

  

  

时间: 2024-10-12 22:06:31

js this指向分析的相关文章

Node.js内存泄漏分析

在极客教育出版了一个视频是关于<Node.js 内存泄漏分析>,本文章主要是从内容上介绍如何来处理Node.js内存异常问题.如果希望学习可前往极客学院: 本文章的关键词 - 内存泄漏 - 内存泄漏检测 - GC分析 - memwatch 文章概要 由于内存泄漏在Node.js中非常的常见,可能在浏览器中应用javascript时,对于其内存泄漏不是特别敏感,但作为服务器语言运行时,你就不得不去考虑这些问题.由于很小的逻辑可能导致服务器运行一天或者一个星期甚至一个月才会让你发现内存不断上涨,而

jqueryui.position.js源码分析

最近要写前端组件了,狂砍各种组件源码,这里分析一款jqueryui中的posistion插件,注意,它不是jqueryui widget,首先看下源码总体结构图 1.看到$.fn.position 是不是很熟悉?嗯,就是将position方法挂载到原型上,然后控件就可以直接调用了, 2.$.ui.position 这个对象是,用来进行冲突判断的,什么冲突?就是元素与父容器所拥有的空间以及当前可用窗口的控件,默认情形下,如果冲突则采用反转方向的方式显示:对这一点不要惊讶,一切都是为了正常显示而用的

MyVoix2.0.js 源码分析 WebSpeech与WebAudio篇

楔 子 随着移动互联网时代的开启,各种移动设备走进了我们的生活.无论是日常生活中人手一部的手机,还是夜跑者必备的各种智能腕带,亦或者是充满未来科技感的google glass云云,它们正渐渐改变着我们的生活习惯以及用户交互习惯.触摸屏取代了实体按键,Siri开始慢慢释放我们的双手,而leap motion之类的硬件更是让我们彻底不需要接触IT设备便能通过手势控制它们.在这样的大背景下,前端的交互将涉及越来越多元的交叉学科,我们正如十几年前人们经历Css的诞生一样,见证着一场带动整个行业乃至社会的

js拖拽分析

js拖拽分析 思路 1.三个鼠标事件,mousedown,mousemove,mouseup 2.可移动性absolute 3.边界限制 得到鼠标点击处和div边界的距离,然后得出top 和 left 的值 具体 mousedown div.onmousedown=function(event){ var event=event||window.event var diffX=event.clientX-div.offsetLeft var diffY=event.clientY-div.off

axios.js 源码分析

axios.js 源码分析 axios.js --> Axios.js --> InterceptorManager.js --> dispatchRequest.js --> transformData.js --> adapters axios 为什么可以在浏览器和服务器上同时运行? 答:因为axios使用了适配器模式,在node中引入http模块请求,在浏览器中使用xhr对象进行请求 axios 如何实现请求和相应的修改 答:通过一个拦截器(InterceptorMan

Backbone.js源码分析(珍藏版)

源码分析珍藏,方便下次阅读! // Backbone.js 0.9.2 // (c) 2010-2012 Jeremy Ashkenas, DocumentCloud Inc. // Backbone may be freely distributed under the MIT license. // For all details and documentation: // http://backbonejs.org (function () { // 创建一个全局对象, 在浏览器中表示为w

Vue.js 源码分析(十) ref属性详解

用法 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素:如果用在子组件上,引用就指向组件实例,例如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <scrip

Vue.js 源码分析(二十三) 高级应用 自定义指令详解

除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令. 官网介绍的比较抽象,显得很高大上,我个人对自定义指令的理解是:当自定义指令作用在一些DOM元素或组件上时,该元素在初次渲染.插入到父节点.更新.解绑时可以执行一些特定的操作(钩子函数() 自定义指令有两种注册方式,一种是全局注册,使用Vue.directive(指令名,配置参数)注册,注册之后所有的Vue实例都可以使用,另一种是局部注册,在创建Vue实例时通过directives属性创建局部指令,局

JS this指向

感谢thinker_creator,文章来源:http://blog.163.com/thinker_creator/blog/static/1019331492009101545251234/ JS中, this的值取决于调用的模式, 而JS中共有4中调用模式: 1. 方法调用模式 当一个函数被保存为对象的一个属性时, 我们称它为一个方法, 当一个方法被调用时, this指向该对象, 如: var obj = { value: 1, getValue: function() { alert(t