javascript中的this作用域详解——针对初学者

//#######针对一名初学者对this的指向问题的理解#########
//1.全局的函数调用
function test(){
    this.name="global this"
    console.log(this.name)
}
test(); //global this

var name="global this"
function test(){
    console.log(this.name)
    console.log(this)
}
test(); //global this    //window

//test是全局性的方法，属于全局性调用，因此this指向window，下例子再次证明this 指向window
var name="global this"
function test(){
    var name="XXX"
    console.log(this.name)
}
test(); //global this    //window

//##结论：对于全局的方法调用,this指向的是全局对象window，即调用方法所在的对象

//2.对象方法的调用
function showName(){
    var name="testName";
    console.log(this.name)
}
// var obj={};
// obj.name="name";
// obj.show=showName;
// obj.show();   //name
obj={name:"name",show:showName}
obj.show();        //name
//##结论:如果函数作为对象的方法调用，this指向的是这个上级对象，即调用方法的对象

//3.构造函数的调用
var a="000"
function showa() {
    this.a="111";
}
var obj= new showa();    //对象实例化（换句话说对象obj是构造函数showName的实例）
console.log(obj.a);    //111
//变形：
var a="000"       //全局变量a
function showa() {
    this.a="111";
    this.b=function(){
        return this.a
    }
}
var obj= new showa();    //对象实例化（换句话说对象obj是构造函数showName的实例）
obj.a="222"
obj.b()    //222

//##结论：构造器函数中的this指向新创建的对象本身（构造器函数showa中的this指向他的实例obj这个对象，且对obj.a赋值，不会影响全局变量a和构造函数showa里面this.a的值）
//对于跟我一样是新手的人来说，这个不是很好理解，this构造函数的指向问题涉及到原型和原型链，下次继续写一篇站在新手的角度理解原型和原型链

//4.apply和call调用时的this
var value="global value";
function fnA(){
    this.value="AAA"
}
function fnB(){
    console.log(this.value);
}
fnB(); //global value  因为是在全局中调用的FunB(),this.value指向全局的value
fnB.call(window); //Global value   this指向window对象，因此this.value指向全局的value
fnB.call(fnA());   //AAA      this指向参数fnA()   即fnA对象

FunB.apply(window); //Global value
FunB.apply(new FunA()); //AAA

//##结论：apply和call都是为了改变函数体内部的this指向。