《权威指南》笔记 -- 8.2 函数调用

最新推荐文章于 2024-05-22 19:18:52 发布

奇克斯

最新推荐文章于 2024-05-22 19:18:52 发布

阅读量338

点赞数

分类专栏：《JavaScript权威指南》读书笔记

本文链接：https://blog.csdn.net/u010291694/article/details/46786575

版权

《JavaScript权威指南》读书笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

定义时不执行，调用时才执行。

**调用方式，4种:
作为函数
作为方法
作为构造函数
通过call()和apply()调用**

8.2.1 作为函数调用

8.2.2 作为方法调用

当一个方法，是某个对象的属性

1） a.o();
2)  a["o"]();  // 通过方括号访问属性的方式调用
3）a[0]();  //通过索引来访问对象的属性

*：属性方法一般会传入一个隐形的实参，也就是这个对象本身，可以通过this来调用

**: rect.setSize(width,height)  setRectSeize(rect,width,height) 
     这俩个调用的差别在于，this关键字所指向的对象不同，前者指向rect，后者指向window

代码如下：

<!-- 

    函数，当做方法调用时，与当做函数调用时
    this指向的内容不一样

 -->
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset = "utf-8">
</head>
<body>
    <script type="text/javascript">
        var rect = {
            width : 10,
            height: 20,
            setSize : function(x,y){
                var str = "";
                this.width = x;
                this.height = y;
                if(this === rect)
                    str = "setRectSize中的this指向rect<br>";
                else
                    str = "setRectSize中的this不指向rect<br>";
                document.write(str);
            }

        }; 

        function setRectSize(r,w,h)
        {
            var str = "";
            r.width = w;
            r.height = h;
            if(this===window)
                str = "setRectSize中的this指向window<br>";
            else
                str = "setRectSize中的this不指向window<br>";
            document.write(str);
        }
        rect.setSize(1,2);
        setRectSize(rect,1,2);

    </script>
</body>
</html>

运行结果如下：

这里写图片描述

 ***：对象的方法，如果没有特定返回值，一般返回对象本身，这样有利于链式调用。

8.2.3 作为构造函数调用

1） 添加new关键字，就可以将函数作为构造函数调用。
2）返回一个对象。
3）对象可以通过构造函数来初始化。
4）对象将继承function.prototype上带有的属性

代码以及运行结果：

<!-- 

构造函数调用 
1.用new关键字，将普通函数当做构造函数使用
2.通过该函数的prototype中的属性，初始化该对象
3.在构造函数中的this关键字，只想的是被构造的新对象

-->
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>
    <script type="text/javascript">

    function func(){
        this.a = 1;
        this.b = 2;
    }

    //为func的prototype添加属性
    func.prototype.c = 3;

    var o = new func();
    //var o = new func;
    //对于无参数调用构造函数，上面两个式子效果一样

    //对象o，由构造函数初始化a,b属性，通过prototype将c熟悉继承给o
    var result = "o.a=" + o.a + "<br>o.b=" + o.b + "<br>o.c=" + o.c;
    document.write(result);

    </script>
</body>
</html>

这里写图片描述

8.2.4 间接调用

函数自带两个方法，call()，apply()，通过这两个方法调用函数，可以控制函数体中this关键字的指向。

<!-- 

    通过call()/apply()实现函数的间接调用

 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script type="text/javascript">

    var o = {},
        o2 = {};

    function f(x,y){
        //此处的this,指向call（）的第一个参数
        this.a = x;
        this.b = y;
    }

    f.call(o,1,2);
    f.apply(o2,[1,2]);

    //apply()与call()的区别在于参数需要放在数组里

    </script>
</body>
</html>

这里写图片描述

奇克斯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《权威指南》笔记 -- 8.2 函数调用

定义时不执行，调用时才执行。**调用方式，4种: 作为函数作为方法作为构造函数通过call()和apply()调用**8.2.1 作为函数调用8.2.2 作为方法调用当一个方法，是某个对象的属性1） a.o();2) a["o"](); // 通过方括号访问属性的方式调用3）a[0](); //通过索引来访问对象的属性*：属性方法一般会传入一个隐形的实参，也就是这个对象本身，
复制链接

扫一扫