前端关于this

1>对于有经验得JavaScript开发者来讲this也是一个很是难以理解的复杂机制，在此简单分析一下

      this的指向在函数的定义的时候是肯定不了的，只有在函数执行的时候才能肯定指向谁，实际上this最终指向的是调用他的那个对象(运行时)

2>搞清楚js里面，函数的集中调用方法

1. 普通函数调用
2. 做为方法调用
3. 做为构造函数调用
4. 使用apply/call方法调用
5. function.prototype.bind调用
6. es6箭头函数调用

 总结：谁调用了这个函数或者方法this关键字就是指向谁的

 

 

 

分状况讨论

1>普通函数调用

function sayName() {
    this.name='kobe';
    console.log(this);
    console.log(this.name);
}
sayName();   //window  kobe

这段代码sayName函数做为普通函数调用，实际上做为全局对象Window的一个方法调用的，window.sayName();

 

2>方法调用

var name='kobe';
var person={
    name:'james',
    sayName:function () {
        console.log(this.name);
    }
}

person.sayName();

var person1=person.sayName;
person1();

3>构造函数调用

function  Person(name){
        this.name=name;
    }
    var personA=Person("xl");   
    console.log(personA.name); // 输出  undefined
    console.log(window.name);//输出  xl
    //上面代码没有进行new操做，至关于window对象调用Person("xl")方法，那么this指向window对象，并进行赋值操做window.name="xl".
    
    var personB=new Person("xl");
    console.log(personB.name);// 输出 xl
    //这部分代码的解释见下

4>apply/ca调用

apply和call方法可用来代替另外一个对象调用一个方法，call方法可将一个函数的对象上下文从初始的上下文改变为指定为新的对象，不一样的是就是两个方法的参数是不同的

var obj={
    x:3,
    show:function () {
        console.log('method is called:'+this.x);
    }
}

var obj2={x:4};
obj.show();
obj.show.apply(obj2);
obj.show.call(obj2);