<!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=50; student.address="黄土高坡"; /*对象的行为 函数*/ student.showInfo=function(){ document.write("姓名："+this.name); document.write("年龄："+student.age); document.write("地址："+this.address); } /*调用方法*/ 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.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.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()); //自身的方法 document.write(dog.sayHello()); //自身的方法 var animal=new Animal(); document.write(animal.getName()); //自身的方法 动物 </script> </body> </html>
<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); //再创建一个对象 var stu2=new Student(); document.write(stu2.names); </script> </body>
<!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); 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.sayBey=function(){ alert(this.name); } /*创建对象*/ var stu=new Student("小黑黑",50); stu.names.push("小白白"); document.write(stu.names+"<br/>"); stu.sayHello(); stu.sayBey(); var stu1=new Student("小黑黑2",50); document.write(stu1.names+"<br/>"); stu1.sayHello(); stu1.sayBey(); </script> </body> </html>