深入理解JS函数中this指针的指向

 

函数在执行时,会在函数体内部自动生成一个this指针。谁直接调用产生这个this指针的函数,this就指向谁。

怎么理解指向呢,我认为指向就是等于。例如直接在js中输入下面的等式:

console.log(this===window);//true

情况不同,this指向的对象也不同。例如:

1.  函数声明的情况

var bj=10;
function add(){
    var bj=20;
    console.log(this);//window
    console.log(this.bj);//10
    console.log(bj);//20
    console.log(this.bj+bj);//30
}
add();
window.add();

(1) 执行了add()之后,此时的this指向的是window对象,为什么呢?因为这时候add是全局函数,是通过window直接调用的。所以下面我专门写了个window.add()就是为了说明,全局函数的this都是指向的window。

(2) 就像alert()自带的警告弹窗一样,window.alert()执行之后也是一样的效果。所以只要是   window点   这种调用方式都可以省略掉,因此警告弹窗可以直接使用alert()。

2.  函数表达式

var bj=10;
var zjj=function(){
    var bj=30;
    console.log(this);//window
    console.log(this.bj);//10
    console.log(bj);//30
    console.log(this.bj+bj);//40
}
console.log(typeof zjj);//function
zjj();
window.zjj();

(1) 执行了zjj()之后,函数中的this也是指向window对象。原因和第一个是一样的,都是通过window这个对象直接调用。

3.  函数作为对象的属性去调用------例一

var bj=10;
var obj={
    name:"八戒",
    age:"500",
    say:function(){
        var bj=40;
        console.log(this);//就是obj这个对象
        console.log(this.bj);//undefined
        console.log(this.name);//八戒
    }
}
obj.say();
window.obj.say();

(1) 当obj.say()被执行的时候,此时的this指向的是 obj 这个对象,为什么呢?因为say函数是通过obj这个对象直接调用的。

(2) 那有人可能会问了,obj对象实际上也是通过window对象调用的,为什么this不指向window呢?我认为是因为say这个函数是通过 obj 对象直接调用的,而没有通过 window 对象直接调用,因此this不会指向window。

4.  工厂模式中this的指向------例一

var bj=10;
function fun(a,b){
   console.log(this);//window对象
    var bj=20;
    var sun=new Object();
    sun.one=a;
    sun.two=b;
    sun.say=function(){
        console.log(this);//是sun对象,{one: 2, two: 3, say: ƒ()}
        console.log(this.bj);//undefined
        console.log(this.one);//2
    }
    return sun;
}
var wk=fun(2,3);
wk.say();

  

(1) 话说为什么叫工厂模式,我搞不太清楚,不过这个不重要,重要的是通过这个模式,在每次调用函数的时候,虽然每次都返回的是sun这个对象,但是每个对象都是不相似的,即使内容一样,比如 var sf=fun(2,3); console.log(sf===wk);//false 。

(2) 那为什么say()函数执行之后,this是指向返回的那个对象呢?这个很明显嘛,say()是通过wk这个对象直接调用的,而wk是fun函数返回sun对象。所以这里的this就指向的是返回的对象。所以this.bj为undefined,因为返回的对象中没有bj属性。

(3) 我认为这种模式最重要的还是 renturn sun这个返回语句,这个是必不可少的。

(4) fun(a,b)这个函数中的this指向的是window,原因是执行 var wk=fun(2,3); 的时候,fun函数已经被执行了,并且直接调用它的就是window,所以这时的this是指向的window。

原文地址:https://www.cnblogs.com/liliuyu/p/11505407.html