javascript：函数的四种调用模式（this指向）

函数的四种调用模式

根据函数内部this的指向不同，可以将函数的调用模式分成4种

1. 函数调用模式
2. 方法调用模式
3. 构造函数调用模式
4. 上下文调用模式（借用方法模式）

函数：当一个函数不是一个对象的属性时，我们称之为函数。
方法：当一个函数被保存为对象的一个属性时，我们称之为方法。

函数调用模式

如果一个函数不是一个对象的属性时，就是被当做一个函数来进行调用的。此时this指向了window

function fn(){
  console.log(this);//指向window
}
fn();

方法调用模式

当一个函数被保存为对象的一个属性时，我们称之为一个方法。当一个方法被调用时，this被绑定到当前对象

var obj = {
  sayHi:function(){
    console.log(this);//在方法调用模式中，this指向调用当前方法的对象。
  }
}
obj.sayHi();

构造函数调用模式

如果函数是通过new关键字进行调用的，此时this被绑定到创建出来的新对象上。

function Person(){
  console.log(this);
}
Person();//this指向什么？
var p = new Person();//this指向什么？

总结：分析this的问题，主要就是区分函数的调用模式，看函数是怎么被调用的。

• 猜猜看：

//分析思路：1. 看this是哪个函数的  2. 看这个函数是怎么调用的，处于什么调用模式
//题目一：
var age = 38;
var obj = {
    age: 18,
    getAge: function () {
        console.log(this.age);
    }
}

var f = obj.getAge;
f();//???


//题目二
var age = 38;
var obj = {
  age:18,
  getAge:function () {
    console.log(this.age);//???
    function foo(){
      console.log(this.age);//????
    }
    foo();
  }
}
obj.getAge();
obj["getAge"]();


//题目三：
var length = 10;
var age = 18;
function fn() {
    console.log(this.length);
}
var arr = [fn, "222"];
fn();
arr[0]();

//题目四：
// 面试题5:
var length = 10

function fn() {
    console.log(this.length)
}
var obj = {
    length: 5,
    method: function (fn) {
        fn() 
        arguments[0]();
    }
}
obj.method(fn, 10, 5);

几种特殊的this指向

• 定时器中的this指向了window，因为定时器的function最终是由window来调用的。
• 事件中的this指向的是当前的元素，在事件触发的时候，浏览器让当前元素调用了function

上下文调用模式

上下文调用模式也叫方法借用模式，分为apply与call

使用方法： 函数.call() 或者 函数.apply()

call方法(一般可以用于)

call方法可以调用一个函数，并且可以指定这个函数的this指向

例如：

1. 伪数组借用数组方法

//所有的函数都可以使用call进行调用
//参数1：指定函数的this，如果不传，则this指向window
//其余参数：和函数的参数列表一模一样。
//说白了，call方法也可以和()一样，进行函数调用，call方法的第一个参数可以指定函数内部的this指向。
fn.call(thisArg, arg1, arg2, arg2);
var a = {
    0: 1,
    1: 2,
    2: 3,
    length:3;
};
Array.prototepy.push.call(a,4,5); //借用数组方法插入元素

2. 借用构造函数继承

function Person(name,age,gender){
    this.name = name;
    this.age = age;
    this.gender = gender;
}
function Chinese(name,age,gender,skin){
    Person.call(this,name,age,gender);
    this.skin = skin || "yellow";
}
var xm = new Chinese("xm",18,"female");

apply方法

apply跟call方法类似，改变this指向执行，只是函数参数放在一个数组或伪数组里

.apply((thisArg, args);

bind方法

语法：var newFn = fn.bind(thisaArg);

参数1：指定修改的this

作用：创建并返回一个跟fn一样的函数，新的函数中的this被固定为参数1