1. 面向過(guò)程：
注重于流程順序:
1.分析解決問(wèn)題都需要哪些步驟
2.將這些步驟一步一步封裝成方法
3.根據(jù)業(yè)務(wù)邏輯积锅，將方法依次調(diào)用
2. 面向?qū)ο螅簅op
Object Oriented Programming
對(duì)象 面向 編程
核心思想：關(guān)注的是 以事務(wù)為中心 提取順序流程中的參與者（對(duì)象） 將各個(gè)流程順序進(jìn)行劃分。
編寫(xiě)到各個(gè)參與者的方法里面萤彩，各自按照約定好的順序徘郭，執(zhí)行各自的流程順序端朵，來(lái)共同完成一個(gè)業(yè)務(wù)邏輯
對(duì)象的范疇：萬(wàn)物萬(wàn)事皆對(duì)象
對(duì)象的特征： 屬性
對(duì)象的行為：方法
在程序上液肌，對(duì)象是一組行為和特征的數(shù)據(jù)集和
常見(jiàn)對(duì)象：標(biāo)簽對(duì)象 BOM對(duì)象 系統(tǒng)內(nèi)置對(duì)象
window history localStorage 系統(tǒng)內(nèi)置對(duì)象函數(shù) 本身也是一個(gè)對(duì)象
人為定義的對(duì)象
系統(tǒng)內(nèi)置 new Object（）創(chuàng)建空對(duì)象
var obj = new Object();
console.log(obj);
// 字面量的形式創(chuàng)建對(duì)象
var obj1 = {};
console.log(obj1);
console.log([obj1]);
// 對(duì)象是屬性和方法的集合
// 給對(duì)象動(dòng)態(tài)添加方法
obj.name = '文文' //添加屬性
obj['say'] = function () { //添加方法
console.log('hello world');
}
obj1['name'] = '劉';
obj1['say'] = function () {
console.log('000');
}
console.log(obj);
// 系統(tǒng)對(duì)象
var arr = new Array();
var str = new String();
var num = new Number();
var bool = new Boolean();
3. 構(gòu)造方法創(chuàng)建對(duì)象
通過(guò)構(gòu)造函數(shù)來(lái)寫(xiě)一個(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對(duì)象
// return this;
}
// 創(chuàng)建對(duì)象
var p1 = new Person('小明', '3')
console.log(p1);
4. js對(duì)象的產(chǎn)生
對(duì)象抽象成類焰络，類實(shí)例化成對(duì)象
直觀上來(lái)說(shuō)：通過(guò)new產(chǎn)生的 類的實(shí)例化
JS中所有的對(duì)象戴甩，都是由一個(gè)原型對(duì)象拷貝自己產(chǎn)生的
獲取當(dāng)前對(duì)象的原型對(duì)象：Object.getPrototype(要檢查的對(duì)象)
// 原型的屬性和方法的訪問(wèn)
function Animal() {
this.name = '小明';
}
// 實(shí)例化對(duì)象
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);
對(duì)象在訪問(wèn)屬性和調(diào)用方法時(shí)，首先會(huì)在自己的屬性和方法上面查找
如果能找到闪彼，直接調(diào)用甜孤，未找到，就去原型對(duì)象上找备蚓，找到后執(zhí)行
對(duì)象對(duì)于原型對(duì)象的屬性和方法是只讀操作课蔬，無(wú)法修改原型對(duì)象的屬性和方法
如果給對(duì)象設(shè)置跟原型對(duì)象一樣的屬性名和方法
相當(dāng)于給對(duì)象本身設(shè)置了一個(gè)新的屬性和方法囱稽，并且與原型的屬性和方法重名
之后訪問(wèn)這個(gè)重名的屬性和方法郊尝，就只能訪問(wèn)到自身，而不能直接訪問(wèn)到原型
5. 多態(tài)
多態(tài)：利用面向?qū)ο蠼鉀Qswitch case
執(zhí)行同一個(gè)方法战惊，傳入的對(duì)象不一樣流昏，輸出的結(jié)果不一樣
分離的思想：
將程序中變化的部分和不變的部分分離
將變化的部分當(dāng)做參數(shù)傳入函數(shù)
在函數(shù)內(nèi)部將相同部分的對(duì)象方法調(diào)用
根據(jù)不同的對(duì)象自動(dòng)輸出不同的結(jié)果
盡可能的消除了分支語(yǔ)句，方便系統(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è)對(duì)象吞获，覆蓋掉Man的原型對(duì)象
// 未覆蓋前况凉，Man的原型對(duì)象構(gòu)造函數(shù)指向Man
// 覆蓋后，Man.prototype.constructor指向Person
// 所以需要將其改寫(xiě)回來(lái)各拷，重新指向Man
Man.prototype = new Person(); //指向person
Man.prototype.constructor = Man //改寫(xiě)回來(lái)指向自己
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ù)是指向的對(duì)象知市，其余參數(shù)為實(shí)參
// apply只有兩個(gè)參數(shù)傻盟，第一個(gè)參數(shù)是指向的對(duì)象，第二個(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ū)ο?封裝方法是通過(guò)構(gòu)造函數(shù)來(lái)實(shí)現(xiàn)的
封裝優(yōu)點(diǎn)：1.數(shù)據(jù)隱藏 可以將代碼中敏感的算法嫂丙、變量娘赴、常量，隱藏在對(duì)象的私有變量中跟啤，僅供內(nèi)部使用
2.安全性 強(qiáng)制通過(guò)自定義的方法 來(lái)實(shí)現(xiàn)內(nèi)部和外部的數(shù)據(jù)交互 達(dá)到數(shù)據(jù)過(guò)濾的效果
一般來(lái)說(shuō)诽表，設(shè)置通常用 ...+setter+...來(lái)命名方法
獲取通常用 ...+getter+...來(lái)命名方法
// 定義一個(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);
