01課程介紹
課程介紹:（fy）
* 原型及作用
* 小案例--貪吃蛇
* 繼承
* 高階函數
* 內置的方法
* 正則表達式
*
*
* 1.複習-----大量的時間-----半小時
* 2.面向對象和麪向過程的編程思想
* 3.對象的創建的三種方式
* 原型的引入-------------------------------原型的作用
* 原型的寫法----重點
* 實例對象和構造函數和原型對象三者之間的關係---重點
* 體驗面向對象的方式編程的思想----體驗的案例---理解
* 原型的簡單的語法-----注意的問題
* 隨機食物的產生----小例子----能夠寫出啦
02複習
JavaScript簡稱:JS
* JS分三個部分:
* 1 ECMAScript標準---基礎的語法
* 2 DOM Document Object Model 文檔對象模型
* 3 BOM Browser Object Model 瀏覽器對象模型
* 什麼是JS?
* 是一門腳本語言
* 是一門解釋性語言
* 是一門弱類型語言
* 是一門基於對象的語言
* 是一門動態類型的語言
*
* 動態頁面:頁面由html+css+Js
* 向服務器發送請求,服務器那邊沒有頁面,是動態的生成,返回給客戶端
*
* js最初的目的:解決用戶和服務器之間的交互問題
* js做特效,遊戲,移動端,服務端
*
*
* 編程思想:
* 面向過程:所有的事情都是親力親爲,注重的是過程
* 面向對象:提出需求,找對象,對象解決,注重的是結果
* js不是一門面向對象的語言,是基於對象的語言,js來模擬面向對象
* 面向對象的特性:封裝,繼承,多態,(抽象性)
* 封裝:就是包裝,把一些重用的內容進行包裝,在需要的時候,直接使用
* 把一個值,存放在一個變量中,把一些重用的代碼放在函數中,把好多相同功能的函數放在一個對象中,把好多功能的對象,放在一個文件中,把一些相同的內容放在一個對象中
*
* 繼承:類與類之間的關係,js中沒有類的概念,js中有構造函數的概念,是可以有繼承的,是基於原型
*
* 多態:同一個行爲,針對不同的對象,產生了不同的效果
03創建對象的三種方式
/對象:特指的某個事物,具有屬性和方法(一組無序的屬性的集合)
//特徵---->屬性
//行爲---->方法
//小蘇:------>姓名,性別,年齡,吃,睡覺,玩
//創建對象三種方式:
//1 字面量的方式
//2 調用系統的構造函數
//3 自定義構造函數方式
//1.實例對象
// var per1={
// name:"卡卡西",
// age:20,
// sex:"男",
// eat:function () {
// console.log("吃臭豆腐");
// },
// readBook:function () {
// console.log("親熱天堂");
// }
// };
//
// //2.調用系統的構造函數
// var per2=new Object();
// per2.name="大蛇丸";
// per2.age=30;
// per2.sex="男";
// per2.eat=function () {
// console.log("吃榴蓮");
// };
// per2.play=function () {
// console.log("這個小蛇真好玩");
// };
//
// function Person() {
//
// }
// console.log(per2 instanceof Object);
//
// var dog=new Object();
//3.自定義構造函數（這種方法最好，比前兩種創建方法好）
function Person(name,age,sex) {
this.name=name;
this.age=age;
this.sex=sex;
this.play=function () {
console.log("天天打遊戲");
};
}
var per=new Person("雛田",18,"女");
console.log(per instanceof Person);
04自定義構造函數創建對象做的事情
function Person(name,age) {
this.name=name;
this.age=age;
this.sayHi=function () {
console.log("您好");
};
}
//創建對象---->實例化一個對象,的同時對屬性進行初始化
var per=new Person("小紅",20);
/*
*
* 1.開闢空間存儲對象
* 2.把this設置爲當前的對象
* 3.設置屬性和方法的值
* 4.把this對象返回
05工廠模式創建對象
工廠模式和自定義構造函數兩者的共同點:都是函數,都可以創建對象,都可以傳入參數
*
* 但是區別分別以下：
* 1）工廠模式:
* 函數名是小寫
* 有new,
* 有返回值
* new之後的對象是當前的對象
* 直接調用函數就可以創建對象
*
* 2）自定義構造函數:
* 函數名是大寫(首字母)
* 沒有new
* 沒有返回值
* this是當前的對象
* 通過new的方式來創建對象
而我們寫的時候是以自定義構造函數的方式來寫的
06構造函數和實例對象之間的關係
//面向對象的思想是----抽象的過程---->實例化的過程
//小蘇這個人,姓名,年齡,性別, 吃飯,打招呼,睡覺
//自定義構造函數----->實例化對象
//per.eat();//吃
//實例對象是通過構造函數來創建的
//實例對象會指向自己的構造函數(暫時理解,是錯誤的)
//把這個對象的結構顯示出來
console.dir(per);
console.dir(Person);
//實例對象的構造器(構造函數)
//實例對象的構造器是指向Person的,結果是true,所以,這個實例對象per就是通過Person來創建的
console.log(per.constructor==Person);//
console.log(per.__proto__.constructor==Person); true
console.log(per.__proto__.constructor==Person.prototype.constructor); true
總結:（上面看不懂沒關係，看懂總結就可以了）
/*
* 實例對象和構造函數之間的關係:
* 1. 實例對象是通過構造函數來創建的---創建的過程叫實例化
* 2.如何判斷對象是不是這個數據類型?
* 1) 通過構造器的方式 實例對象.構造器==構造函數名字
* 2) 對象 instanceof 構造函數名字
* 儘可能的使用第二種方式來識別,爲什麼?原型講完再說
*
通過原型來解決---------數據共享,節省內存空間,作用之一
08原型添加方法解決數據共享問題
function Person(name,age) {
this.name=name;
this.age=age;
}
//通過原型來添加方法,解決數據共享,節省內存空間
Person.prototype.eat=function () {
console.log("吃涼菜");
};
var p1=new Person("小明",20);
var p2=new Person("小紅",30);
console.log(p1.eat==p2.eat);//true
console.dir(p1);
console.dir(p2);
//實例對象中根本沒有eat方法,但是能夠使用,這是爲什麼?
09解釋eat方法
原型?
* 實例對象中有__proto__這個屬性,叫原型,也是一個對象,這個屬性是給瀏覽器使用,不是標準的屬性----->__proto__----->可以叫原型對象
* 構造函數中有prototype這個屬性,叫原型,也是一個對象,這個屬性是給程序員使用,是標準的屬性------>prototype--->可以叫原型對象
*
* 實例對象的__proto__和構造函數中的prototype相等--->true
* 又因爲實例對象是通過構造函數來創建的,構造函數中有原型對象prototype
* 實例對象的__proto__指向了構造函數的原型對象prototype
window是對象
//document是屬性,document也是一個對象
//write()是方法
//window.document.write("哈哈");
//對象.style.color=值;
10體會面向過程和麪向對象的思想
1. 首先呢,點擊按鈕,改變div的背景顏色,下面是低級的傳統面向過程的思路
2.接下來過渡到面向對象思想----下面是初級的
按鈕是一個對象,div是一個對象,顏色是一個屬性
3.接下來感受一下:點擊btn實現div的多種屬性變化這個案例是爲了體會高級面向對象的過程思路
（寫不出來沒關係，看懂40%即可，能看懂大致思路即可，代碼要敲一下）
11複習總結原型
實例對象中有兩個屬性(這兩個屬性是通過構造函數來獲取的),__proto__這個屬性
//構造函數中並沒有sex和age的兩個屬性
/*
*
* 實例對象中有個屬性,__proto__,也是對象,叫原型,不是標準的屬性,瀏覽器使用的
* 構造函數中有一個屬性,prototype,也是對象,叫原型,是標準屬性,程序員使用
*
* 原型---->__proto__或者是prototype,都是原型對象,
* 原型的作用:共享數據,節省內存空間（這句話要牢牢記住，很重要）
12構造函數和實例對象和原型對象之間的關係
原型的作用之一:共享數據,節省內存空間
//構造函數
function Person(age,sex) {
this.age=age;
this.sex=sex;
}
//通過構造函數的原型添加一個方法
Person.prototype.eat=function () {
console.log("明天中午吃完飯就要演講,好痛苦");
};
var per=new Person(20,"男");
// per.__proto__.eat();
per.eat();
// per.eat();
//構造函數,原型對象,實例對象之間的關係
13總結以上三者之間的關係 （很重要）
構造函數可以實例化對象
* 構造函數中有一個屬性叫prototype,是構造函數的原型對象
* 構造函數的原型對象(prototype)中有一個constructor構造器,這個構造器指向的就是自己所在的原型對象所在的構造函數
* 實例對象的原型對象(__proto__)指向的是該構造函數的原型對象
* 構造函數的原型對象(prototype)中的方法是可以被實例對象直接訪問的
14利用原型對象分享數據
什麼樣子的數據是需要寫在原型中?
//需要共享的數據就可以寫原型中
//原型的作用之一:數據共享
//屬性需要共享,方法也需要共享
//不需要共享的數據寫在構造函數中,需要共享的數據寫在原型中
//構造函數
15原型的簡單語法
1.首先原始的原型寫的零散。看下面
2.現在來學習一下原型的簡單語法，把所有的方法寫在一起，但是唯一的要注意的是：需要在原型函數裏面 手動添加構造器constructor指向誰，如下紅色框出來的提示，這個地方構造器千萬不要漏掉。
16.原型中的方法是可以相互訪問的
1.實例對象的方法,是可以相互調用的
2.原型中的方法,是可以相互訪問和調用的
17實例對象使用屬性和方法層的使用搜索
實例對象使用的屬性或者方法,先在實例對象中查找,找到了則直接使用,找不到則,
去實例對象的__proto__指向的原型對象prototype中找,找到了則使用,找不到則報 錯，這個查找過程是原型鏈。
18爲內置對象添加原型方法
我們能否爲系統的對象的原型中添加方法,相當於在改變源碼
//eg.我希望字符串中有一個倒序字符串的方法
19把局部變量變成了全局變量
綜上所述：如何把局部變量變成全局變量?
把局部變量給window就可以了(瀏覽器中頂級對象是window)
20把隨機對象暴露給window成爲全局對象
1.首先學一下隨機函數在（0，5）之間的表達：Math.floor(Math.random()*5) floor爲向下取整
那麼要是在一個範圍呢比如（20,50）的表達是：Math.floor(Math.random()*(50-30)+30)
總結在一個範圍之間（min,max）的表達是：Math.floor(Math.random()*(max-min)+min)
