JavaScript(高级篇)

第一章 Function对象

第一节：Function对象引入

Function 是 js 的方法对象，可以用 Function 实例化出任何 js 方法对象；
第二节：用 Function创建方法对象
第三节：Function对象属性
第四节：Function对象方法

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
 var sayFunc=new Function("name","age","alert(name+'今年'+age+'岁了')");//前面都是参数，最后一个是方法体。
 // sayFunc("李四",4);
 // alert("sayFunc方法对象的方法参数个数："+sayFunc.length);
 alert(sayFunc.toString());   //显示内部匿名方法的源码
 alert(sayFunc.valueOf());  //显示内部匿名方法的源码
</script>
</body>
</html>

View Code

第二章 JavaScript闭包

第一节：Js变量的作用域
第二节：从外部读取方法内部的局部变量
第三节：闭包的概念

各种专业文献上的“闭包” （closure）定义非常抽象，很难看懂。我的理解是，闭包就是能够读取其他函数内部
变量的函数。
由于在 Javascript 语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个
函数内部的函数” 。
所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

第四节：闭包的用途
一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

第五节：闭包的使用注意点
1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性
能问题，在 IE 中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包
当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随
便改变父函数内部变量的值。

<script type="text/javascript">
    var a=22;  //全局变量
    
    function func(){
        alert(a);
    }
    
    func();
</script>

------------------------------------------------------------

<script type="text/javascript">
    function func(){
        // var a=22;  //局部变量
        a=22;  //去掉var,就是全局变量
    }
    
    func();
    alert(a);
    
</script>
-------------------------------------------------------------------

<script type="text/javascript">
    function func(){
        var a=22;
        /* 通过闭包能访问私有变量，相当于一个对外接口 ，
        因为父函数没有销毁，这些变量的值始终保持在内存中。
        */
        function func2(){
            return a;
        }
        
        return func2;
    }
    
    var result=func();
    alert("访问func的私有局部变量a:"+result());
    
</script>

-----------------------------------------------------------------------

<script type="text/javascript">
    var name="The Window";
    var object={
            name:"My object",
            getNameFunc:function(){
                return function(){
                    return this.name;
                };
            }
    };
    //alert(object.name);
    alert(object.getNameFunc()()); 
    //结果是The Window， this指widow对象，因为object.getNameFunc()返回的的是
    //     function(){return this.name;}; 
        

</script>

View Code

第三章 JavaScript面向对象实现

第一节：面向对象三大特征
第二节：JavaScript自定义对象
创建对象方式：方式一，对象初始化器方式；方式二，构造函数方式；
对象属性定义：私有属性；对象属性；类属性；
对象方法定义：私有方法；对象方法；类方法；

<script type="text/javascript">
   //方式一，对象初始化器方式
   
    var marry={
        name:"marry",
        age:2,
        shout:function(){
            alert("我是："+this.name+",今年："+this.age);
        },
        action:function(){
            alert("会吃");
        }
    };
    
    alert(marry.name);
    alert(marry.age);
    marry.shout();
    marry.action();
    
      //方式二，构造函数方式；
    function Dog(name,age){
        this.name=name;
        this.age=age;
        this.shout=function(){
            alert("我是："+this.name+",今年："+this.age);
        };
        this.action=function(){
            alert("会吃");
        };
    }
    
    var jack=new Dog("jack",1);
    alert(jack.name);
    alert(jack.age);
    jack.shout();
    jack.action();
</script>
</body>
</html>

--------------------------------------------------------------------------

<script type="text/javascript">
    function C(){
        this.objPro="对象属性";
        C.prototype.objPro2="对象属性2";   //使用原型定义属性
        var privatePro="私有属性";
    }
    C.classPro="类属性";    //像java中的static 属性
    
    alert(C.classPro);
    var c=new C();
    alert(c.objPro);
    alert(c.objPro2);
</script>
--------------------------------------------------------------------------
<script type="text/javascript">
    function C(){
        var privateFunc=function(){
            alert("私有方法");
        };
        privateFunc();    // new对象的时候在内部调用
        this.objFunc=function(){
            alert("对象方法");
        };
        C.prototype.objFunc2=function(){
            alert("对象方法2");
        };
    }
    C.classFunc=function(){
        alert("类方法");
    };
    
    C.classFunc();
    var c=new C();
    c.objFunc();
    c.objFunc2();
</script>

View Code

第三节：JavaScript实现封装特性
第四节：JavaScript实现继承特性
Apply() 实现属性和方法的继承；
Prototype 实现原型的继承；

<script type="text/javascript">
    function Animal(name,age){
        this.name=name;
        this.age=age;
        this.shout=function(){
            alert("我是："+this.name+",今年："+this.age);
        };
        this.action=function(){
            alert("会吃");
        };
    }
    //Apply() 实现属性和方法的继承；调用父类的方法和属性。
    function Dog(name,age){
        Animal.apply(this, [name,age]);
    }
    
    var jack=new Dog("jack",1);//jack原型还是dog
    alert(jack.name);
    alert(jack.age);
    jack.shout();
    jack.action();
</script>

--------------------------------------------------------------------------

<script type="text/javascript">
    function Animal(name,age){
        this.name=name;
        this.age=age;
        this.shout=function(){
            alert("我是："+this.name+",今年："+this.age);
        };
        this.action=function(){
            alert("会吃");
        };
    }
    
    function Dog(name,age){
        Animal.apply(this, [name,age]);
    }
    Dog.prototype=new Animal(); //Prototype 实现原型的继承；
    
    var jack=new Dog("jack",1);//jack原型 是animal
    alert(jack.name);
    alert(jack.age);
    jack.shout();
    jack.action();
</script>

View Code

第五节：JavaScript实现多态特性

<script type="text/javascript">

//JS 模拟多态，子类是什么类型就调用相应类型的方法。
    function Animal(){
        this.say=function(){
            alert("我是动物");
        };
    }
    
    function Dog(){
        this.say=function(){
            alert("我是狗");
        };
    }
    Dog.prototype=new Animal();
    
    function Cat(){
        this.say=function(){
            alert("我是猫");
        };
    }
    Cat.prototype=new Animal();
    
    function say(animal){
        if(animal instanceof Animal){
            animal.say();
        }
    }
    
    var dog=new Dog();
    var cat=new Cat();
    say(dog);
    say(cat);
</script>

View Code

posted @ 2017-03-09 18:26 SKYisLimit 阅读(124) 评论(0) 收藏举报

刷新页面返回顶部

SKYisLimit

JavaScript(高级篇)

公告