您的位置:首页 > Web前端 > JavaScript

JavaScript基础--面向对象三大特性(八):继承封装多态

2014-05-13 14:49 1036 查看
一、构造函数
基本用法:
function 类名(参数列表){
属性=参数值
}

function Person(name,age){
this.name = name;
this.age = age;
}

//创建Person对象的时候,可以直接给名字和年龄
var p1 = new Person('abc',80);
window.alert(p1.name);
var p2 = new Person('hello',9);
window.alert(p2.name);

//在给一个对象初始化普通属性值的时候,也可以指定函数属性

function jiSuan(num1,num2,oper){
if(oper=="+"){
return num1 + num2;
}else if(oper=="-"){
return num1 - num2;
}else if(oper=="*"){
return num1 * num2;
}else{
return num1 / num2;
}
}

function Person(name,age,fun){
this.name = name;
this.age =age;
this.myfun = fun;
}

//创建对象时,不仅要可以初始化变量,还可以初始化一个函数
var p1 = new Person("aa",9,jiSuan);
window.alert(p1.myfun(90,89,"+"));


二、创建对象的有一种形式【加强篇】

2.1 JSON创建对象

//如果一个对象比较简单,我们可以直接创建。(可以指定普通属性和函数)
var dog ={name:'小狗',age:8};
window.alert(dog.constructor);
window.alert(dog.name + dog.age);

//扩展:
var dog = {name:'小狗',
age:8,
fun1:function(){window.alert('hello,world');},
fun2:function(){window.alert('okok');}
};
window.alert(dog.constructor);
window.alert(dog.name + dog.age);
dog.fun1();
dog.fun2();

//有时,我们看到这样一种调用方法,函数名.call(对象实例)
//这样调用,该函数的this就是对象实例
var dog ={name:'hello'};
function test(){
window.alert(this.name);
}
test();
window.test();
//这两个方法都打印出undefine
test.call(dog);  //<==>dog.test();


2.2 使用for...in 遍历

var dog= {name:'小明',sayHello:function(a,b){window.alert("结果="+(a+b));}};
//循环列出dog对象的所有属性和方法 对象名['属性名']
for(var key in dog){
window.alert(dog[key]);
}

//document.write("****当前浏览器window对象所有属性和方法****<br/>");
for(var key in window){
document.writeln(key+":"+window[key]+"<br/>");
}


三、JS面向对象的三大特性:继承、封装和多态

3.1 封装

  js提供有以下几种控制方法和属性的访问权限:
    (1) 公开级别:对外公开
    (2) 私有级别:类本身可用访问,不对外公开。

function Person(name,agei,sal){
this.name = name;  //公开的属性
var age=agei;   //私有属性
var salary=sal; //私有属性
//在类中如何定义公开方法(特权方法),私有方法(内部方法)
//如果我们希望操作私有的属性,则可用公开方法实现
this.show=function(){
window.alert(age+" "+salary);
}

//私有方法
function show2(){
window.alert(age+" "+salary);
}
show2();
}

var p1 = new Person('sp',20,50000);
window.alert(p1.name+" "+p1.age);
p1.show(); //这个可以ok
//p1.show2(); //不能在类的外部使用私有的方法


//注意:通过prototype给所有的对象添加方法,但是这种方式,不能去访问类的私有变量和

//方法
//举例:
function Person(){
this.name = "abc";
var age=90;
this.abc=function(){
window.alert("abc()");
}

function abc2(){
window.alert("abc2");
}
}

Person.prototype.fun1 =function(){
window.alert(this.name); //ok
//window.alert(age);  //no ok  私有变量
//abc2(); //no ok   私有方法
//window.alert(age);  //no ok   私有变量

}

var p1 = new Person();
p1.fun1();


3.2 继承

A、为什么需要继承

function MidStu(name,age){
this.name=name;
this.age = age;
this.show =function(){
window.alert(this.name +" "+this.age);
}
//计算学费
this.payFee=function(money){
window.alert("应缴" + money * 0.8);
}
}

function Pupil(name,age){
this.name=name;
this.age = age;
this.show =function(){
window.alert(this.name +" "+this.age);
}
//计算学费
this.payFee=function(money){
window.alert("应缴" + money * 0.5);
}
}
//上面的代码存在冗余问题


//解决方法可以使用继承(对象冒充来实现继承效果的)

