- 面向過程：
注重于流程順序
1.分析解決問題都需要哪些步驟
2.將這些步驟一步一步封裝成方法
3.根據(jù)業(yè)務邏輯，將方法依次調(diào)用
- 面向對象：oop
Object Oriented Programming
對象 面向 編程
核心思想：關注的是 以事務為中心 提取順序流程中的參與者（對象） 將各個流程順序進行劃分。
編寫到各個參與者的方法里面唬复，各自按照約定好的順序后豫，執(zhí)行各自的流程順序歧寺，來共同完成一個業(yè)務邏輯
對象的范疇：萬物萬事皆對象
對象的特征： 屬性
對象的行為：方法
在程序上萤皂，對象是一組行為和特征的數(shù)據(jù)集和
常見對象：標簽對象 BOM對象 系統(tǒng)內(nèi)置對象
window history localStorage 系統(tǒng)內(nèi)置對象函數(shù) 本身也是一個對象
人為定義的對象
// 系統(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();
- 構造方法創(chuàng)建對象
// 通過構造函數(shù)來寫一個人的類
function Person(name, age) {
this.name = name || '小';
this.age = age || 0;
this.say = function() {
console.log(this.age);
console.log('hello world');
}
// 如果構造函數(shù)里面返回this，則這個this代表window對象
// return this;
}
// 創(chuàng)建對象
var p1 = new Person('小明', '3')
console.log(p1);
- js對象的產(chǎn)生
對象抽象成類妆绞，類實例化成對象
直觀上來說：通過new產(chǎn)生的 類的實例化
JS中所有的對象顺呕，都是由一個原型對象拷貝自己產(chǎn)生的
獲取當前對象的原型對象：Object.getPrototype(要檢查的對象)
// 原型的屬性和方法的訪問
function Animal() {
this.name = '小明';
}
// 實例化對象
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)用方法時，首先會在自己的屬性和方法上面查找
如果能找到括饶，直接調(diào)用株茶，未找到，就去原型對象上找图焰，找到后執(zhí)行
對象對于原型對象的屬性和方法是只讀操作启盛，無法修改原型對象的屬性和方法
如果給對象設置跟原型對象一樣的屬性名和方法
相當于給對象本身設置了一個新的屬性和方法，并且與原型的屬性和方法重名
之后訪問這個重名的屬性和方法技羔，就只能訪問到自身僵闯，而不能直接訪問到原型
- 多態(tài)
多態(tài)：利用面向對象解決switch case
執(zhí)行同一個方法，傳入的對象不一樣藤滥，輸出的結果不一樣
分離的思想：
將程序中變化的部分和不變的部分分離
將變化的部分當做參數(shù)傳入函數(shù)
在函數(shù)內(nèi)部將相同部分的對象方法調(diào)用
根據(jù)不同的對象自動輸出不同的結果
盡可能的消除了分支語句鳖粟，方便系統(tǒng)的擴展
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)
- 繼承
// 繼承
function Person() {
this.type = '人';
this.name = '123';
this.age = 18;
this.say = function() {
console.log('hi');
}
}
function Man() {
this.sex = 1;
}
// 相當于Person實例化一個對象，覆蓋掉Man的原型對象
// 未覆蓋前拙绊，Man的原型對象構造函數(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);
// 構造函數(shù)式繼承
function Person(name, age) {
this.name = name;
this.age = age;
console.log('111');
}
// 使用apply和call功能幾乎一樣榄攀，區(qū)別參數(shù)的形式不同
// call可以有多個參數(shù)，第一個參數(shù)是指向的對象谨娜，其余參數(shù)為實參
// apply只有兩個參數(shù)航攒，第一個參數(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);
- 封裝
面向對象封裝的特性
js面向對象 封裝方法是通過構造函數(shù)來實現(xiàn)的
封裝優(yōu)點：1.數(shù)據(jù)隱藏 可以將代碼中敏感的算法趴梢、變量漠畜、常量，隱藏在對象的私有變量中坞靶，僅供內(nèi)部使用
2.安全性 強制通過自定義的方法 來實現(xiàn)內(nèi)部和外部的數(shù)據(jù)交互 達到數(shù)據(jù)過濾的效果
一般來說憔狞，設置通常用 ...+setter+...來命名方法
獲取通常用 ...+getter+...來命名方法
// 定義一個構造函數(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);
