首页 > 技术文章 > JavaScript基于对象引入,闭包,面向对象的实现

void-m 2017-01-22 12:15 原文

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>

  

推荐阅读