js this指向分析

Posted 2020-10-06 worldly1013

一、普通函数

　　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的理解几乎完全是错误的