2017年6月21号课堂笔记
2017年6月21号 星期三 多云转雷阵雨 空气质量：中度污染~轻度污染
内容： JavaScript 原型式面向对象
01基于Object的对象的方式创建对象；02使用字面量赋值方式创建对象
03构造函数；04原型对象；05原型链
备注：老师休养回来第二节课，希望他手术的伤口尽快愈合，远离伤病痛苦。
一、基于Object的对象的方式创建对象
1、老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>基于Object对象的方式创建对象</title>
</head>
<body>
<script type="text/javascript">
//创建对象
var student=new Object();
//给对象增加属性
student.name="小黑";
student.age=50;
student.address="海淀";
//给对象增加方法
student.sleep=function(){
alert(this.name+"在睡觉");
}
//调用方法
student.sleep();
</script>
</body>
</html>
2、自己代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>基于Object创建对象</title>
</head>
<body>
<script type="text/javascript">
//创建对象
var person=new Object();
//给对象增加属性
person.name="香吉士";
person.age="32";
person.address="路飞的船上";
//给对象增加方法
person.cook=function(){
alert(this.name+"在做大餐！口水~");
}
//调用方法
person.cook();
</script>
</body>
</html>
二、使用字面量赋值方式创建对象
1、老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>使用字面量赋值方式创建对象</title>
<!-- 字面量： 等号右边的！
var a="haha";
a：变量名
haha:字面量
-->
</head>
<body>
<script type="text/javascript">
//使用字面量赋值方式创建对象
var student={
name:"小白",
age:50,
address:"北京海淀区",
sleep:function(){
alert(this.name+"在睡觉");
}
};
//调用方法
student.sleep();
//如果说我们需要N个对象呢？ 而且都有这些属性和方法？？？怎么避免代码重复？
</script>
</body>
</html>
2、自己代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>使用字面量赋值方式创建对象</title>
</head>
<body>
<script type="text/javascript">
//使用字面量赋值方式创建对象
var person={
name:"郎晓明",
age:"38",
job:"中国内地男演员，歌手",
address:"北京市海淀区",
intro:function(){
alert("姓名："+this.name+"\n年龄："+this.age+"\n工作："+this.job+"\n住址："+this.address);
}
};
//调用方法
person.intro();
</script>
</body>
</html>
三、构造函数
1、老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>构造函数</title>
<!--
01.创建对应类型的对象
02.使用this关键字赋值（属性，方法）
03.new关键字
定义构造函数的注意事项：
01.首字母大写
02.如果没有返回值，会自动创建对应类型的对象返回给我们
03.如果有返回值，就会返回这个返回值的类型！
-->
</head>
<body>
<script type="text/javascript">
//定义一个构造函数
function Student(name,age,address){
//给属性赋值
this.name=name;
this.age=age;
this.address=address;
/*设置方法
this.showInfo=function(){
alert("姓名："+name+"\n"+"年龄:"+age+"\n"+"地址："+address);
}*/
this.showInfo=showInfo;
}
//全局作用域的方法 ！ 让所有的对象共享这个方法的实例
function showInfo(){
alert("姓名："+this.name+"\n"+"年龄:"+this.age+"\n"+"地址："+this.address);
}
/*验证有返回值
function Person(name){
var obj=new Object();
obj.name=name;
return obj;
}
var obj1=new Person("haha");
alert(obj1 instanceof Person); false
alert(obj1 instanceof Object); true*/
//创建多个对象
var stu1=new Student("小黑1",10,"海淀1");
var stu2=new Student("小黑2",20,"海淀2");
var stu3=new Student("小黑3",30,"海淀3");
//调用各自的自我介绍方法
/* stu1.showInfo();
stu2.showInfo();
stu3.showInfo();
alert(stu1 instanceof Student);*/
//我们的showInfo是所有对象共有的方法！应该具有一个实例！！！
//alert(stu1.showInfo==stu2.showInfo); false
//优化 把这个方法提取出来 变成全局作用域的方法
alert(stu1.showInfo==stu3.showInfo);
//直接调用showInfo 发现 里面的数据 是没有的！ 失去这个方法的意义了？ 找不到this
showInfo();
</script>
</body>
</html>
2、自己代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>构造函数</title>
</head>
<body>
<script type="text/javascript">
//定义构造函数
function Pirate(name,age,job){
//给属性赋值
this.name=name;
this.age=age;
this.job=job;
//设置方法
this.showInfo= function () {
alert("姓名："+name+"\n年龄："+age+"\n职业："+job);
}
}
//创建多个对象
var pirate1=new Pirate("luffy",20,"captain");
var pirate2=new Pirate("zoro",21,"swordman");
var pirate3=new Pirate("sanji",23,"chef");
//调用各自的自我介绍方法
pirate1.showInfo();
pirate2.showInfo();
pirate3.showInfo();
</script>
</body>
</html>
四、原型对象
1、老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>原型对象</title>
<!--
所有的对象都有一个原型对象（prototype）,
原型对象中有一个constructor属性指向了 包含prototype属性的构造函数！
原型对象：内存中给其他对象提供共享的属性和方法的对象！
-->
</head>
<body>
<script type="text/javascript">
//构造函数
function Student(name,age,address){
/**
* 这里面的属性和方法就是所有实例都可以共享的！
* 如果我们创建了N个对象！那么这N个对象使用的都是同一个属性和方法！
*/
Student.prototype.name=name;
Student.prototype.age=age;
Student.prototype.address=address;
Student.prototype.showInfo=function(){
alert("姓名："+this.name+"\n"+"年龄:"+this.age+"\n"+"地址："+this.address);
}
}
//创建对象
var stu1=new Student("小河",10000,"水流淌");
stu1.showInfo();
var stu2=new Student("大河",500,"哗啦啦");
stu2.showInfo();
//alert(stu1.showInfo==stu2.showInfo); //true
alert(stu1.constructor==Student); //true
alert(stu1.__proto__==Student.prototype); //true
</script>
</body>
</html>
2、自己代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>原型对象</title>
</head>
<body>
<script type="text/javascript">
function Pirate(name,age,job){
Pirate.prototype.name=name;
Pirate.prototype.age=age;
Pirate.prototype.job=job;
Pirate.prototype.showInfo= function () {
alert("姓名："+name+"\n年龄："+age+"\n职业："+job);
}
}
//创建对象
var pirate1=new Pirate("nami",18,"航海士");
pirate1.showInfo();
var pirate2=new Pirate("robin",18,"历史学家");
pirate2.showInfo();
//验证几个结论
alert(pirate1.showInfo==pirate2.showInfo);//true
alert(pirate1.constructor==Pirate);//true
alert(pirate2.__proto__==Pirate.prototype);//true
</script>
</body>
</html>
五、原型链
1、老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>原型链</title>
<!--
01.一个原型对象是另一个原型对象的实例
02.相关的原型对象层层递进，就构成了实例和原型的链条，我们称之为 原型链！
-->
</head>
<body>
<script type="text/javascript">
//创建动物的构造函数
function Animal(){
}
Animal.prototype.name="动物";
//所有动物的睡觉方法
Animal.prototype.sleep=function(){
alert("动物在睡觉。。。");
}
//创建小狗的构造函数
function Dog(){
//如果产生了关系，就类似于java中的继承！
}
Dog.prototype.name="小狗";
//小狗睡觉的方法
Dog.prototype.sleep=function(){
alert("小狗在睡觉。。。");
}
/**
* 现在动物和小狗没有关系！ 怎么让他俩有关系（原型-动物和实例-小狗）
* 01.Dog是一个函数
* 02.这个函数中有一个prototype属性
* 03.需要让prototype属性指向Animal
*/
Dog.prototype=new Animal(); //Dog的原型对象是Animal原型对象的实例！产生关系！
//创建小狗对象
var dog=new Dog();
alert(dog.name); // 需要观察Dog中是否存在name属性! name属性是不是通过 函数名称.prototype.出来的！
//dog.sleep(); 输出的是动物在睡觉
</script>
</body>
</html>
2、自己代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>原型链</title>
</head>
<body>
<script type="text/javascript">
//创建城市的构造函数
function City(){
}
//城市的属性
City.prototype.name="城市";
//所有城市的盖楼方法
City.prototype.buildHouse=function(){
alert("城市在建高楼。。。。。。");
}
//创建北京的构造函数
function Beijing(){
}
//北京的属性
Beijing.prototype.name="北京";
//北京的盖楼方法
Beijing.prototype.buildHouse=function(){
alert("北京在建高楼。。。。。。");
}
/**
* 现在城市和北京没有关系！ 怎么让他俩有关系（原型-城市和实例-北京）
* 01.Beijng是一个函数
* 02.这个函数中有一个prototype属性
* 03.需要让prototype属性指向City
*/
Beijing.prototype=new City();//Beijing的原型对象是City原型对象的实例！产生关系！
//创建北京对象
var beijing=new Beijing();
alert(beijing.name);//输出的是“城市” 需要观察Beijing中是否存在name属性!name属性是不是通过函数名称.prototype.出来的！
beijing.buildHouse();//输出的是“城市在建高楼。。。。。。”
</script>
</body>
</html>
六、作业
1、练习今天老师讲的内容
2、看完MySQL
七、老师辛苦了！