//怎么解决代码冗余问题-->继承
//抽象出一个学生类(把小学生和中学生的共性取出)

function Stu(name,age){
this.name =name;
this.age =age;
this.show=function(){
window.alert(this.name +" "+this.age)
}
}

function MidStu(name,age){
this.stu=Stu;
this.stu(name,age); //js中实际上是通过对象冒充,来实现继承,这句话不能少。

//因为js是动态语言,如果不执行,则不能实现继承效果
//MidStu可以覆盖Stu父类的show
this.show=function(){
window.alert("MidStu show();");
}
}

function Pupil(name,age){
this.stu = Stu;
this.stu(name,age);
}

var midStu = new MidStu("顺平",20);
window.alert(midStu.name);
midStu.show();

//特别说明:通过对象冒充,js可以实现多重继承的效果,用的比较少


3.3 js的重载和重写

3.3.1 重载:js中不支持重载(即,不可用通过参数的个数来决定调用哪个函数,但是因为js本身支
持可变参数,所有,它可以看成天然支持重载)

  

function abc(){
if(argument.length=..){
}else if(){
}
}


3.3.2 重写:子类可以重新写函数来覆盖父类的某个方法

//父类
function Stu(name,age){
this.name =name;
this.age =age;
this.show=function(){
window.alert(this.name +" "+this.age);
}
}

//子类
function MidStu(name,age){
this.stu=Stu;
this.stu(name,age); //js中实际上是通过对象冒充,来实现继承,这句话不能少。

//因为js是动态语言,如果不执行,则不能实现继承效果
//MidStu可以覆盖Stu父类的show
/*this.show=function(){
window.alert("MidStu show();");//这里就会去调用子类的show方法
}*/
}
var midStu = new MidStu("zhangsan",3);
midStu.show();


3.4 多态:一个引用类型在不同情况下的多种状态,在java中多态是指通过父类的引用,来调用在不同子类中实现的方法。js实际上是无态的,是一种动态语言,一个变量的类型是在运行的过程中由js引擎来决定的,所有说,js天生就是支持多态。

function Person(){
this.test1=function(){
window.alert("Person test1");
}
}
function Cat(){
this.test1=function(){
window.alert("Cat test1()");
}
}
var  v = new Person();
v.test1();
v = new Cat();
v.test1();


3.4.1 面向对象三大特征案例

function Master(){
//给动物喂食
this.feed =function(animal,food){
document.write("主人给"+animal.name + "喂"+food.name);
}
}

//写食物
function Food(name){
this.name =name;
}

function Fish(name){
this.food = Food;
this.food(name);
}

function Bone(name){
this.food = Food;
this.food(name);
}

function Peach(name){
this.food = Food;
this.food(name);
}

//动物
function Animal(name){
this.name=name;
}

function Cat(name){
this.animal=Animal;
this.animal(name);
}

function Dog(name){
this.animal = Animal;
this.animal(name);
}

function Monkey(name){
this.animal = Animal;
this.animal(name);
}

var cat = new Cat("小猫咪");
var dog = new Dog("小狗");
var fish = new Fish("小鱼");
var bone = new Bone("骨头");

var master = new Master();
master.feed(cat,fish);
master.feed(dog,bone);
master.feed(new Monkey("小猴"),new Peach("水蜜桃"));


四、闭包

4.1 解释:

    (1)闭包和gc是相关联的
    (2)闭包实际是涉及到一个对象的属性,何时被gc处理的问题
    (3)怎样才能对对象的属性形成一个闭包

//案例:
function A(){
var i=0;
function b(){
window.alert(i++);
}
return b;
}
var c =A();  //执行完A函数后,i的值已变成1,然后把b的构造函数赋值给c,但是i在A函数中,虽然A已执行完,但是i没有被立即回收,而是在C函数中继续执行,这样i就被闭包了。
c();
/*闭包的作用就是在a执行完并返回后,闭包使得Javascript的垃圾回收机制GC不会收回a所占用的资源,因为a的内部函数b的执行需要依赖于a中的变量i*/


分析:
//闭包<---->gc
A();//此时内存中会有i的空间被gc处理
var c = A(); //这种用法,gc不会把i当做垃圾
//c();
window.alert("aa");
//..
//..
c(); //输出0;
c(); //输出1;从而证明i变量被闭包
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: