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>
浙公网安备 33010602011771号