JS中的this指向

这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战

this作为Javascript语言中的一个关键字。它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。简言之，this是用来指向对象。今天就一下几方面学习一下this：

一般函数

独立函数调用,this指向全局对象

var a = 'foo';
function foo(){
    console.log(this.a);
}
foo();  //foo

这里函数foo()中的this指向全局对象。

严格模式,this绑定undefined

var a = 'foo';
function foo(){
    'use strict'
    console.log(this.a);
}
foo();  //TypeError: Cannot read property 'a' of undefined

在严格模式下，foo()中this指向undefined，所以报错。

箭头函数

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

};
obj.foo(); //foo (use strict : foo)

箭头函数体内的this对象,就是定义该函数时所在的作用域指向的对象,而不是使用时所在的作用域指向的对象.

对象

function foo(){
console.log(this.a);
}
var obj1 = {
a : 1,
foo : foo
};
var obj2 = {
a : 2,
obj1 : obj1
};
obj2.obj1.foo(); //1

var a = 'foo';
function foo(){
console.log(this.a);
}
var obj = {
a : 2,
foo : foo
};
var bar = obj.foo;
bar(); //foo

var a = 'foo';
function foo(){
console.log(this.a);
}
function doFoo(fn){ //fn = obj.foo  隐式赋值
fn();
}
var obj = {
a : 2,
foo : foo
};
doFoo(obj.foo);  //foo

练习题

题1

严格模式下

'use strict'
var a = 10;
function foo(){
    console.log('this1',this);
    console.log(window.a);
    console.log(this.a);
}
console.log(window.foo);
console.log('this2',this);
foo();

结果:

f foo(){...}  
this2 Window{...}  
this1 undefined  
10  
TypeError: Cannot read property 'a' of undefined  

题2

let a = 10;
const b = 20;

function foo(){
    console.log(this.a); //undefined
    console.log(this.b); //undefined
}
console.log(window.a); //undefined
foo();

题3

var name = 'windowsName';
function sayName(){
    var name = 'Jake';
    console.log(this.name);  //windowsName  (严格模式下:TypeError)
    console.log(this); //Window
}
sayName(); //window.sayName()
console.log(this); //Window

function this对于函数中this:运行时this永远指向最后调用它的那个对象

题4

function foo(){
    console.log(this.age);
}

var obj1 = {
    age : 23,
    foo : foo
};

var obj2 = {
    age : 18,
    obj1 : obj1
};

obj2.obj1.foo(); //23

最后调用foo()的是obj1,所以this指向obj1

题5

隐式绑定的隐式丢失问题 第一种:使用另一个变量给函数取别名会发生隐式丢失

function foo(){
    console.log(this.a)
};
var obj = { a : 1, foo};
var a = 2;
var foo2 = obj.foo;

obj.foo(); //1
foo2();  //2

第二种:

function foo(){
    console.log(this.a)
}
var obj = {a:1,foo};
var obj2 = {a:3, foo2: obj.foo};
obj2.foo2(); //3

第三种:

function foo(){
    console.log(this.a)
}
function doFoo(fn){
    console.log(this);  //window
    fn();
}
var obj = {a:1,foo}
var a = 2;
doFoo(obj.foo);  //2

题6

构造函数中的this
new的过程

var a = new Foo("zhang","jake");

new Foo{
    var obj = {};
    obj.__proto__ = Foo.prototype;
    var result = Foo.call(obj,"zhang","jake");
    return typeof result === 'obj'?result:obj;
}

new的过程如下:

var name = 'Jake';
function testThis(){
    this.name = 'jakezhang';
    this.sayName = function (){
        return this.name;
    }
}
console.log(this.name);  //Jake

new testThis();
console.log(this.nam);  //Jake

var result = new testThis();
console.log(result.name);  //jakezhang
console.log(result.sayName());  //jakezhang

testThis();
console.log(this.name);  //jakezhang

题7

function foo(){
    console.log(this.a);  //1
    bar.apply({a:2},arguments);
}
function bar(b){
    console.log(this.a + b); //5
}
var a = 1;
foo(3);

call、apply、bind都可以改变函数的this指向

题8

var name = 'window'
var obj1 = {
  name: 'obj1',

  foo1: function () {
    console.log(this.name)
    return () => {
      console.log(this.name)
    }
  },

  foo2: () => {
    console.log(this.name)
    return function () {
      console.log(this.name)
    }
  }
}


var obj2 = {
  name: 'obj2'
}
obj1.foo1.call(obj2)() //2 2
obj1.foo1().call(obj2)  //1 1
obj1.foo2.call(obj2)()  //window window
obj1.foo2().call(obj2)  //window 2

箭头函数中的this