关闭

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

188人阅读 评论(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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:4774次
    • 积分:238
    • 等级:
    • 排名:千里之外
    • 原创:20篇
    • 转载:2篇
    • 译文:0篇
    • 评论:0条