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

2、構造函數

一、new 操做符做用：

　　new操做符會建立一個對象實例

具體以下：

1）建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型。

2）屬性和方法被加入到 this 引用的對象中。

3）新建立的對象由 this 所引用，而且最後隱式的返回 this 。

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

二、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

 

3、箭頭函數

　　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的理解幾乎徹底是錯誤的