JS学习 继承 多态 构造函数等
2013-02-20 21:42
302 查看
u js面向对象的再说明
(1) 对于比较简单的对象，我们也可以这样定义
var dog={name: "小明"};
window.alert(dog['name']);
var dog1={name:'小红',sayHello:function(a,b){window.alert(a+b);}};
dog1.sayHello(45,55);
(2) 在某些情况下，我们需要去改变某个函数的this指向，我们可以通过 call/apply 来实现
基本用法:
函数名.call(对象);// 这时 函数的this就是
对象
(3) for ... in的另外用法
可以对数组遍历
可以对象遍历
//json
vardog={name:"xm",age:34,color:"red"};
//遍历对象
/*for(var key in dog){
window.alert(dog[key]);
}*/
//你的浏览器window对象支持的属性有那些
for(var key in window){
document.write("<br/>"+key+"="+window[key]);
}
(4) 可以通过delete 对象名.属性 来手动的删除某个属性值.
u js的面向对象的三大特征
1. 封装性
所谓封装，就是把我们抽象出的属性和对属性的操作写到类的定义中，称为封装.
js 中实现封装主要有两种封装( 公开，私有)
class Person(name,sal){
this.name=name;//公开
varsal=sal;//私有
this.showInfo=function(){//公开
window.alert(this.name+””+sal);
}
showInfo2(){ //把函数私有化.
window.alert(“你好”+this.name+” ”+sal)
}
}
u 通过构造函数添加成员方法和通过原型法添加成员方法的区别
1. 通过原型法分配的函数是所有对象共享的.
2. 通过原型法分配的属性是独立.(如果你不修改属性，他们是共享)
3. 建议，如果我们希望所有的对象使用同一一个函数，最好使用原型法添加函数，这样比较节省内存.
Dog.prototype.shout=function (){
window.alert("小狗尖叫"+this.name);
}
//通过原型也可以给每个对象，分配属性
Dog.prototype.color="red";
var dog1=newDog("aa");
var dog2=new Dog("bb");
if(dog1.shout==dog2.shout){
window.alert("dog1.shout==dog2.shout");
}
dog1.color="黑色";
window.alert(dog1.color+""+dog2.color);
4. 请大家看一个题:
function Person(){
}
// 创建对象
var p1=new Person();
// p1.say();[错误]
// 这时用原型法分配
Person.prototype.say=function(){
window.alert("ok");
}
p1.say();
结论是 类.prototype.函数=function(){};
称为后置绑定.
u js面相对象的继承
看一段代码->问题是什么?
①对象冒充
代码如下:
<html>
<head>
<metahttp-equiv="content-type"content="text/html;charset=utf-8"/>
<scripttype="text/javascript">
//中学生
/* function MidStu(name,age){
this.name=name;
this.age=age;
this.show=function(){
window.alert(this.name+"年龄是="+this.age);
}
this.pay=function(fee){
window.alert("你的学费是"+fee*0.8);
}
}
//小学生
function Pupil(name,age){
this.name=name;
this.age=age;
this.show=function(){
window.alert(this.name+"年龄是="+this.age);
}
this.pay=function(fee){
window.alert("你的学费是"+fee*0.5);
}
}*/
//代码的复用性不高.
//修改如下:
//1. 把子类中共有的属性和方法抽取出，定义一个父类Stu
function Stu(name,age){
this.name=name;
this.age=age;
this.show=function(){
window.alert(this.name+"年龄是="+this.age);
}
}
//2.通过对象冒充来继承父类的属性的方法
function MidStu(name,age){
this.stu=Stu; //这里相当于把Stu构造函数(类)赋值给我们的属性this.stu
//调用this.stu方法
this.stu(name,age); //这个表示初始化MidStu,相当于执行Stu(name,age),这句话必须有，否则无法实现集成的效果
//可以写MidStu自己的方法.
this.pay=function(fee){
window.alert("你的学费是"+fee*0.8);
}
}
function Pupil(name,age){
this.stu=Stu;//这里只是把码继承.
//初始化一把
this.stu(name,age);
//可以写Pupil自己的方法.
this.pay=function(fee){
window.alert("你的学费是"+fee*0.5);
}
}
//测试
var midstu=new MidStu("贾宝玉",15);
var pupil=new Pupil("贾环",12);
midstu.show();
midstu.pay(100);
pupil.show();
pupil.pay(100);
</script>
</html>
②通过call 或者apply来实现
<html>
<head>
<metahttp-equiv="content-type"content="text/html;charset=utf-8"/>
<scripttype="text/javascript">
//中学生
/* function MidStu(name,age){
this.name=name;
this.age=age;
this.show=function(){
window.alert(this.name+"年龄是="+this.age);
}
this.pay=function(fee){
window.alert("你的学费是"+fee*0.8);
}
}
//小学生
function Pupil(name,age){
this.name=name;
this.age=age;
this.show=function(){
window.alert(this.name+"年龄是="+this.age);
}
this.pay=function(fee){
window.alert("你的学费是"+fee*0.5);
}
}*/
//代码的复用性不高.
//修改如下:
//1. 把子类中共有的属性和方法抽取出，定义一个父类Stu
function Stu(name,age){
window.alert("确实被调用.");
this.name=name;
this.age=age;
this.show=function(){
window.alert(this.name+"年龄是="+this.age);
}
}
//2.通过对象冒充来继承父类的属性的方法
function MidStu(name,age){
//这里这样理解: 通过call修改了Stu构造函数的this指向,
//让它指向了调用者本身.
Stu.call(this,name,age);
//如果用apply实现，则可以
//Stu.apply(this,[name,age]); //说明传入的参数是数组方式
//可以写MidStu自己的方法.
this.pay=function(fee){
window.alert("你的学费是"+fee*0.8);
}
}
function Pupil(name,age){
Stu.call(this,name,age);//当我们创建Pupil对象实例,Stu的构造函数会被执行,当执行后，我们Pupil对象就获取从 Stu封装的属性和方法
//可以写Pupil自己的方法.
this.pay=function(fee){
window.alert("你的学费是"+fee*0.5);
}
}
//测试
var midstu=new MidStu("孙悟空",15);
var pupil=new Pupil("猪八戒",12);
midstu.show();
midstu.pay(100);
pupil.show();
pupil.pay(100);
</script>
</html>
u js的继承小结
(1) js对象可以通过对象冒充，实现多重继承
(2) Object 类是所有js类的基类
u js的多态的特性
① js的函数的重载文件
js默认不支持重载，我们可以通过，判断参数的个数来实现重载
<html>
<head>
<metahttp-equiv="content-type"content="text/html;charset=utf-8"/>
<scripttype="text/javascript">
//*****************说明js不支持重载*****
/*function Person(){
this.test1=function (a,b){
window.alert('function(a,b)');
}
this.test1=function (a){
window.alert('function(a)');
}
}
var p1=new Person();
//js中不支持重载.
p1.test1("a","b");
p1.test1("a");*/
//js怎么实现重载.通过判断参数的个数来实现重载
function Person(){
this.test1=function (){
if(arguments.length==1){
this.show1(arguments[0]);
}elseif(arguments.length==2){
this.show2(arguments[0],arguments[1]);
}elseif(arguments.length==3){
this.show3(arguments[0],arguments[1],arguments[2]);
}
}
this.show1=function(a){
window.alert("show1()被调用"+a);
}
this.show2=function(a,b){
window.alert("show2()被调用"+"--"+a+"--"+b);
}
function show3(a,b,c){
window.alert("show3()被调用");
}
}
var p1=new Person();
//js中不支持重载.
p1.test1("a","b");
p1.test1("a");
</script>
</html>
② 覆盖
当子类有一个方法和父类一样,则我们称子类的方法覆盖了父类的方法 。
function Stu(){
this.show=function(){
window.alert("stushow");
}
}
function MidStu(){
this.stu=Stu;
this.stu();
this.show=function(){
window.alert("midstushow");
}
}
var midstu=new MidStu();
midstu.show();
☞ 要实现覆盖，需要把子类的方法，防止类定义的后面.
(1) 对于比较简单的对象，我们也可以这样定义
var dog={name: "小明"};
window.alert(dog['name']);
var dog1={name:'小红',sayHello:function(a,b){window.alert(a+b);}};
dog1.sayHello(45,55);
(2) 在某些情况下，我们需要去改变某个函数的this指向，我们可以通过 call/apply 来实现
基本用法:
函数名.call(对象);// 这时 函数的this就是
对象
(3) for ... in的另外用法
可以对数组遍历
可以对象遍历
//json
vardog={name:"xm",age:34,color:"red"};
//遍历对象
/*for(var key in dog){
window.alert(dog[key]);
}*/
//你的浏览器window对象支持的属性有那些
for(var key in window){
document.write("<br/>"+key+"="+window[key]);
}
(4) 可以通过delete 对象名.属性 来手动的删除某个属性值.
u js的面向对象的三大特征
1. 封装性
所谓封装，就是把我们抽象出的属性和对属性的操作写到类的定义中，称为封装.
js 中实现封装主要有两种封装( 公开，私有)
class Person(name,sal){
this.name=name;//公开
varsal=sal;//私有
this.showInfo=function(){//公开
window.alert(this.name+””+sal);
}
showInfo2(){ //把函数私有化.
window.alert(“你好”+this.name+” ”+sal)
}
}
u 通过构造函数添加成员方法和通过原型法添加成员方法的区别
1. 通过原型法分配的函数是所有对象共享的.
2. 通过原型法分配的属性是独立.(如果你不修改属性，他们是共享)
3. 建议，如果我们希望所有的对象使用同一一个函数，最好使用原型法添加函数，这样比较节省内存.
Dog.prototype.shout=function (){
window.alert("小狗尖叫"+this.name);
}
//通过原型也可以给每个对象，分配属性
Dog.prototype.color="red";
var dog1=newDog("aa");
var dog2=new Dog("bb");
if(dog1.shout==dog2.shout){
window.alert("dog1.shout==dog2.shout");
}
dog1.color="黑色";
window.alert(dog1.color+""+dog2.color);
4. 请大家看一个题:
function Person(){
}
// 创建对象
var p1=new Person();
// p1.say();[错误]
// 这时用原型法分配
Person.prototype.say=function(){
window.alert("ok");
}
p1.say();
结论是 类.prototype.函数=function(){};
称为后置绑定.
u js面相对象的继承
看一段代码->问题是什么?
①对象冒充
代码如下:
<html>
<head>
<metahttp-equiv="content-type"content="text/html;charset=utf-8"/>
<scripttype="text/javascript">
//中学生
/* function MidStu(name,age){
this.name=name;
this.age=age;
this.show=function(){
window.alert(this.name+"年龄是="+this.age);
}
this.pay=function(fee){
window.alert("你的学费是"+fee*0.8);
}
}
//小学生
function Pupil(name,age){
this.name=name;
this.age=age;
this.show=function(){
window.alert(this.name+"年龄是="+this.age);
}
this.pay=function(fee){
window.alert("你的学费是"+fee*0.5);
}
}*/
//代码的复用性不高.
//修改如下:
//1. 把子类中共有的属性和方法抽取出，定义一个父类Stu
function Stu(name,age){
this.name=name;
this.age=age;
this.show=function(){
window.alert(this.name+"年龄是="+this.age);
}
}
//2.通过对象冒充来继承父类的属性的方法
function MidStu(name,age){
this.stu=Stu; //这里相当于把Stu构造函数(类)赋值给我们的属性this.stu
//调用this.stu方法
this.stu(name,age); //这个表示初始化MidStu,相当于执行Stu(name,age),这句话必须有，否则无法实现集成的效果
//可以写MidStu自己的方法.
this.pay=function(fee){
window.alert("你的学费是"+fee*0.8);
}
}
function Pupil(name,age){
this.stu=Stu;//这里只是把码继承.
//初始化一把
this.stu(name,age);
//可以写Pupil自己的方法.
this.pay=function(fee){
window.alert("你的学费是"+fee*0.5);
}
}
//测试
var midstu=new MidStu("贾宝玉",15);
var pupil=new Pupil("贾环",12);
midstu.show();
midstu.pay(100);
pupil.show();
pupil.pay(100);
</script>
</html>
②通过call 或者apply来实现
<html>
<head>
<metahttp-equiv="content-type"content="text/html;charset=utf-8"/>
<scripttype="text/javascript">
//中学生
/* function MidStu(name,age){
this.name=name;
this.age=age;
this.show=function(){
window.alert(this.name+"年龄是="+this.age);
}
this.pay=function(fee){
window.alert("你的学费是"+fee*0.8);
}
}
//小学生
function Pupil(name,age){
this.name=name;
this.age=age;
this.show=function(){
window.alert(this.name+"年龄是="+this.age);
}
this.pay=function(fee){
window.alert("你的学费是"+fee*0.5);
}
}*/
//代码的复用性不高.
//修改如下:
//1. 把子类中共有的属性和方法抽取出，定义一个父类Stu
function Stu(name,age){
window.alert("确实被调用.");
this.name=name;
this.age=age;
this.show=function(){
window.alert(this.name+"年龄是="+this.age);
}
}
//2.通过对象冒充来继承父类的属性的方法
function MidStu(name,age){
//这里这样理解: 通过call修改了Stu构造函数的this指向,
//让它指向了调用者本身.
Stu.call(this,name,age);
//如果用apply实现，则可以
//Stu.apply(this,[name,age]); //说明传入的参数是数组方式
//可以写MidStu自己的方法.
this.pay=function(fee){
window.alert("你的学费是"+fee*0.8);
}
}
function Pupil(name,age){
Stu.call(this,name,age);//当我们创建Pupil对象实例,Stu的构造函数会被执行,当执行后，我们Pupil对象就获取从 Stu封装的属性和方法
//可以写Pupil自己的方法.
this.pay=function(fee){
window.alert("你的学费是"+fee*0.5);
}
}
//测试
var midstu=new MidStu("孙悟空",15);
var pupil=new Pupil("猪八戒",12);
midstu.show();
midstu.pay(100);
pupil.show();
pupil.pay(100);
</script>
</html>
u js的继承小结
(1) js对象可以通过对象冒充，实现多重继承
(2) Object 类是所有js类的基类
u js的多态的特性
① js的函数的重载文件
js默认不支持重载，我们可以通过，判断参数的个数来实现重载
<html>
<head>
<metahttp-equiv="content-type"content="text/html;charset=utf-8"/>
<scripttype="text/javascript">
//*****************说明js不支持重载*****
/*function Person(){
this.test1=function (a,b){
window.alert('function(a,b)');
}
this.test1=function (a){
window.alert('function(a)');
}
}
var p1=new Person();
//js中不支持重载.
p1.test1("a","b");
p1.test1("a");*/
//js怎么实现重载.通过判断参数的个数来实现重载
function Person(){
this.test1=function (){
if(arguments.length==1){
this.show1(arguments[0]);
}elseif(arguments.length==2){
this.show2(arguments[0],arguments[1]);
}elseif(arguments.length==3){
this.show3(arguments[0],arguments[1],arguments[2]);
}
}
this.show1=function(a){
window.alert("show1()被调用"+a);
}
this.show2=function(a,b){
window.alert("show2()被调用"+"--"+a+"--"+b);
}
function show3(a,b,c){
window.alert("show3()被调用");
}
}
var p1=new Person();
//js中不支持重载.
p1.test1("a","b");
p1.test1("a");
</script>
</html>
② 覆盖
当子类有一个方法和父类一样,则我们称子类的方法覆盖了父类的方法 。
function Stu(){
this.show=function(){
window.alert("stushow");
}
}
function MidStu(){
this.stu=Stu;
this.stu();
this.show=function(){
window.alert("midstushow");
}
}
var midstu=new MidStu();
midstu.show();
☞ 要实现覆盖，需要把子类的方法，防止类定义的后面.
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 继承、接口、多态与构造函数的学习
- JS面向对象---构造函数之间的继承（阮一峰网络日志学习笔记）
- c++primer（5th）15章 文本查询程序 代码解读（学习继承与多态）与修改+动物运动会代码（学习继承与多态，拷贝用构造函数，=重载运算符）
- JS学习笔记——JavaScript继承的6种方法(原型链、借用构造函数、组合、原型式、寄生式、寄生组合式)
- JavaScript高级程序设计(第2版) 学习笔记:(六)js基于构造函数与原型的继承
- 韩顺平 javascript教学视频_学习笔记19_js面向对象三大特征（封装，继承，多态）
- JS面向对象---非构造函数之间的继承（阮一峰网络日志学习笔记）
- js1：对象的学习，构造函数，继承构造函数【使用教材：JavaScript深度剖析第2版】
- js面向对象之构造函数、封装与继承
- js中借用构造函数实现继承
- 学习记录--js中的五种继承方式
- 黑马程序员学习日记 （四）面向对象三大特征： 封装 继承 多态
- 学习笔记 Java类的封装、继承和多态 2014.7.10
- 【Java学习笔记之十六】浅谈Java中的继承与多态
- JAVA学习笔记04封装，继承，多态
- 【黑马程序员】iOS学习之路——Objective-C之封装、继承和多态
- JAVA学习笔记之七继承和多态
- Java学习笔记--继承与多态
- 黑马程序员-----java基础六（继承与多态学习）
- 【Java学习笔记】基础知识学习10【继承与多态】