JS 高级

Posted 2020-08-06 编世界

1  函数也是对象，函数也是参数。

script type="text/javascript">
 /* function say(name,age){
     alert(name+"今年"+age+"岁了");
 }
 say("张三",3); */
 
 var sayFunc=new Function("name","age","alert(name+‘今年‘+age+‘岁了‘)");
 sayFunc("李四",4);
 
</script>

<script type="text/javascript">
 var sayFunc=new Function("name","age","alert(name+‘今年‘+age+‘岁了‘)");
 // sayFunc("李四",4);
 alert("sayFunc方法对象的方法参数个数："+sayFunc.length);
 
</script>

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

 2  闭包入门demo

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

//这样可以访问，不写var说明a也是一个全局变量
<script type="text/javascript">
    function func(){
        // var a=22;
        a=22;
    }
    
    func();
    alert(a);
    
</script>

//函数外面能访问局部变量，是通过func2实现的，func2就是所谓的闭包
<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()());
</script>

//JS面向对象
<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>

//对象属性，私有属性，类属性
<script type="text/javascript">
    function C(){
        this.objPro="对象属性";
        C.prototype.objPro2="对象属性2";
        var privatePro="私有属性";
    }
    C.classPro="类属性";
    
    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();
        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>

//JS的继承1---用apply实现属性和方法的继承
<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]);
    }
    
    var jack=new Dog("jack",1);
    alert(jack.name);
    alert(jack.age);
    jack.shout();
    jack.action();
</script>

//JS继承2---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("会吃");
        };
    }
    
    function Dog(name,age){
        Animal.apply(this, [name,age]);
    }
    Dog.prototype=new Animal();
    
    var jack=new Dog("jack",1);
    alert(jack.name);
    alert(jack.age);
    jack.shout();
    jack.action();
</script>

//JS多态
<script type="text/javascript">
    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>