js this指向分析

一、普通函数

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

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

　　1）　function a() {
            var name = 'xiaoming'
            console.log(this) // window
            console.log(this.name) // undefined
        }

        window.a()

   2）  var b = {
            name: 'xiaoming',
            like: function() {
                console.log(this) // b
            }
        }
        b.like()

   3）  var c = {
            name: 'xiaoming',
            intro: {
                like: 'drinking',
                age: function() {
                    console.log(this)
                }
            }
        }
        c.intro.age() // intro
        var d = c.intro.age
        d() // window  **  this的最终指向的是那个调用它的对象 , 此时通过赋值后调用他的是window

二、构造函数

1、new 操作符作用：

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

具体如下：

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

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

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

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

2、call 、apply 、bind 用法

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

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

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

// call Function.call(thisObj,arg1,arg2,arg3)
// call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

1） var f = {
            name: 'xiaoming',
            intro: {
                like: 'drinking',
                age: function() {
                    console.log(this.like)
                }
            }
 }

 var g = f.intro.age
 f.intro.age()     // drinking
 g()                  // undefined
 g.call(intro)     // 将this指针指向改为指向intro  drinking

2）  // bind  
 var h = {
            name: 'xiaoming',
            intro: {
                like: 'drinking',
                age: function() {
                    console.log(this.like)
                }
            }
 }
  var i = f.intro.age
  var j = i.bind(intro)
   j() // bind  需要调用才能执行

 

3）构造函数返回对象

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

function K() {
   this.name = 'xiaoming'
   return {}
}    

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

 

三、箭头函数

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

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

  var o = {
            a: 12,
            b: {
                a: 11,
                fn: () => {
                    console.log(this.a)    // this 指向外层的window
                }
            }
        }
        o.b.fn()

 

 

 function P(){
      this.index = 1;
      setInterval(() => console.log(this.index++) , 100)  // ---> this 指向 P
 }
 var exp1 = new P()
 console.log(exp1())

 function Q(){
     this.index = 1;
     setInterval(
         function(){
              console.log(this.index++)   // ---> this 指向 window
          },
          100
          )
     }
 var exp2 = new Q()
 console.log(exp2())

 

 

参考：

1）图解javascript this指向什么？

2）箭头函数中this的用法

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