js中的this，call及apply

在前端网看了这么一篇文章，觉得讲得还不错，不深入但易懂，所以我这里把这个经典的问题也记下来。

1：声明式函数与定义函数表达式

console.log(f1);//f1()
console.log(f2);//undefine
function f1(){
    console.log('f1');
    console.log(this);//window
}
var f2 = function(){
    console.log('f2');
}

f1函数为声明式，f2为表达式；两者区别就在于函数的声明是在预处理的时候也就是构造执行环境的时候函数的定义和赋值都完成了，定义函数表达式是在js顺序执行到函数定义的时候赋值；当然，var声明变量的时候同样会提前，因此f2已经定义但未辅助打印了undefined。

2：函数里的this

执行刚刚的f1()，tihs被console出来是window；这是因为我们只做了一次实例化操作，都只是在实例化window对象，所以打印出来的this都是指向window；然后再看下面代码

var obj = {
        name:"cjl",
        job:"webFront",
        show:function(){
            console.log(this);//Object {name: "cjl", job: "webFront"}
        }
    };
var Obj1 = new Object();
Obj1.name = "cjl1";
Obj1.job = "webFront1";
Obj1.show = function(){
    console.log(this);//Object {name: "cjl1", job: "webFront1"}
};
obj.show();
Obj1.show();

上面两段代码this都指向的实例化的一个对象，两者是等价的：第一种是用字面量的方式定义的一个对象； 第二种则是用new操作符（关键字）定义的。

new操作符的作用：

（1）、创建一个新的对象；

（2）、将构造函数的作用域赋给新对象（因此this就指向了这个新对象）；

（3）、执行构造函数中的代码（this.xxx就为这个新对象添加某些属性）；

（4）、返回新的对象。

function Person(name,sex,age,job){
        this.name = name;
        this.sex = sex;
        this.age = age;
        this.job = job;
        this.showPerson = function(){
            console.log(this);//Person {name: "cjl", sex: "male", age: 25, job: "webFront"}
        }
    }

　　Person()
　　window.showPerson() //window对象

var person = new Person("cjl", "male", 25, "webFront")
person.showPerson()

如果不用new操作符实例化Person函数，this指向的还是window，否则就是指向返回的新的对象。我们一般把构造函数定义为首字母大写来模拟一个类的概念也以此区分普通函数。

3.apply和call

这两个方法经常在关于prototype原型的时候看到，但现在咱们先不管原型，单说这两个方法，我把它们理解成为扩展、继承的意思；传递参数的时候有点不同，apply方法只能传入一组参数数组，call方法按普通参数传递方法传递（我试过数组也行）

var name = "cjl"
function fn(name){
    console.log(name);
    console.log(this.name);
    console.log(this);
}
fn("1");//1 cjl window
var obj = {
  name:"cjl1"
};
fn.call(obj,"2");//2 cjl1 Object {name: "cjl1"}

我们定义了一个fn函数，接着定义了一个对象；call就相当于让obj也拥有了fn函数的方法。