#JavaScript对象及初识面向对象
课件
1对象是什么
2创建对象
自定义对象
内置对象
3构造函数和原型对象
如何解决使用同一个接口不需要创建很多对象，减少产生大量的重复代码？
构造函数
使用构造函数创建新实例
调用构函数的4个步骤
创建一个新对象
将构造函数的作用域赋给新对象（this就指向了这个新对象）
执行构造函数中的代码
返回新对象
constructor属性instanceof操作符
原型对象
4继承
原型链
对象继承
组合继承
组合继承：有时也叫做伪经典继承
将原型链和借用构造函数的技术组合到一块，发挥二者之长的一种继承模式
使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承
总结
代码--此部分对比Java理解，特殊在prototype
示例1：创建对象new,.?=?,alert
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>创建对象</title>
</head>
<body>
<script>
var flower=new Object();
flower.name="长春花";
flower.genera="夹竹桃科 长春花属";
flower.area="非洲、亚热带、热带以及中国大陆的华东、西南、中南等地";
flower.uses="观赏或用药等";
flower.showName=function(){
alert(this.name);
}
flower.showName();
</script>
</body>
</html>
示例2：字面量创建对象?:?
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>字面量赋值方式创建对象</title>
</head>
<body>
<script>
var flower={
name:"长春花",
genera:"夹竹桃科 长春花属",
area:"非洲、亚热带、热带以及中国大陆的华东、西南、中南等地",
uses:"观赏或用药等",
showName:function(){
alert(this.name);
}
}
flower.showName();
</script>
</body>
</html>
示例3：构造函数 同java
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>构造函数</title>
</head>
<body>
<script>
function Flower(name,genera,area,uses){
this.name=name;
this.genera=genera;
this.area=area;
this.uses=uses;
this.showName=function(){
alert(this.name);
}
}
var flower1=new Flower("长春花","夹竹桃科 长春花属","非洲、亚热带、热带以及中国大陆的华东、西南、中南等地","观赏或用药等");
flower1.showName();
var flower2=new Flower("牡丹","芍药科 芍药属","中国","观赏、食用或药用");
flower2.showName();
var flower3=new Flower("曼陀罗花","茄科 曼陀罗属","印度、中国北部","观赏或药用");
flower3.showName();
//alert(flower1.constructor==Flower);
//alert(flower2.constructor==Flower);
// alert(flower2.constructor==Flower);
alert(flower1 instanceof Object);
alert(flower1 instanceof Flower);
alert(flower2 instanceof Object);
alert(flower2 instanceof Flower);
alert(flower3 instanceof Object);
alert(flower3 instanceof Flower);
</script>
</body>
</html>
示例4：构造函数优化
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>构造函数</title>
</head>
<body>
<script>
function Flower(name,genera,area,uses){
this.name=name;
this.genera=genera;
this.area=area;
this.uses=uses;
this.showName=showName;
}
function showName(){
alert(this.name);
}
var flower1=new Flower("长春花","夹竹桃科 长春花属","非洲、亚热带、热带以及中国大陆的华东、西南、中南等地","观赏或用药等");
var flower2=new Flower("牡丹","芍药科 芍药属","中国","观赏、食用或药用");
var flower3=new Flower("曼陀罗花","茄科 曼陀罗属","印度、中国北部","观赏或药用");
flower1.showName();
flower2.showName();
flower3.showName();
alert(flower1 instanceof Object);
alert(flower1 instanceof Flower);
alert(flower2 instanceof Object);
alert(flower2 instanceof Flower);
alert(flower3 instanceof Object);
alert(flower3 instanceof Flower);
alert(flower1.constructor==Flower);
alert(flower2.constructor==Flower);
alert(flower3.constructor==Flower);
</script>
</body>
</html>
示例5：原型对象prototype=java的extends
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>原型对象</title>
</head>
<body>
<script>
function Flower(){
}
Flower.prototype.name="曼陀罗花";
Flower.prototype.genera="茄科 曼陀罗属";
Flower.prototype.area="印度、中国北部";
Flower.prototype.uses="观赏或药用";
Flower.prototype.showName=function() {
alert(this.name);
}
/*var flower1=new Flower();
flower1.showName();
var flower2=new Flower();
flower2.showName();
alert(flower1.showName==flower2.showName);*/
var flower1=new Flower();
var flower2=new Flower();
flower1.name="长春花";
alert(flower1.name);
alert(flower2.name);
</script>
</body>
</html>
示例6：原型链-函数和prototype
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>原型链</title>
</head>
<body>
<script>
function Humans(){
this.foot=2;
}
Humans.prototype.getFoot=function(){
return this.foot;
}
function Man(){
this.head=1;
}
Man.prototype=new Humans();
Man.prototype.getHead=function(){
return this.head;
}
var man1=new Man();
alert(man1.getFoot());
alert(man1.getHead());
alert(man1 instanceof Object);
alert(man1 instanceof Humans);
alert(man1 instanceof Man);
</script>
</body>
</html>
示例7：给原型添加方法prototype.方法
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>给原型添加方法</title>
</head>
<body>
<script>
function Humans(){
this.foot=2;
}
Humans.prototype.getFoot=function(){
return this.foot;
}
function Man(){
this.head=1;
}
//继承了Humans
Man.prototype=new Humans();
//添加新方法
Man.prototype.getHead=function(){
return this.head;
}
//重写父类型中的方法
Man.prototype.getFoot=function(){
return false;
}
var man1=new Man();
alert(man1.getFoot()); //false
</script>
</body>
</html>
示例8：原型链的问题push
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>原型链的问题</title>
</head>
<body>
<script>
function Humans(){
this.clothing=["trousers","dress","jacket"];
}
function Man(){
}
//继承了Humans
Man.prototype=new Humans();
var man1=new Man();
man1.clothing.push("coat");
alert(man1.clothing);
var man2=new Man();
alert(man2.clothing);
</script>
</body>
</html>
示例9：借用构造函数call
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>借用构造函数</title>
</head>
<body>
<script>
function Humans(){
this.clothing=["trousers","dress","jacket"];
}
function Man(){
Humans.call(this); //继承了Humans
}
var man1=new Man();
man1.clothing.push("coat");
alert(man1.clothing);
var man2=new Man();
alert(man2.clothing);
</script>
</body>
</html>
示例10：借用构造函数传递参数
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>借用构造函数传递参数</title>
</head>
<body>
<script>
function Humans(name){
this.name=name;
}
function Man(){
Humans.call(this,"mary"); //继承了Humans,同时还传递了参数
this.age=38; //实例属性
}
var man1=new Man();
alert(man1.name);
alert(man1.age);
</script>
</body>
</html>
示例11：组合继承
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>组合继承</title>
</head>
<body>
<script>
function Humans(name){
this.name=name;
this.clothing=["trousers","dress","jacket"];
}
Humans.prototype.sayName=function(){
alert(this.name);
};
function Man(name,age){
Humans.call(this,name); //继承属性
this.age=age;
}
Man.prototype=new Humans(); //继承方法
Man.prototype.sayAge=function(){
alert(this.age);
};
var man1=new Man("mary",38);
man1.clothing.push("coat");
alert(man1.clothing); //输出"trousers,dress,jacket,coat"
man1.sayName(); //输出mary
man1.sayAge(); //输出38
var man2=new Man("tom",26);
alert(man2.clothing); //输出"trousers,dress,jacket"
man2.sayName(); //输出tom
man2.sayAge(); //输出26
</script>
</body>
</html>
3048
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
