JavaScript函数调用及this参数

JS有4种方式调用函数

• 作为一个函数(function)——fn()直接被调用
• 作为一个方法(methods)——obj.fn()，关联在对象上调用，实现面向对象编程
• 作为一个构造函数(constructor)——new Fn()，实例化一个新的对象
• 通过apply或call方法调用

对应的this的指向：

• 函数调用：window或undefined
• 方法调用：obj对象
• 构造函数调用：实例化的对象
• aplly或call：第一个参数

详解：

函数调用

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

严格模式下：

function fn(){
    "use strict"
    console.log(this);
}
fn(); // undefined

方法调用

var obj = {
    fn : function(){
        console.log(this);
    }
};
obj.fn() // 返回obj对象：{fn: ƒ}

构造函数调用

function Cat(x,y){
    this.x = x;
    this.y = y;
    console.log(this);
}
var c = new Cat(1,2);

c // Cat{x:1,y:2} 指向c对象

es6写法

class Point{
    constructor(x,y){
        this.x = x;
        this.y = y;
        console.log(this);
    }
}
var p = new Point(1,2)

p // Point{x:1,y:2} 指向p对象

aplly或call

var name = '张三';
var age = '24';
var obj = {
    name: this.name, // 此处的this指向window
    objAge: this.age, // 此处的this指向window
    fun: function(fm,t){
        console.log(this)
        console.log(this.name+'年龄 '+this.age + ' 来自'+fm+' 去往'+t); // 此处的fm和t就是要传入的参数
    }
}
var pd = {
    name: '彭丹',
    age:18
}
obj.fun.call(pd,'长沙','上海'); // 彭丹 年龄18 来自长沙 去往上海
obj.fun.apply(pd,['长沙','上海']); // 彭丹 年龄18 来自长沙 去往上海
obj.fun.bind(pd,'长沙','上海')(); // 彭丹 年龄18 来自长沙 去往上海
obj.fun.bind(pd,['长沙','上海'])(); // 彭丹 年龄18 来自长沙上海 去往undefined

this打印出来全都是{name: "彭丹", age: 18}，就是第一个参数。