js--this的四种调用模式

曾经终败给现在 2021-09-27 04:02 346阅读 0赞

# 前言 #

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

# 内容 #

## 函数形态： ##

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

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

## 方法形态： ##

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

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\]

# 总结 #

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

# end #

谢谢您的阅读！