js--this的四种调用模式

前言

在学习js高级部分的时候，看到了函数和方法之前的不同，但在其他语言上基本上函数和方法是一个东西，为什么会这样呢？于是我就深究了一下，具体体现在四种形态上面，请容许我简单的来介绍一下。

内容

函数形态：

这是最普通的函数调用，经常可以见到。

// 声明式函数
function fn1 () {
   console.log(this);
}
// 函数表达式函数
var fn2 = function() {
   console.log(this);
};
// 调用 函数中this表示全局对象，在浏览器中就是指window
fn1();   //window
fn2();   //window

方法形态：

将函数赋值给某一个对象的成员，这时候函数就是这个对象的属性，然后我们再调用这个函数的时候，那么就称为方法调用

var obj = {
  name: "zhangSan",
  sayHi: function () {
    //this.xxx
    console.log(this);
    var that = this;
    (function(){
        //that.xxx
    })();
  }
};
obj.sayHi(); //obj对象

js中函数和方法不是同一方法体，体现在this上;外面用this，里面用that

构造器形态：

就是构造函数
过程：var p =new Person()
1、new创建了对象，并开辟了控件
2、将对象的引用地址传递给函数，在函数中用this接收
3、构造方法执行结束，返回this
改变了对象的返回值，如果函数的返回值是一个对象，就按照返回值来返回；如果不是一个对象就忽略返回值，直接返回

function Person() {}
var tom = new Person(); // 这就是构造器函数的调用 

// 构造函数调用的详细过程
// 1 会在内部创建一个对象o
// 2 给对象赋值(this), 然后执行各种操作
// 3 返回这个对象o 

// 构造函数的返回值：
// 有一个默认的返回值，新创建的对象（实例）； 
// 当手动添加返回值后（return语句）：
//    1. 返回值是基本数据类型-->真正的返回值还是那个新创建的对象（即实例）
//    2. 返回值是复杂数据类型（对象）-->真正的返回值是这个对象

上下文形态：

本质–对象借用不属于该对象的方法（函数），即我们自定义this的指向
语法：
1、函数.apply(对象,[参数列表])
2、函数.call(对象，[arg1],[arg1],[arg3]…[argn]

var obj = { //伪数组
    0:"abc",
    1:"def",
    2:"hig",
    length:3
};
var arr = [].concat.apply([],obj); //把obj和[]空数组拼起来然后返回给arr
console.log(arr);
function test(){
    console.log(this);
}
test.apply(1);
test.apply("abc");
test.apply(true);
test.apply(window);
//当使用call、apply传入的第一个参数为值类型时会将值类型转换成对应的对象（也就是对应的引用类型），然后赋值给this
//的那个传入的第一个参数为null/undefined的时候会把this赋值为window
//借用构造函数实现继承
function Person(){
    this.name = "张三";
    this.age = 18;
}
function Student(){
    Person.apply(this);
}
var stu = new Student();
console.log(stu);                      //打印出来的就是张三、18

总结

及时总结，多多回顾，获得的知识、技能将会增多。

end

谢谢您的阅读！