<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>创建对象</title>
</head>
<body>
<script type="text/javascript">
//创建一个学生对象
var student=new Object();
/*对象的属性*/
student.name="小黑";
student.age=18;
student.address="黄土高坡";
/*对象的行为 函数*/
student.showInfo= function() {
document.write("姓名："+this.name+"<br/>");
document.write("年龄："+student.age+"<br/>");
document.write("地址："+this.name+"<br/>");
}
/*调用方法*/
student.showInfo();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>通过字面量赋值的方式创建对象</title>
</head>
<body>
<script type="text/javascript">
/*创建一个学生对象
* {中的内容是json数据格式}
* 特点就是 ---》
* 属性名1：属性值1,
* 属性名2：属性值2,
* 属性名3：属性值3
*
* student就是一个变量，也是一个对象
* */
var student={
/*对象的属性*/
name:"小黑",
age:50,
address:"地狱",
/*对象的行为 函数*/
showInfo: function () {
document.write("姓名："+this.name+"<br/>");
document.write("年龄："+this.age+"<br/>");
document.write("地址："+this.address+"<br/>");
},
showName:function(){
document.write("姓名："+this.name+"<br/>");
}
}
/*调用方法*/
student.showName();
student.showInfo();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>通过构造函数创建多个对象</title>
</head>
<body>
<script type="text/javascript">
/*Student必须首字母大写 所有对象公用的构造方法*/
function Student(name,age,address){
/*给属性赋值*/
this.name=name;
this.age=age;
this.address=address;
/*设置方法*/
this.showInfo=function(){
document.write("姓名："+this.name+"<br/>")
document.write("年龄："+this.age+"<br/>")
document.write("地址："+this.address+"<br/>")
};
this.showName=function(){
document.write("姓名："+this.name+"<br/>")
}
}
//真正的对象
var stu1=new Student("小黑",50,"上海1");
var stu2=new Student("小白",60,"上海2");
var stu3=new Student("小红",70,"上海3");
/*调用对象的方法*/
stu1.showName();
stu2.showName();
stu3.showInfo();
/*所有的对象都有一个constructor属性 指向了构造方法*/
alert(stu1.constructor==Student);
/*instanceof 判断对象是否属于某个类型*/
alert(stu1 instanceof Student);
alert(stu1 instanceof Object);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>原型对象</title>
</head>
<body>
<script type="text/javascript">
/*创建一个构造函数*/
function Student(){}
/*每个函数中都有一个prototype(原型对象)
* 这个属性就是一个指针，指向了一个对象！
*
* prototype就是通过构造函数来创建这个对象实例的原型对象！
* */
Student.prototype.name="小黑";
Student.prototype.age=50;
Student.prototype.address="天堂";
/*书写方法*/
Student.prototype.showInfo=function(){
document.write("姓名："+this.name+"<br/>");
document.write("年龄："+this.age+"<br/>");
document.write("地址："+this.address+"<br/>");
};
Student.prototype.showName=function(){
document.write("姓名："+this.name+"<br/>");
}
/*创建对象*/
var stu1=new Student();
stu1.name="哈哈";
stu1.showInfo();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>原型链</title>
<!-- 原型链： 一个原型对象 是另一个原型对象的实例！
相关的原型对象层层递进，就构成了 实例与原型对象的链条！-->
</head>
<body>
<script type="text/javascript">
/*创建了一个动物构造函数*/
function Animal(){
this.aName="动物类";
}
/*写了一个获取名称的方法*/
Animal.prototype.getName=function(){
return this.aName;
}
/*创建一个小狗狗构造函数*/
function Dog(){
this.dName="小狗";
}
/*Dog原型对象是Animal原型对象的实例*/
Dog.prototype=new Animal();
Dog.prototype.getDogName=function(){
return this.dName;
}
/*创建小狗对象*/
var dog=new Dog();
document.write((dog.getDogName())+"<br/>"); //自身的方法
document.write((dog.getName())+"<br/>"); //父类的方法
document.write((dog instanceof Object)+"<br/>");
document.write((dog instanceof Dog)+"<br/>");
document.write((dog instanceof Animal)+"<br/>");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>原型链</title>
<!-- 原型链： 一个原型对象 是另一个原型对象的实例！
相关的原型对象层层递进，就构成了 实例与原型对象的链条！-->
</head>
<body>
<script type="text/javascript">
/*创建了一个动物构造函数*/
function Animal(){
this.name="动物类";
}
/*写了一个获取名称的方法*/
Animal.prototype.getName=function(){
return this.name;
}
Animal.prototype.sayHello=function(){
return "动物好";
}
/*创建一个小狗狗构造函数*/
function Dog(){
this.name="小狗";
}
/*Dog原型对象是Animal原型对象的实例*/
Dog.prototype=new Animal();
Dog.prototype.getName=function(){
return this.name;
}
/*重写父类的方法*/
Dog.prototype.sayHello=function(){
return "小狗好";
}
/*创建小狗对象*/
var dog=new Dog();
document.write((dog.getName())+"<br/>"); //自身的方法
document.write((dog.sayHello())+"<br/>"); //父类的方法
var animal=new Animal();
document.write((animal.getName())+"<br/>"); //自身的方法 动物
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>继承</title>
</head>
<body>
<script type="text/javascript">
function Person(){
this.names=["小黑","小红","小豆腐"];
}
function Student(){
}
//让学生继承 Person
Student.prototype=new Person();
//创建一个学生对象
var stu1=new Student();
stu1.names.push("小白");
document.write(stu1.names+"<br/>");
//再创建一个对象
var stu2=new Student();
document.write(stu2.names);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>借用构造函数</title>
</head>
<body>
<script type="text/javascript">
function Person(){
this.names=["小黑","小红","小豆腐"];
}
function Student(){
Person.call(this); //继承了 Person
}
//创建一个学生对象
var stu1=new Student();
stu1.names.push("小白");
document.write(stu1.names+"<br/>");
//再创建一个对象
var stu2=new Student();
document.write(stu2.names); //没有小白！
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>借用构造函数 传递参数</title>
</head>
<body>
<script type="text/javascript">
function Person(name){
this.name=name;
}
function Student(){
Person.call(this,"小黑"); //继承了 Person的同时 传递了参数
this.age=50;
}
//创建学生对象
var stu=new Student();
document.write(stu.name+"<br/>");
document.write(stu.age);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>组合继承</title>
</head>
<body>
<script type="text/javascript">
/*构造方法*/
function Person(name){
this.name=name;
this.names=["hei","bai","pei"];
}
Person.prototype.sayHello=function(){
alert(this.name);
}
function Student(name,age){
Person.call(this,name);//继承属性
this.age=age;
}
Student.prototype=new Person(); //继承了方法
//student特有的方法
Student.prototype.sayBye=function(){
alert(this.names);
}
/*创建对象*/
var stu=new Student("小嘿嘿",50);
stu.names.push("小白白");
document.write(stu.names+"<br/>")
stu.sayHello();
stu.sayBye();
var stu1=new Student("小嘿嘿2",50);
document.write(stu1.names+"<br/>");
stu1.sayHello();
stu1.sayBye();
</script>
</body>
</html>