js中this的指向

JS—-this指向（一）

平时用this有些混乱，所以写个总结。

没有箭头函数之前，我们说this就是函数运行时所在的环境对象，但是在箭头函数中this就是定义时所在的对象，先说大家熟知的：函数运行时所在的环境对象。

1、作为函数调用，this指向全局对象

var q = 'window'
var func = function {
    console.log(this.q)
}

func()   //window

2、作为对象的方法调用，该对象即为调用上下文，this指向该对象。

var q = 'window'
var func = function() {
    console.log(this.q)
}

var obj = {
    q: 'obj',
    func: func,
    anotherObj: {
        q: 'anotherObj',
        func: func
    }
}

obj.func()   //obj
obj.anotherObj.func() //anotherObj

3、作为构造函数调用，构造函数试图初始化这个新创建的对象，并将这个对象作为其调用上下文，this 指向这个新创建的对象。

var q = 'window'

function Func() {
    this.q = 'Func'
    console.log(this.q)
}

var obj = new Func  //Func

console.log(this.q)  //window

4、通过函数的call/apply方法间接调用, call/apply方法的第一个参数是调用上下文，在函数体内，通过this获得对它的引用。

var q = 'window'

function func() {
　console.log(this.q)
}

var obj = {
 q: 'obj'
}

func.apply()  //window
func.call() //window

func.apply(obj) //obj
func.call(obj) //obj

JS—-this指向（二）

箭头函数中this对象就是定义时所在的作用域，也就是说箭头函数本身没有this，内部的this就是外层代码块作用域中的this。

1、独立函数

var a = 0
var test = ()=> {
    var a = 1
    console.log(this.a)
}

test()  //0

该箭头函数在全局环境中定义，即this指向window

2、对象的方法

var a = 0
var obj = {
    a: 1,
    foo: ()=> {
        console.log(this.a)
    }
}

obj.foo()  //0

即：
var a = 0
var obj = new Object
obj.a = 1
obj.foo = ()=> {
    console.log(this.a)
}
obj.foo()

如上所示，foo在全局中定义,所以this指向window，那么如何使this指向obj?

根据上一篇介绍，当函数作为对象的方法调用时this指向该对象，可以这样改写：

var a = 0
function foo(){
    var func = () => {
        console.log(this.a)
    }
    return func
}
var obj = {
    a : 1,
    foo:foo
}
obj.foo()()  //1

func在foo调用时定义，此时的foo所在作用域为obj，因此this指向obj

3、构造函数,因箭头函数没有this,固不能用作构造函数，否则会报错

var foo = ()=> {
    console.log(this)
}
var boo = new foo()  //foo is not a constructor

4、bind/call

var a = 0

var func = ()=> {
    console.log(this.a)
}

var obj = {
    a: 1
}

func.call(obj)  //0

如上：func定义在全局，因此打印0，同对象方法，我们可以通过如下改写，打印出1

var a = 0

var func = function() {
    var boo = ()=> {
        console.log(this.a)
    }
    return boo
}

var obj = {
    a: 1
}

func.call(obj)() //1

 转载自：http://www.daqianduan.com/6776.html

http://www.daqianduan.com/6790.html