1. 面向過程：
注重于流程順序
1.分析解決問題都需要哪些步驟
2.將這些步驟一步一步封裝成方法
3.根據(jù)業(yè)務(wù)邏輯，將方法依次調(diào)用
2. 面向?qū)ο螅簅op
Object Oriented Programming
對象 面向 編程
核心思想：關(guān)注的是 以事務(wù)為中心 提取順序流程中的參與者（對象） 將各個(gè)流程順序進(jìn)行劃分。
編寫到各個(gè)參與者的方法里面，各自按照約定好的順序，執(zhí)行各自的流程順序，來共同完成一個(gè)業(yè)務(wù)邏輯
對象的范疇：萬物萬事皆對象
對象的特征： 屬性
對象的行為：方法
在程序上，對象是一組行為和特征的數(shù)據(jù)集和
常見對象：標(biāo)簽對象 BOM對象 系統(tǒng)內(nèi)置對象
window history localStorage 系統(tǒng)內(nèi)置對象函數(shù) 本身也是一個(gè)對象
人為定義的對象
// 系統(tǒng)內(nèi)置 new Object（）創(chuàng)建空對象
var obj = new Object();
console.log(obj);
// 字面量的形式創(chuàng)建對象
var obj1 = {};
console.log(obj1);
console.log([obj1]);
// 對象是屬性和方法的集合
// 給對象動態(tài)添加方法
obj.name = '文文' //添加屬性
obj['say'] = function () { //添加方法
console.log('hello world');
}
obj1['name'] = '劉';
obj1['say'] = function () {
console.log('000');
}
console.log(obj);
// 系統(tǒng)對象
var arr = new Array();
var str = new String();
var num = new Number();
var bool = new Boolean();
3. 構(gòu)造方法創(chuàng)建對象
// 通過構(gòu)造函數(shù)來寫一個(gè)人的類
function Person(name, age) {
this.name = name || '小';
this.age = age || 0;
this.say = function() {
console.log(this.age);
console.log('hello world');
}
// 如果構(gòu)造函數(shù)里面返回this，則這個(gè)this代表window對象
// return this;
}
// 創(chuàng)建對象
var p1 = new Person('小明', '3')
console.log(p1);
4. js對象的產(chǎn)生
對象抽象成類，類實(shí)例化成對象
直觀上來說：通過new產(chǎn)生的 類的實(shí)例化
JS中所有的對象，都是由一個(gè)原型對象拷貝自己產(chǎn)生的
獲取當(dāng)前對象的原型對象：Object.getPrototype(要檢查的對象)
// 原型的屬性和方法的訪問
function Animal() {
this.name = '小明';
}
// 實(shí)例化對象
var a1 = new Animal();
console.log(a1.name);
console.log(a1);
Animal.prototype.type = 'dog';
Animal.prototype.name = '大明';
var a2 = new Animal()
console.log(a2);
console.log(a2.type);
a2.type = 'cat'
console.log(a2);
console.log(Animal.prototype.type);
對象在訪問屬性和調(diào)用方法時(shí)，首先會在自己的屬性和方法上面查找
如果能找到，直接調(diào)用，未找到，就去原型對象上找，找到后執(zhí)行
對象對于原型對象的屬性和方法是只讀操作，無法修改原型對象的屬性和方法
如果給對象設(shè)置跟原型對象一樣的屬性名和方法
相當(dāng)于給對象本身設(shè)置了一個(gè)新的屬性和方法，并且與原型的屬性和方法重名
之后訪問這個(gè)重名的屬性和方法，就只能訪問到自身，而不能直接訪問到原型
5. 多態(tài)
多態(tài)：利用面向?qū)ο蠼鉀Qswitch case
執(zhí)行同一個(gè)方法，傳入的對象不一樣，輸出的結(jié)果不一樣
分離的思想：
將程序中變化的部分和不變的部分分離
將變化的部分當(dāng)做參數(shù)傳入函數(shù)
在函數(shù)內(nèi)部將相同部分的對象方法調(diào)用
根據(jù)不同的對象自動輸出不同的結(jié)果
盡可能的消除了分支語句，方便系統(tǒng)的擴(kuò)展
function Dog() {
this.say = function() {
console.log('汪汪');
}
}
function Cat() {
this.say = function() {
console.log('喵喵');
}
}
function Cattle() {
this.say = function() {
console.log('哞哞');
}
}
function Sheep() {
this.say = function() {
console.log('咩咩');
}
}
// 調(diào)用方法
function makeSound(obj) {
obj.say()
}
var d1 = new Dog();
makeSound(d1)
var d2 = new Cat();
makeSound(d2)
6. 繼承
// 繼承
function Person() {
this.type = '人';
this.name = '123';
this.age = 18;
this.say = function() {
console.log('hi');
}
}
function Man() {
this.sex = 1;
}
// 相當(dāng)于Person實(shí)例化一個(gè)對象，覆蓋掉Man的原型對象
// 未覆蓋前，Man的原型對象構(gòu)造函數(shù)指向Man
// 覆蓋后，Man.prototype.constructor指向Person
// 所以需要將其改寫回來，重新指向Man
Man.prototype = new Person(); //指向person
Man.prototype.constructor = Man //改寫回來指向自己
var m1 = new Man()
console.log(m1);
console.log(Man.prototype.constructor);
console.log(m1.name); //可使用person的屬性
function Kids() {
this.age = 3;
}
Kids.prototype = new Man()
Kids.prototype.constructor = Kids
var k1 = new Kids()
console.log(k1.type); //可使用person、man的屬性
console.log(k1.age);
// 構(gòu)造函數(shù)式繼承
function Person(name, age) {
this.name = name;
this.age = age;
console.log('111');
}
// 使用apply和call功能幾乎一樣，區(qū)別參數(shù)的形式不同
// call可以有多個(gè)參數(shù)，第一個(gè)參數(shù)是指向的對象，其余參數(shù)為實(shí)參
// apply只有兩個(gè)參數(shù)，第一個(gè)參數(shù)是指向的對象，第二個(gè)參數(shù)是實(shí)參數(shù)組
function Man(name, age) {
// Person.call(this, name, age)
Person.apply(this, [name, age]) //改變this指向person
this.sex = 1;
}
var m1 = new Man(2, 3)
console.log(m1);
m1.age = 0
console.log(m1.age);
7. 封裝
面向?qū)ο蠓庋b的特性
js面向?qū)ο?封裝方法是通過構(gòu)造函數(shù)來實(shí)現(xiàn)的
封裝優(yōu)點(diǎn)：1.數(shù)據(jù)隱藏 可以將代碼中敏感的算法、變量、常量，隱藏在對象的私有變量中，僅供內(nèi)部使用
2.安全性 強(qiáng)制通過自定義的方法 來實(shí)現(xiàn)內(nèi)部和外部的數(shù)據(jù)交互 達(dá)到數(shù)據(jù)過濾的效果
一般來說，設(shè)置通常用 ...+setter+...來命名方法
獲取通常用 ...+getter+...來命名方法
// 定義一個(gè)構(gòu)造函數(shù)
function Home() {
// 私有屬性
var money;
// 公共屬性
this.name = 'qwqq'
// 公共方法
this.Asetter = function() {
var num = rand(500, 5000)
money = num;
}
this.Agetter = function() {
return money - 500;
}
// 私有方法
function rand(min, max) {
return Math.round(Math.random() * (max - min) + min)
}
// 數(shù)據(jù)隱藏
this.age = 0;
this.ageChange = function(n) {
this.age = n;
}
}
var h1 = new Home()
h1.Asetter();
console.log(h1.Agetter());
console.log(h1.money);
// 數(shù)據(jù)隱藏
console.log(h1.ageChange(20));
// 封裝初始化傳參
function Person(options) {
options = options || {}
this.name = options.name
this.age = options.age
this.say = options.say
}
var p1 = new Person({
name: '123',
age: 4,
say: function() {
console.log('hi');
}
})
console.log(p1);
