函数的执行方式以及this的指向

函数的执行方式总共有四种:

不可修改的三种执行方式

• 全局函数

// 全局函数中this 指向的就是Window
function fn() {
    console.log(this);
}

fn(); // === window.fn();

• 对象函数

// 对象函数中的this 指向的就是他自身的对象obj
var obj = {
    sayHi: function(){
        console.log(this);
    }
    sayBye: fn; // 取出fn的地址,赋值给obj对象的sayBye属性
}

obj.sayHi();  // Object

• 构造函数

// 构造函数中的this 指向的就是这个构造函数
function Person() {
    console.log(this);
}

// new 关键字
// 1.创建了一个空对象,作为将要返回的对象实例
// 2.this指向了这个对象
new Person(); // 构造函数Person

Person();  // 指向Window

注意点:
this的指向,不是取决于这个函数怎么声明的,二十取决于这个函数怎么调用的!!!

可修改的第四种执行方式(上下文模式)

动态修改this的三种语法

1. call()

// 语法: 函数名.call(修改后的this指向,arg1, arg2, ......)
    function fn(a,b) {
        console.log(a + b);
        console.log(this);
    }
    fn(1, 2);  // this -> Window
    fn.call({obj:'xx'}, 3, 4); // this -> {obj:'xx'}

2. apply()

// 语法: 函数名.apply(修改后的this指向,数组或者伪数组)
    function fn(a,b) {
        console.log(a + b);
        console.log(this);
    }
    fn(1, 2);  // this -> Window
    fn.call({obj:'xx'},[3, 4]); // this -> {obj:'xx'}

3. bind()

// 语法: 函数名.bind(修改后的this指向,arg1, arg2, ......)
// 特点: 不会立即执行这个函数,而是返回一个修改this之后的函数
// 使用场景: 定时器、事件处理函数
    function fn(a,b) {
        console.log(a + b);
        console.log(this);
    }
    fn(1, 2);  // this -> Window
    var newFn = fn.bind({obj:'xx'});
    newFn(3, 4); // this -> {obj:'xx'}