函数的四种调用方式

发布日期: 2022-03-14

文章字数: 419

阅读时长: 1 分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // //JS 中的函数调用
        //函数调用的方法一共有 4 种

        //1.作为一个函数调用
        var name = "windowsName";
        function a() {
            var name = "Cherry";

            console.log(this.name);          // windowsName

            console.log("inner:" + this);    // inner: Window
        }
        a();
        console.log("outer:" + this)         // outer: Window复制代码这样一个最简单的函数，不属于任何一个对象，就是一个函数，这样的情况在 JavaScript 的在浏览器中的非严格模式默认是属于全局对象 window 的，在严格模式，就是 undefined。 


        // 2.作为一个对象方法
        //js中在对象内的函数，并将函数值赋给对象的属性即为方法
        var name = "windowsName";
        var a = {
            name: "Cherry",
            fn: function () {
                console.log(this.name);      // Cherry
            }
        }


        // 3.使用构造函数
        function myFunction(arg1, arg2) {
            this.firstName = arg1;
            this.lastName = arg2;
        }

        // This    creates a new object
        var a = new myFunction("Li", "Cherry");
        a.lastName;     // 返回 "Cherry"


        //这就有要说另一个面试经典问题：new 的过程了，
        //(ಥ_ಥ)这里就简单的来看一下 new 的过程吧：伪代码表示：
        var a = new myFunction("Li", "Cherry");

        // new myFunction{
        var obj = {};//1.创建新对象
        obj.__proto__ = myFunction.prototype;//2.设置原型指向,继承函数原型属性
        var result = myFunction.call(obj, "Li", "Cherry");//3.使用call方法改变this指向新对象,这样就可以是参数作为obj的值，而不是window
        return typeof result === 'obj' ? result : obj;//4.判断用户是否需要自己定义一个对象
        // }

        //4.被函数方法调用（call、apply）
        //请看this、apply、call、bind关键字

    </script>

</body>

</html>