2017年6月21号课堂笔记
生活随笔
收集整理的這篇文章主要介紹了
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
七、老師辛苦了！
?
轉載于:https://www.cnblogs.com/wsnedved2017/p/7061283.html
總結
以上是生活随笔為你收集整理的2017年6月21号课堂笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： getBoundingClientRec
- 下一篇： double 直接舍去 保留两位小数