zoukankan      html  css  js  c++  java
  • JavaScript基于对象引入,闭包,面向对象的实现

    Function对象的引入,创建方法对象

    /*
    function say(name,age) {
    	alert("姓名:"+name+",年龄:"+age);
    }
    say("盖伦",24);
    */
    
    //Function对象的引入,创建方法对象
    var sayFunc=new Function("name","age","alert("姓名:"+name+",年龄:"+age)");
    sayFunc("盖伦",24);
    

      Function对象属性

    //Function对象属性
    var sayFunc=new Function("name","age","alert("姓名:"+name+",年龄:"+age)");
    alert("sayFunc方法对象的方法的参数个数"+sayFunc.length);//输出参数2个
    

      Function对象方法

    //Function对象方法
    var sayFunc=new Function("name","age","alert("姓名:"+name+",年龄:"+age)");
    alert(sayFunc.toString());
    alert(sayFunc.valueOf());
    

      JS变量的作用域

    <script type="text/javascript">
    
    var a="zibo";
    function func() {
    	alert(a);
    }
    func();//读取全局变量a
    
    /*
    function func2(){
    	var b="nihao";
    }
    func2();
    alert(b);//b读取不到,作用域出了
    */
    
    function func3(){
    	c="welcome";
    }
    func3();
    alert(c);//c可以读取
    
    </script>

      闭包

    <script type="text/javascript">
    
    function func2(){
    	var b="nihao";
    
    	//定义一个function,然后返回return,从而调用了私有变量
    	function func2(){//可以获取父方法的私有属性
    		alert(b);
    	}
    	return func2;
    
    }
    var result=func2();
    result();
    
    </script>
    

      闭包的理解(访问私有变量d)

    <script type="text/javascript">
    
    function func4(){
    	var d="淄博";//相当于private属性
    
    	function func4(){//相当getter,setter
    		return d;
    	}
    	return func4;
    
    }
    var result=func4();
    alert(result());
    
    </script>
    

      闭包

    闭包是能够读取其他函数内部变量的函数

    本质上闭包是函数内部和函数外部连接起来的一座桥梁

      闭包的用途

    1、读取函数内部的变量

    2、让这些变量始终保持在内存中

      闭包使用的注意点:

    1、函数的变量保存在内存中,内存开销很大,不能滥用闭包,否则会造成网页性能问题,在IE中可能导致内存泄漏,解决办法,退出函数前,将不使用的局部变量全部删除。

    2、闭包会在父函数外部改变父函数内部变量的值,使用时不要随意改变。

    <script type="text/javascript">
    
    var name="Window name";
    
    var obj={
    	name:"阿卡丽",//key & value
    	age:22,
    	getNameFunc:function(){
    		return function(){
    			return this.name;
    		};
    	}
    };
    alert(obj.name);
    alert(obj.age);
    
    //返回 this.name,
    alert(obj.getNameFunc()());//两个()
    
    </script>
    

      

    <script type="text/javascript">
    
    var name="Window name";
    
    var obj={
    	name:"阿卡丽",//key & value
    	age:22,
    	getNameFunc:function(){
    		var name="提莫";
    		return function(){
    			return name;
    		};
    	}
    };
    alert(obj.name);
    alert(obj.age);
    
    //返回 this.name,
    alert(obj.getNameFunc()());//两个()
    
    </script>
    

      面向对象

    <script type="text/javascript">
    
    //创建对象方式一:对象初始化器
    var m={
    	name:"淄博",
    	age:100,
    	show:function(){
    		alert("名称:"+this.name+",年龄:"+this.age);
    	},
    	action:function(){
    		alert("使用动作");
    	}
    };
    
    alert(m.name);
    alert(m.age);
    m.show();
    m.action();
    
    //创建对象方式二:构造函数
    function Person(name,age){
    	this.name=name;
    	this.age=age;
    	this.show=function(){
    		alert("名称:"+this.name+",年龄:"+this.age);
    	};
    	this.action=function(){
    		alert("使用动作2");
    	};
    }
    var p=new Person("蒙多",22);
    alert(p.name);
    alert(p.age);
    p.show();
    p.action();
    </script>
    

      对象的属性定义:私有属性、对象属性、类属性

    <script type="text/javascript">
    
    function f() {
    	this.ob="对象属性";
    	f.prototype.ob2="对象属性2";
    	var privateOb="私有属性";
    
    }
    f.classOb="类属性";//相当于static属性
    
    alert(f.classOb);
    
    var ff=new f();
    alert(ff.ob);
    alert(ff.ob2);
    //私有属性需要闭包才能取出来
    
    </script>
    

      对象方法的定义:私有方法、实例方法、类方法

      

    <script type="text/javascript">
    
    function f() {
    	this.ob="对象属性";
    	f.prototype.ob2="对象属性2";
    	var privateOb="私有属性";
    	var privateFunc=function(){
    		alert("私有方法");
    	};
    	privateFunc();//私有方法new的时候内部调用
    	this.objFunc=function(){
    		alert("对象方法");
    	};
    	f.prototype.objFunc2=function(){
    		alert("对象方法2");
    	};
    
    }
    f.classOb="类属性";//相当于static属性
    f.classFunc=function(){
    	alert("类方法");//相当于static方法
    };
    
    /*
    alert(f.classOb);
    
    var ff=new f();
    alert(ff.ob);
    alert(ff.ob2);
    //私有属性需要闭包才能取出来
    */
    
    //调用方法
    f.classFunc();
    var f1=new f();
    f1.objFunc();
    f1.objFunc2();
    
    </script>
    

      JS实现继承

    1、Apply() 实现属性和方法的继承

    2、Prototype 实现原型的继承

    <script type="text/javascript">
    
    function A(str) {
    	this.str=str;
    	this.showStr=function(){
    		alert("123"+this.str);
    	};
    	this.action=function(){
    		alert("动作行为");
    	};
    }
    
    //B继承A
    function B(str){
    	A.apply(this,[str]);
    }
    
    var b=new B("string字符串");
    alert(b.str);
    b.showStr();
    b.action();
    </script>
    

      

    <script type="text/javascript">
    
    function A(str) {
    	this.str=str;
    	this.showStr=function(){
    		alert("123"+this.str);
    	};
    	this.action=function(){
    		alert("动作行为");
    	};
    }
    
    //B继承A
    function B(str){
    	A.apply(this,[str]);
    }
    
    B.prototype=new A();//原型继承
    
    var b=new B("string字符串");
    alert(b.str);
    b.showStr();
    b.action();
    </script>
    

      JS实现模拟多态

    <script type="text/javascript">
    
    function A() {
    	this.action=function(){
    		alert("动作行为");
    	};
    }
    
    //B继承A
    function B(){
    	this.action=function(){
    		alert("睡觉");
    	};
    }
    B.prototype=new A();//原型继承
    
    //C继承A
    function C(){
    	this.action=function(){
    		alert("吃饭");
    	};
    }
    C.prototype=new A();//原型继承
    
    function action(a){//多态
    	if(a instanceof A){
    		a.action();
    	}
    }
    
    var b=new B();
    action(b);
    var c=new C();
    action(c);
    
    </script>
    

      

  • 相关阅读:
    Jquery仿百度经验左右滚动切换效果(转)
    MySql之左连接,右连接
    MYSQL之IFNULL
    阿里云的云盘挂载
    Discuz管理员前台正常后台登录不进如何解决
    改善用户体验之wordpress添加图片弹出层效果 (插件 FancyBox)
    PHP session有效期session.gc_maxlifetime的设置方法
    Linux下php安装Redis扩展
    sequel 连接不上,命令行能连上
    mysql远程连接命令
  • 原文地址:https://www.cnblogs.com/void-m/p/6339935.html
Copyright © 2011-2022 走看看