1、创建对象
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>创建对象</title> | |
| </head> | |
| <body> | |
| <!-- | |
| 对象： 对象是包含了属性和方法的集合体！ | |
| 什么是面向对象呢？ | |
| 01.面向对象就是一种编程思想，是一个概念！ | |
| 02.在js中，通过一种叫做原型的方式来实现面向对象编程！ | |
| --> | |
| <button type="button" onclick="showInfo();">点击显示学生信息</button> | |
| <script type="text/javascript"> | |
| //创建一个学生对象 | |
| var student=new Object(); | |
| //创建对象的属性并且赋值 | |
| student.age=50; | |
| student.name="小黑"; | |
| student.address="海淀区"; | |
| //创建对象的方法 | |
| student.sayHello=function(){ | |
| document.write("姓名："+student.name+"<br/>"); | |
| document.write("年龄："+student.age+"<br/>"); | |
| document.write("住址："+this.address+"<br/>"); | |
| } | |
| //用户点击按钮触发的事件 | |
| function showInfo(){ | |
| student.sayHello(); //调用student的方法 | |
| } | |
| //现在只是创建了一个对象！ 如果我们想创建多个 那么代码冗余！ | |
| </script> | |
| </body> | |
| </html> |
2、通过字面量来创建对象
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>通过字面量来创建对象</title> | |
| </head> | |
| <body> | |
| <!-- | |
| 创建一个学生对象 | |
| {属性1:值1，属性2:值2，属性3:值3} | |
| json数据格式：是一种数据转换格式 | |
| 01.是一个键值对的形式 | |
| 02.对象保存在｛｝中 | |
| 03.集合保存在[]中 | |
| 04.数据由逗号分隔，属性和属性值使用冒号分割 | |
| --> | |
| <button type="button" onclick="showInfo();">点击显示学生信息</button> | |
| <script type="text/javascript"> | |
| var student={ | |
| age:50, | |
| name:"小黑", | |
| address:"海淀区", | |
| sayHello:function(){ //方法 | |
| document.write("姓名："+this.name+"<br/>"); | |
| document.write("年龄："+this.age+"<br/>"); | |
| document.write("住址："+this.address+"<br/>"); | |
| } | |
| } | |
| // student 我们称之为变量 =右边的｛｝中的数据，我们称之为 字面量！ | |
| //用户点击按钮触发的事件 | |
| function showInfo(){ | |
| student.sayHello(); //调用student的方法 | |
| } | |
| // 问题依然存在：现在只是创建了一个对象！ 如果我们想创建多个 那么代码冗余！ | |
| </script> | |
| </body> | |
| </html> |
3、通过构造函数创建多个对象
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>通过构造函数创建多个对象</title> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| //创建构造函数 函数名称首字母必须大写 | |
| function Student(name,age,address){ | |
| //声明属性并赋值 | |
| this.name=name; | |
| this.age=age; | |
| this.address=address; | |
| //设置方法 | |
| this.sayHello=function(){ | |
| document.write("姓名："+this.name+"<br/>"); | |
| document.write("年龄："+this.age+"<br/>"); | |
| document.write("住址："+this.address+"<br/>"); | |
| } | |
| } | |
| //创建多个对象 | |
| var stu1=new Student("小黑1",50,"天堂1"); | |
| var stu2=new Student("小黑2",51,"天堂2"); | |
| var stu3=new Student("小黑3",52,"天堂3"); | |
| //分别调用对象的方法 | |
| stu1.sayHello(); | |
| stu2.sayHello(); | |
| stu3.sayHello(); | |
| // 所有的对象都有一个constructor属性！指向了构造函数！ | |
| document.write("stu1.constructor指向了Student："+(stu1.constructor==Student)+"<br>"); | |
| //instanceof 判断某个对象是否属于某个类型 | |
| document.write("stu1属于Student吗？"+(stu1 instanceof Student)+"<br>"); | |
| document.write("stu1属于Object吗？"+(stu1 instanceof Object)+"<br>"); | |
| document.write("stu1属于Function吗？"+(stu1 instanceof Function)+"<br>"); | |
| </script> | |
| </body> | |
| </html> |
4、原型对象
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>原型对象</title> | |
| <!-- | |
| 注意点: | |
| 01.所有的对象都有一个constructor属性！指向了构造函数！ | |
| 02.当我们创建一个函数的时候，该函数就会有一个prototype属性， | |
| 这个属性指向了 通过构造函数创建的那个原型对象！Student.prototype | |
| 03.原型对象就是内存中为其他对象提供共享属性和方法的对象！ | |
| 04.prototype属性只有函数才有！ | |
| 05.每个对象都有一个__proto__属性，指向了原型对象！ | |
| --> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| /*创建一个构造函数*/ | |
| function Student(){} | |
| //通过原型对象来创建对象 | |
| Student.prototype.name; | |
| Student.prototype.age; | |
| Student.prototype.address; | |
| Student.prototype.sayHello=function(){ | |
| document.write("姓名："+this.name+"<br/>"); | |
| document.write("年龄："+this.age+"<br/>"); | |
| document.write("住址："+this.address+"<br/>"); | |
| } | |
| var stu1=new Student(); | |
| stu1.name="小白"; | |
| stu1.age=52; | |
| stu1.address="天上人间"; | |
| var stu2=new Student(); | |
| stu2.sayHello(); | |
| // 验证每个对象都有一个__proto__属性，指向了原型对象！ | |
| document.write(stu2.__proto__==Student.prototype); | |
| </script> | |
| </body> | |
| </html> |
5、深入原型对象
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>深入原型对象</title> | |
| </head> | |
| <body> | |
| <!-- | |
| 01.prototype属性只有函数才有！ | |
| 02.每个对象都有一个__proto__属性，指向了原型对象！ | |
| --> | |
| <script type="text/javascript"> | |
| //01.验证只有函数有prototype属性 | |
| var a={}; | |
| document.write(a.prototype+"<br/>"); | |
| document.write(a.__proto__+"<br/>"); | |
| var b=function(){} | |
| document.write(b.prototype+"<br/>"); | |
| document.write(b.__proto__+"<br/>"); | |
| var c=new b(); | |
| // 02.验证每个对象都有一个__proto__属性，指向了原型对象！ | |
| document.write(c.__proto__== b.prototype); | |
| </script> | |
| </body> | |
| </html> |
6、原型链
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>原型链</title> | |
| <!-- | |
| 原型链： | |
| 01.一个原型对象是另一个原型对象的实例！ 小猫是动物的一个实例！ | |
| 02. 相关的原型链层层递进，就构成了实例和原型对象的链条，我们就称之为原型链！ | |
| 蹲在角落里的那只黑猫 （实例） | |
| 继承了 | |
| 猫类（01.相当于黑猫来说是原型对象 02.相对于动物来说是一个实例） | |
| 继承了 | |
| 动物类（01.所有动物的原型对象 02.object的实例） | |
| 继承了 | |
| Object（所有原型对象的顶级） | |
| 只要是个对象都有__proto__属性，指向了原型对象！ | |
| 问题： | |
| Object是对象！ | |
| 有__proto__属性！ | |
| 属性值是null！ | |
| --> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| //模拟一个构造函数 | |
| var Student=function(){}; | |
| var stu1=new Student(); | |
| document.write(stu1.__proto__+"<br/>"); //student | |
| document.write(stu1.__proto__.__proto__+"<br/>");//function | |
| document.write(stu1.__proto__.__proto__.__proto__+"<br/>"); // object null | |
| document.write("==================================="); | |
| document.write((stu1.__proto__===Object.prototype)+"<br/>"); //false | |
| document.write((Student.prototype.__proto__===Object.prototype)+"<br/>"); //true | |
| </script> | |
| </body> | |
| </html> |
7、借用构造函数
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>借用构造函数</title> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| //创建Animal的构造 | |
| function Animal(){ | |
| this.names=["小猫","小狗","小刺猬"]; | |
| } | |
| //创建Dog的构造 | |
| function Dog(){ | |
| //借用构造 | |
| Animal.call(this); //调用一个对象的方法，产生一个新的对象！ 继承了Animal | |
| this.age=50; | |
| } | |
| // Dog.prototype=new Animal(); //使用原型链产生继承 | |
| var dog1=new Dog(); | |
| dog1.names.push("小黑猫"); | |
| document.write(dog1.names+dog1.age); | |
| </script> | |
| </body> | |
| </html> |
8、借用构造函数的同时传递参数
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>借用构造函数的同时传递参数</title> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| //创建Animal的构造 | |
| function Animal(name){ | |
| this.name=name; | |
| } | |
| //创建Dog的构造 | |
| function Dog(){ | |
| //借用构造 传递参数 | |
| Animal.call(this,"小黑狗"); | |
| this.age=50; | |
| } | |
| //创建Cat的构造 | |
| function Cat(){ | |
| //借用构造 | |
| Animal.call(this,"小猫咪"); | |
| this.health=100; | |
| } | |
| //创建小狗的实例 | |
| var dog1=new Dog(); | |
| document.write(dog1.name); | |
| document.write(dog1.age); | |
| //创建小猫咪的实例 | |
| var cat1=new Cat(); | |
| document.write(cat1.name); | |
| document.write(cat1.health); | |
| </script> | |
| </body> | |
| </html> |
9、组合继承
| <!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> |