浅谈JavaScript 中 this 指向

在众多编程语言中，this指向问题可谓是让很多学习语言的人苦不堪言，就拿Javascript来说，this一会儿指代window,而有时却指向的是另一个的对象，其实只需要记住一句话，this 永远指向函数运行时所在的对象，而不是函数被创建时所在的对象。

1.作为方法调用

var obj1  ={
    name : pchess,
    age : 18,
    fn : function (){
        console.log(this)
    }
}
obj1.fn()

输出结果为：

此处的fn为obj1的一个方法，obj1.fn() 则为调用了obj1自己的方法，所以this指向的是自己，所以打印的是obj1

2.作为对象调用

function obj2() {
    var height = 20;
    console.log(this.height);
    console.log(this);
}

obj2()

输出结果为：

此处的this.height的值为undefined , this的值为window,  但是函数中height的值明明是20,为什么却没有打印出来，这是因为在此处调用this的实际是  window 这个对象 ,而不是obj2这个对象， 如下图：  

function obj2() {
    var height = 20;
    console.log(this.height);
    console.log(this);
}

window.obj2()

3.构造函数调用【较为抽象】

function obj3(){
    this.txt = "好好学习，天天向上"  //此时的this指向obj3
}

var fn = new obj3();
console.log(fn.txt)  // 此时的this已经重新指向一个新对象fn

输出结果为：

使用new调用的函数，this将会被绑定到新构造的对象中，new关键字会创建一个空的对象，然后会自行调用apply方法，将this指向这个空对象，这样原先this指向的obj3将会被fn所代替

 

最后说一下我的记忆方法，就是  谁在  .  前面，就是谁调用，也就是this指向谁，是不是感觉很简单，来试试下面的测试题，大家可以自行测试一下

//例题一

k = "123";

function obj4(){
    var k = "456"
    console.log(this.k)
}

var fn1 = {
    k : "789",
    fn : obj4
}

var fn2 = {
    k : "JQK",
    fn : obj4
}

fn1.fn()
fn2.fn()
//切记，this被谁调用，this就指向谁
//最后的打印结果是多少呢？？

//例题二

var  obj5 = {
    height : 20,
    fun : function (){
        console.log(this.height)
    }
}

var  obj6 = {
    height : 10,
    fun : obj5.fun
}

obj6.fun()

//输出结果是多少呢？

//例题三


var obj7 = {
    a:10,
    b:{
        a:20,
        fn:function(){
            console.log(this.a);
            console.log(this); 
        }
    }
}
var c = obj7.b.fn;
c();

更多学习资料请添加公众号“码上学习鸭”